Eric Gardner egardner

Multiple Image Layers in Leaflet JS

Reference code for setting up a basic multi-image deep zoom viewer in Leaflet.js. This example assumes that image tiles have been generated by something like MapTiler or a similar tool. There is also code in the <style> tags of the HTML <head> to override Leaflet's layers icon and replace it with a rotation icon, since that's a better indication of what's happening in this use-case.

L.control.layers() can accept accept a second argument for overlays (capable of existing simultaneously unlike baseMaps which are mutually exclusive.

	# Using Proteus-Jekyll gems here

	source 'https://rubygems.org'

	gem 'bourbon'
	gem 'coffee-script'
	gem 'jekyll'
	gem 'jekyll-assets'
	gem 'jekyll-haml'
	gem 'neat'

	//= require jquery.smoothState.min
	//= require velocity.min
	//= require velocity.ui.min
	//= require ramjet.min

	// =============================================================================
	// Basic UI Control functions

	function rightPanelToggle () {
	var left = $(".panel--left");

	// Grid Functions
	//
	// These functions manage the interactive catalogue grid.
	// Users can filter by an arbitrary combination of criteria.
	//
	// Currently state is managed in a global gridSelection object.
	// Its properties reflect the current key/value pairs for filter criteria.


	// -----------------------------------------------------------------------------

	# Only the relevant parts of config.rb are included here
	require "extensions/pdf"

	# ...

	configure :build do
	activate :pdf do \|pdf\|
	pdf.print_template = "/catalogue/print-template.html"
	end
	end

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#map {

	# Get Catalogue Sections
	# Returns 3 arrays of resource objects (frontmatter, catalogue, backmatter)
	def catalogue_sections
	contents = sort_catalogue_contents
	frontmatter = contents.find_all { \|p\| p.data.sort_order <= 10 }
	backmatter = contents.find_all { \|p\| p.data.sort_order > 100 }
	catalogue = contents.find_all do \|p\|
	p.data.sort_order > 10 && p.data.sort_order <= 100
	end

	require "middleman"
	require "middleman/rack"
	require "middleman-core/rack"
	require "rspec"
	require "capybara/rspec"
	require "capybara/webkit"

	module MiddlemanApplication
	extend RSpec::SharedContext

	// Variables
	// -----------------------------------------------------------------------------
	$page-width: 8.5in;
	$page-height: 11in;

	$bleed: 0.125in;
	$bleed-height: 11.25in;
	$bleed-width: 8.75in;

	$bottom-margin: 1in;