egardner/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## app.js
var options = {
  noWrap: true,
  attributionControl: false
};

var v1 = L.tileLayer('tiles/v1/{z}/{x}/{y}.png', options);
var v2 = L.tileLayer('tiles/v2/{z}/{x}/{y}.png', options);
var v3 = L.tileLayer('tiles/v3/{z}/{x}/{y}.png', options);
var v4 = L.tileLayer('tiles/v4/{z}/{x}/{y}.png', options);
var v5 = L.tileLayer('tiles/v5/{z}/{x}/{y}.png', options);
var v6 = L.tileLayer('tiles/v6/{z}/{x}/{y}.png', options);
var v7 = L.tileLayer('tiles/v7/{z}/{x}/{y}.png', options);
var v8 = L.tileLayer('tiles/v8/{z}/{x}/{y}.png', options);


var baseMaps = {
  "Front": v1,
  "Back": v2,
  "Left Profile": v3,
  "Right Profile": v4,
  "3/4 Left Front": v5,
  "3/4 Right Front": v6,
  "3/4 Left Back": v7,
  "3/4 Right Back": v8
};

function init() {
  var mapMinZoom = 0;
  var mapMaxZoom = 5;
  var map = L.map('map', {
    maxZoom: mapMaxZoom,
    minZoom: mapMinZoom,
    crs: L.CRS.Simple
  }).setView([0, 0], mapMaxZoom);

  var mapBounds = new L.LatLngBounds(
      map.unproject([0, 6912], mapMaxZoom),
      map.unproject([5376, 0], mapMaxZoom));

  map.fitBounds(mapBounds);
  L.tileLayer('tiles/v1/{z}/{x}/{y}.png', {
    minZoom: mapMinZoom, maxZoom: mapMaxZoom,
    bounds: mapBounds,
    attributionControl: false,
    noWrap: true
  }).addTo(map);

  L.control.layers(baseMaps).addTo(map).setPosition("bottomleft");

}


var images = [
  {
    path: "v1",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v2",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v3",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v4",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v5",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v6",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v7",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
  {
    path: "v8",
    maxZoom: 5,
    width: 5376,
    height: 6912
  },
];

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Deep Zoom Test</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script src="app.js"></script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
      .leaflet-control-layers-toggle{
        background-image: url("undo.png");
        color: 000;
      }
      .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url("undo-2x.png");
      }
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>
	var options = {
	noWrap: true,
	attributionControl: false
	};

	var v1 = L.tileLayer('tiles/v1/{z}/{x}/{y}.png', options);
	var v2 = L.tileLayer('tiles/v2/{z}/{x}/{y}.png', options);
	var v3 = L.tileLayer('tiles/v3/{z}/{x}/{y}.png', options);
	var v4 = L.tileLayer('tiles/v4/{z}/{x}/{y}.png', options);
	var v5 = L.tileLayer('tiles/v5/{z}/{x}/{y}.png', options);
	var v6 = L.tileLayer('tiles/v6/{z}/{x}/{y}.png', options);
	var v7 = L.tileLayer('tiles/v7/{z}/{x}/{y}.png', options);
	var v8 = L.tileLayer('tiles/v8/{z}/{x}/{y}.png', options);


	var baseMaps = {
	"Front": v1,
	"Back": v2,
	"Left Profile": v3,
	"Right Profile": v4,
	"3/4 Left Front": v5,
	"3/4 Right Front": v6,
	"3/4 Left Back": v7,
	"3/4 Right Back": v8
	};

	function init() {
	var mapMinZoom = 0;
	var mapMaxZoom = 5;
	var map = L.map('map', {
	maxZoom: mapMaxZoom,
	minZoom: mapMinZoom,
	crs: L.CRS.Simple
	}).setView([0, 0], mapMaxZoom);

	var mapBounds = new L.LatLngBounds(
	map.unproject([0, 6912], mapMaxZoom),
	map.unproject([5376, 0], mapMaxZoom));

	map.fitBounds(mapBounds);
	L.tileLayer('tiles/v1/{z}/{x}/{y}.png', {
	minZoom: mapMinZoom, maxZoom: mapMaxZoom,
	bounds: mapBounds,
	attributionControl: false,
	noWrap: true
	}).addTo(map);

	L.control.layers(baseMaps).addTo(map).setPosition("bottomleft");

	}



	var images = [
	{
	path: "v1",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v2",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v3",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v4",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v5",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v6",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v7",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	{
	path: "v8",
	maxZoom: 5,
	width: 5376,
	height: 6912
	},
	];
	<!DOCTYPE html>
	<html>
	<head>
	<title>Deep Zoom Test</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<script src="app.js"></script>
	<style>
	html, body, #map { width:100%; height:100%; margin:0; padding:0; }
	.leaflet-control-layers-toggle{
	background-image: url("undo.png");
	color: 000;
	}
	.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url("undo-2x.png");
	}
	</style>
	</head>
	<body onload="init()">
	<div id="map"></div>
	</body>
	</html>