添加了一个文件示例

README.md

@@ -19,6 +19,7 @@
 3.  地图默认自动发布，如果修改了发布路径需要重启项目；
 4.  地图发布后可以在前端JS API中使用‘http://localhost:9000/img/{z}/{x}/{y}.png’来访问加载
 5.  此功能适用于大部分地图，默认是高德，如需修改下载地图可以选择config/download-map.properties中修改map.baseurl来选择；
+6.  page下有一个示例，项目启动后直接将该页面用浏览器打开即可
 
 #### 参与贡献
 

src/main/resources/static/customLib/markerTrack.js

+L.Marker.addInitHook(function () {
+    this.moveOptions = {
+        origin: null,
+        timer: null,
+        done: 0,
+        path: null,
+        length: 0
+    };
+    this.setSpeed = function (speed) {
+        this.moveOptions.speed = isNaN(parseFloat(speed)) || parseFloat(speed) <= 0 ? 200 : parseFloat(speed);
+    };
+    this.getSpeed = function () {
+        return this.moveOptions.speed;
+    };
+    this.moveAlong = function (path, speed) {
+        path = path instanceof L.Polyline ? path : new L.Polyline(path);
+        this.moveOptions.path = path;
+        this.moveOptions.length = L.GeometryUtil.length(path);
+        this.moveOptions.speed = isNaN(parseFloat(speed)) || parseFloat(speed <= 0) ? 200 : parseFloat(speed);
+        this._move();
+    };
+    this.pauseMove = function () {
+        clearInterval(this.moveOptions.timer);
+        this.moveOptions.timer = null;
+    };
+    this.resumeMove = function () {
+        this._move();
+    };
+    this.stopMove = function () {
+        this.pauseMove();
+        this.moveOptions.done = 0;
+    };
+    this._move = function () {
+        if (this.moveOptions.timer) return;
+        let _t = this;
+        this.moveOptions.timer = setInterval(function () {
+            let done = _t.moveOptions.done;
+            done += _t.moveOptions.speed / 1000 * 20;
+            let radio = done / _t.moveOptions.length;
+            radio >= 1 ? (radio = 0, done = 0) : true;
+            _t.moveOptions.done = done;
+            let p = L.GeometryUtil.interpolateOnLine(_t._map, _t.moveOptions.path, radio);
+            _t.setLatLng(p.latLng);
+            let pre_p = _t.moveOptions.path.getLatLngs()[p.predecessor];
+            if (pre_p) {
+                let passed = _t.moveOptions.path.getLatLngs().slice(0, p.predecessor + 1);
+                passed.push(p.latLng);
+                _t.fire('update_position', {path: passed});
+                let deg = L.GeometryUtil.computeAngle(_t._map.project(pre_p), _t._map.project(p.latLng))
+                _t._icon.style.transformOrigin = '50% 50%';
+                _t._icon.style.transform += ' rotateZ(' + deg + 'deg)';
+            }
+        }, 20);
+    }
+});
\ No newline at end of file

src/main/resources/static/index.html

@@ -55,21 +55,15 @@
     </div>
     <h4>下载级别(下载瓦片的级别)</h4>
     <div class="input-item">
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='1'>1 &nbsp;&nbsp;
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='2'>2&nbsp;&nbsp;
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='3'>3&nbsp;&nbsp;
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='4'>4&nbsp;&nbsp;
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='5'>5&nbsp;&nbsp;
-        <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='6'>6&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='7'>7&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='8'>8&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='9'>9&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='10'>10&nbsp;&nbsp;
-    </div>
-    <div class="input-item">
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='11'>11&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='12'>12&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='13'>13&nbsp;&nbsp;
+    </div>
+    <div class="input-item">
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='14'>14&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='15'>15&nbsp;&nbsp;
         <input type="checkbox" name='mapLevel' onclick="updateLevel(this)" value='16'>16&nbsp;&nbsp;

src/main/resources/static/leaflet/.github/ISSUE_TEMPLATE/bug_report.md

+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+<!--
+Thanks for taking the time to open an issue!
+Please provide a general summary of the issue in the title above .
+-->
+
+- [ ] I've looked at the [documentation](http://leafletjs.com/reference.html) to make sure the behavior is documented and expected
+- [ ] I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
+- [ ] I've searched through the issues to make sure it's not yet reported
+
+**Steps to reproduce**
+Steps to reproduce the behavior:
+- step 1
+- step 2
+- ...
+
+**Expected behavior**
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Current behavior**
+<!-- A clear and concise description of what is actually happening. -->
+
+**Environment**
+- Leaflet version:
+- Browser (with version):
+- OS/Platform (with version):
+
+**Additional context**
+<!-- Add any other context about the problem here. -->
+
+**Minimal example reproducing the issue**
+
+Please create an example using https://leafletjs.com/edit.html or any other jsfiddle-like site.
+
+- [ ] this example is as simple as possible
+- [ ] this example does not rely on any third party code

src/main/resources/static/leaflet/.github/ISSUE_TEMPLATE/feature_request.md

+---
+name: Feature request
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

src/main/resources/static/leaflet/.github/ISSUE_TEMPLATE/support.md

+---
+name: Support
+about: I need support with Leaflet
+
+---
+
+--------------^ Click "Preview" tab for a nicer view!
+
+We use GitHub as an issue tracker.
+For usage and support questions, please check out resources below:
+
+1. Read Leaflet documentation: https://leafletjs.com
+2. For support questions like "How can I do X with Leaflet?" please search or ask questions on StackOverflow or StackExchange using Leaflet tag:
+  - https://stackoverflow.com/questions/tagged/leaflet
+  - https://gis.stackexchange.com/questions/tagged/leaflet
+
+Thanks!

src/main/resources/static/leaflet/.gitignore

+node_modules
+.DS_Store
+tmp/**/*
+.idea
+.idea/**/*
+*.iml
+_site
+*.sublime-*
+_site
+dist/*.js
+dist/*.map
+dist/reference.html
+coverage/
+*.js.html
+.mailmap
+bower.json
+component.json
+debug/local/
+Gemfile.lock
+package-lock.json
+yarn.lock
+*.log

src/main/resources/static/leaflet/debug/css/mobile.css

+html, body, #map {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+}
\ No newline at end of file

src/main/resources/static/leaflet/debug/css/screen.css

+#map {
+	width: 800px; 
+	height: 600px; 
+	border: 1px solid #ccc;
+	}
\ No newline at end of file

src/main/resources/static/leaflet/debug/hacks/jitter.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width,initial-scale=1 maximum-scale=1.0 user-scalable=0">
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+	<div >
+		<form method="get">Click in field then scroll map (in up/left direction) to see shift of map tiles.
+			<fieldset><label for="textField">Name</label>:
+				<input id="textField" name="textField" type="text" value="">
+			</fieldset>
+		</form>
+		Bug tested to occur on: Safari on Mac (Tested in 5.1.7), iPad/iPhone 5.1.1., Android 4 Browser. Hack is in L.Browser.chrome and TileLayer._addTile
+
+</div>
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+		osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		//Disable the hack fix
+		L.Browser.chrome = true;
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/leaflet-include.js

+../dist/leaflet-src.js
\ No newline at end of file

src/main/resources/static/leaflet/debug/map/canvas.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+
+		var tiles = new L.GridLayer();
+
+		tiles.createTile = function(coords) {
+			var tile = document.createElement('canvas'),
+			    ctx = tile.getContext('2d');
+
+			tile.width = tile.height = 256;
+
+			ctx.fillStyle = 'white';
+			ctx.fillRect(0, 0, 255, 255);
+
+			ctx.fillStyle = 'black';
+			ctx.fillText('x: ' + coords.x + ', y: ' + coords.y + ', zoom: ' + coords.z, 20, 20);
+
+			ctx.strokeStyle = 'red';
+			ctx.beginPath();
+			ctx.moveTo(0, 0);
+			ctx.lineTo(255, 0);
+			ctx.lineTo(255, 255);
+			ctx.lineTo(0, 255);
+			ctx.closePath();
+			ctx.stroke();
+
+			return tile;
+		}
+
+		var map = new L.Map('map', {center: new L.LatLng(50.5, 30.51), zoom: 15, layers: [tiles]});
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/control-layers.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+
+	<script>
+		var geojson = {
+			"type": "Polygon",
+			"coordinates": [[
+				[5.4931640625, 51.781435604431195],
+				[0.9008789062499999, 53.35710874569601],
+				[-2.30712890625, 51.795027225829145],
+				[2.8125, 49.109837790524416],
+				[5.4931640625, 51.781435604431195]
+			]]
+		};
+
+		var map = L.map('map').setView([50.5, 0], 5);
+
+		var OSM_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			maxZoom: 19,
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+		}).addTo(map);
+		var OSM_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
+			maxZoom: 18,
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+		});
+
+		L.control.layers({
+			'OSM': OSM_Mapnik,
+			'OSM BW': OSM_BlackAndWhite
+		}, {
+			'Circle': L.circle([53, 4], 111111).addTo(map),
+			'Polygon': L.polygon([[48, -3], [50, -4], [52, 4]]),
+			'GeoJSON': L.geoJson(geojson),
+		}, {
+			collapsed: false
+		}).addTo(map);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/controls.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			osm2 = new L.TileLayer(osmUrl, {attribution: 'Hello world'});
+
+		var map = new L.Map('map').addLayer(osm).setView(new L.LatLng(50.5, 30.512), 15);
+
+		var marker = new L.Marker(new L.LatLng(50.5, 30.505));
+		map.addLayer(marker);
+		marker.bindPopup("Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones.").openPopup();
+
+		var marker2 = new L.Marker(new L.LatLng(50.502, 30.515));
+		map.addLayer(marker2);
+
+		var layersControl = new L.Control.Layers({
+			'OSM': osm,
+			'OSM2': osm2
+		}, {
+			'Some marker': marker,
+			'Another marker': marker2
+		});
+
+		map.addControl(layersControl);
+		map.addControl(new L.Control.Scale());
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/geolocation.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet geolocation debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <script>
+
+        var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+        var map = new L.Map('map', {zoom: 15, layers: [osm]});
+
+        function logEvent(e) { console.log(e.type); }
+        map.on('locationerror', logEvent);
+        map.on('locationfound', logEvent);
+
+        map.locate({setView: true});
+
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/grid.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var grid = L.gridLayer({
+			attribution: 'Grid Layer'
+		});
+
+		grid.createTile = function (coords, done) {
+			var tile = document.createElement('div');
+			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
+			tile.style.outline = '1px solid red';
+			tile.style.background = 'white';
+
+			// test async
+			setTimeout(function () {
+				done(null, tile);
+			}, 500 + Math.random() * 500);
+
+			return tile;
+		};
+
+		grid.on('loading', function() { console.log('loading'); });
+		grid.on('load', function() { console.log('load'); });
+		grid.on('tileunload', function(tile) { console.log('tileunload ' + tile.coords.x + ',' + tile.coords.y + ',' + tile.coords.z); });
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 10)
+				.addLayer(grid);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/iframe.html

+<style>
+	iframe {
+		position: absolute;
+		top: 50px;
+		left: 50px;
+		width: 500px;
+		height: 500px;
+	}
+</style>
+<iframe src="map.html">
+</iframe>
\ No newline at end of file

src/main/resources/static/leaflet/debug/map/image-overlay.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+	<button id="populate">Populate with 10 markers</button>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+			latlng = new L.LatLng(50.5, 30.51);
+
+		var map = new L.Map('map');
+		map.addLayer(osm);
+
+		var	bounds = new L.LatLngBounds(
+			new L.LatLng(40.71222,-74.22655),
+			new L.LatLng(40.77394,-74.12544));
+
+		map.fitBounds(bounds);
+
+		var overlay = new L.ImageOverlay("https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", bounds, {
+			opacity: 0.5,
+			interactive: true,
+			attribution: '&copy; A.B.B Corp.'
+		});
+		map.addLayer(overlay);
+
+		overlay.on('dblclick',function (e) {
+			console.log('Double click on image.');
+		});
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/layer_remove_add.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+    <button id="removeAdd">Remove and Add Layer</button>
+
+    <script>
+        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
+
+        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    		}).addTo(map);
+
+        L.DomUtil.get('removeAdd').onclick = function() {
+            map.removeLayer(osm);
+
+            setTimeout(function() {
+                map.addLayer(osm);
+            }, 1000);
+
+
+        };
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/map-mobile.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			latlng = new L.LatLng(50.5, 30.51);
+
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
+
+		var marker = new L.Marker(latlng);
+		map.addLayer(marker);
+
+		marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/map-popup.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([51.505, -0.09], 13)
+				.addLayer(osm);
+
+		L.marker([51.5, -0.09]).addTo(map)
+			.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
+
+		L.circle([51.508, -0.11], 500, {
+			color: 'red',
+			fillColor: '#f03',
+			fillOpacity: 0.5
+		}).addTo(map).bindPopup("I am a circle.");
+
+		L.polygon([
+			[51.509, -0.08],
+			[51.503, -0.06],
+			[51.51, -0.047]
+		]).addTo(map).bindPopup("I am a polygon.");
+
+		var popup = L.popup();
+
+		function onMapClick(e) {
+			popup
+				.setLatLng(e.latlng)
+				.setContent("You clicked the map at " + e.latlng.toString())
+				.openOn(map);
+		}
+
+		map.on('click', onMapClick);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/map-scaled.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<style>
+		html, body {
+			margin: 0;
+			padding: 0;
+		}
+		#wrapper {
+			transform: scale(.5, .25); /* scaleX0 = .5 ; scaleY0 = .25 */
+			transform-origin: 0 0;
+			padding: 40px 100px; /* displayed padding-top = scaleY0 * 40px = 10px ; displayed padding-left = scaleX0 * 100px = 50px */
+		}
+		#map {
+			width: 400px;
+			height: 300px;
+			transform: scale(3, 8); /* scaleX = .5 * 3 = 1.5 ; scaleY = .25 * 8 = 2 */
+			transform-origin: 0 0;
+			border-width: 30px 70px; /* displayed border-top-width = scaleY * 30px = 60px ; displayed border-left-width = scaleX * 70px = 105px */
+		}
+	</style>
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="wrapper">
+		<div id="map"></div>
+	</div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+		var mapContainer = map.getContainer();
+
+		var marker = L.marker([50.5, 30.51], {
+			draggable: true
+		}).addTo(map);
+
+		map.on('drag', function (event) {
+			console.log('map:');
+			console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
+		});
+		marker.on('drag', function (event) {
+			console.log('marker:');
+			console.log(L.DomEvent.getMousePosition(event.originalEvent, mapContainer));
+		});
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/map.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+	<button id="populate">Populate with 10 markers</button>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+		var markers = new L.FeatureGroup();
+
+		function getRandomLatLng(llbounds) {
+			var s = llbounds.getSouth(),
+			    n = llbounds.getNorth(),
+			    w = llbounds.getWest(),
+			    e = llbounds.getEast();
+
+			return L.latLng(
+				s + (Math.random() * (n - s)),
+				w + (Math.random() * (e - w))
+			)
+		}
+
+		function populate() {
+			for (var i = 0; i < 10; i++) {
+				L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
+			}
+			return false;
+		}
+
+		markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
+
+		populate();
+		L.DomUtil.get('populate').onclick = populate;
+
+		function logEvent(e) { console.log(e.type); }
+
+		// map.on('click', logEvent);
+		// map.on('contextmenu', logEvent);
+
+		// map.on('movestart', logEvent);
+		// map.on('move', logEvent);
+		// map.on('moveend', logEvent);
+
+		// map.on('zoomstart', logEvent);
+		// map.on('zoomend', logEvent);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/marker-autopan.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <script>
+        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
+
+        var markerAutoPan = new L.Marker([0, -10], {
+            draggable: true,
+            autoPan: true,
+            title: 'AutoPan'
+        });
+
+        map.addLayer(markerAutoPan);
+        markerAutoPan.bindPopup("AutoPan");
+
+
+        var markerDraggable = new L.Marker([0, 10], {
+            title: 'Draggable'
+        });
+
+        map.addLayer(markerDraggable);
+        markerDraggable.bindPopup("Draggable");
+        markerDraggable.dragging.enable();
+
+        var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
+        map.addLayer(poly);
+        poly.bindPopup("Polygon");
+
+
+        markerDraggable.on('click', function(e) {
+            console.log('markerDraggable click');
+        });
+        markerAutoPan.on('click', function(e) {
+            console.log('markerAutoPan click');
+        })
+        map.on('click', function(e) {
+            console.log('map click');
+        });
+
+        poly.on('click', function(e) {
+            console.log('poly click');
+        });
+
+        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    		}).addTo(map);
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/markers.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <script>
+        map = L.map('map', { center: [0, 0], zoom: 3, maxZoom: 4 });
+
+        var markerStatic = new L.Marker([0, -10], {
+            draggable: false,
+            title: 'Static'
+        });
+
+        map.addLayer(markerStatic);
+        markerStatic.bindPopup("Static");
+
+
+        var markerDraggable = new L.Marker([0, 10], {
+            title: 'Draggable'
+        });
+
+        map.addLayer(markerDraggable);
+        markerDraggable.bindPopup("Draggable");
+        markerDraggable.dragging.enable();
+
+        var poly = new L.Polygon([[0, 10], [0, 15.5], [0, 50], [20, 20.5]]);
+        map.addLayer(poly);
+        poly.bindPopup("Polygon");
+
+
+        markerDraggable.on('click', function(e) {
+            console.log('markerDraggable click');
+        });
+        markerStatic.on('click', function(e) {
+            console.log('markerStatic click');
+        })
+        map.on('click', function(e) {
+            console.log('map click');
+        });
+
+        poly.on('click', function(e) {
+            console.log('poly click');
+        });
+
+        var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    		}).addTo(map);
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/max-bounds-bouncy.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<h1>Left: Bouncy maxBounds. Right: Not bouncy.</h1>
+
+	<div id="map1" style="float: left; width:45%; height: 80%;"></div>
+	<div id="map2" style="float: left; width:45%; height: 80%;"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
+
+		var map1 = new L.Map('map1', {
+			center: bounds.getCenter(),
+			zoom: 5,
+			layers: [osm1],
+			maxBounds: bounds,
+			maxBoundsViscosity: 0.75
+		});
+
+		var map2 = new L.Map('map2', {
+			center: bounds.getCenter(),
+			zoom: 5,
+			layers: [osm2],
+			maxBounds: bounds,
+			maxBoundsViscosity: 1.0
+		});
+
+		var latlngs = L.rectangle(bounds).getLatLngs();
+		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map1);
+		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map2);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/max-bounds-infinite.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			bounds = new L.LatLngBounds(new L.LatLng(49.5, Number.NEGATIVE_INFINITY), new L.LatLng(61.2, Number.POSITIVE_INFINITY));
+
+		var map = new L.Map('map', {
+			center: L.latLng(49.5, 30),
+			zoom: 7,
+			layers: [osm],
+			maxBounds: bounds
+		});
+
+		map.setMaxBounds(bounds);	// Should not enter infinite recursion
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/max-bounds.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			bounds = new L.LatLngBounds(new L.LatLng(49.5, -11.3), new L.LatLng(61.2, 2.5));
+
+		var map = new L.Map('map', {
+			center: bounds.getCenter(),
+			zoom: 7,
+			layers: [osm],
+			maxBounds: bounds
+		});
+
+
+
+		var latlngs = L.rectangle(bounds).getLatLngs();
+		L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(map);
+
+		map.setMaxBounds(bounds);	// Should not enter infinite recursion
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/opacity.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+		.mapcontainer {
+			float:left;
+			position: relative;
+			width: 32%;
+			font-size: 12px;
+			font-family: sans-serif;
+			height: 340px;
+			margin-bottom: 15px;
+			background-color: #eee;
+			margin-right: 1%;
+		}
+
+		.map {
+			position: absolute;
+			width: 100%;
+			height: 280px;
+			bottom: 0px;
+		}
+	</style>
+</head>
+<body>
+	<p>These should all render identically.</p>
+	<div class="mapcontainer">
+		CASE 1: no opacity set on any layers
+		<br />
+		<div id="map1" class="map"></div>
+	</div>
+	<div class="mapcontainer">
+		CASE 2: opacity set to .99 on overlays but not on basemap
+		<br />
+		<div id="map2" class="map"></div>
+	</div>
+	<div class="mapcontainer">
+		CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
+		<br />
+		<div id="map3" class="map"></div>
+	</div>
+	<div class="mapcontainer">
+		CASE 4: opacity set to .99 on overlays but set to 1 on basemap
+		<br />
+		<div id="map4" class="map"></div>
+	</div>
+	<div class="mapcontainer">
+		CASE 5: opacity set to .99 on all layers
+		<br />
+		<div id="map5" class="map"></div>
+	</div>
+	<div class="mapcontainer">
+		CASE 6: opacity set to .99 on 1st and 3rd layers and 1 on middle layer
+		<br />
+		<div id="map6" class="map"></div>
+	</div>
+
+	<script>
+		var mapopts =  {
+			center: [35, -122],
+			zoom : 5
+		};
+
+		var map1 = L.map('map1', mapopts);
+		var map2 = L.map('map2', mapopts);
+		var map3 = L.map('map3', mapopts);
+		var map4 = L.map('map4', mapopts);
+		var map5 = L.map('map5', mapopts);
+		var map6 = L.map('map6', mapopts);
+
+		/**********
+		CASE 1: no opacity set on any layers
+		**********/
+		// OSM Basemap
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+
+		var osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map1);
+
+		// EEZs / Nations
+		var eez1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true
+		}).addTo(map1);
+
+		// Marine Protected Areas overlay
+		var mpa1 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false
+		}).addTo(map1);
+
+
+		/**********
+		CASE 2: opacity set on overlays but not on basemap
+		**********/
+		// OSM Basemap
+		var osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: ''}).addTo(map2);
+
+		// EEZs / Nations
+		var eez2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true,
+			opacity: 0.99
+		}).addTo(map2);
+
+		// Marine Protected Areas overlay
+		var mpa2 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false,
+			opacity: 0.99
+		}).addTo(map2);
+
+
+		/**********
+		CASE 3: opacity set on overlays but not on basemap, zIndex option set to 0 on basemap
+		**********/
+		// OSM Basemap
+		var osm3 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', zIndex: 0}).addTo(map3);
+
+		// EEZs / Nations
+		var eez3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true,
+			opacity: 0.99
+		}).addTo(map3);
+
+		// Marine Protected Areas overlay
+		var mpa3 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false,
+			opacity: 0.99
+		}).addTo(map3);
+
+
+		/**********
+		CASE 4: opacity set on overlays but set to 1 on basemap
+		**********/
+		// OSM Basemap
+		var osm4 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}).addTo(map4);
+
+		// EEZs / Nations
+		var eez4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true,
+			opacity: 0.99
+		}).addTo(map4);
+
+		// Marine Protected Areas overlay
+		var mpa4 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false,
+			opacity: 0.99
+		}).addTo(map4);
+
+
+		/**********
+		CASE 5: opacity set to .5 on all layers
+		**********/
+		// OSM Basemap
+		var osm5 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map5);
+
+		// EEZs / Nations
+		var eez5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true,
+			opacity: 0.99
+		}).addTo(map5);
+
+		// Marine Protected Areas overlay
+		var mpa5 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false,
+			opacity: 0.99
+		}).addTo(map5);
+
+
+		/**********
+		CASE 6: opacity set to .5 on 1st and 3rd layers and 1 on middle layer
+		**********/
+		// OSM Basemap
+		var osm6 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: '', opacity: 0.99}).addTo(map6);
+
+		// EEZs / Nations
+		var eez6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+			tms: true,
+			opacity: 1
+		}).addTo(map6);
+
+		// Marine Protected Areas overlay
+		var mpa6 = L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+			tms: false,
+			opacity: 0.99
+		}).addTo(map6);
+
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/popup.html

+<!DOCTYPE html>
+<html>
+<head>
+  <title>Leaflet debug page</title>
+
+  <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="../css/screen.css" />
+
+  <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+  <div id="map"></div>
+
+  <script>
+
+    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+    var map = L.map('map')
+        .setView([50.5, 30.51], 15)
+        .addLayer(osm);
+
+    function getRandomLatLng(llbounds) {
+      var s = llbounds.getSouth(),
+          n = llbounds.getNorth(),
+          w = llbounds.getWest(),
+          e = llbounds.getEast();
+
+      return L.latLng(
+        s + (Math.random() * (n - s)),
+        w + (Math.random() * (e - w))
+      )
+    }
+
+    var features = new L.FeatureGroup([
+      L.marker(getRandomLatLng(map.getBounds())),
+      L.polyline([
+        getRandomLatLng(map.getBounds()),
+        getRandomLatLng(map.getBounds()),
+        getRandomLatLng(map.getBounds())
+      ]),
+      L.polygon([
+        getRandomLatLng(map.getBounds()),
+        getRandomLatLng(map.getBounds()),
+        getRandomLatLng(map.getBounds()),
+        getRandomLatLng(map.getBounds())
+      ])
+    ]);
+
+    features.bindPopup(function(layer){
+      return 'Leaflet ID is ' + features.getLayerId(layer);
+    }).addTo(map);
+
+    var content = L.DomUtil.create('p', 'custom-popup');
+    content.innerText = 'I\'m a red polygon';
+
+    var polygon = L.polygon([
+      getRandomLatLng(map.getBounds()),
+      getRandomLatLng(map.getBounds()),
+      getRandomLatLng(map.getBounds()),
+      getRandomLatLng(map.getBounds())
+    ], {
+      color: 'red'
+    }).bindPopup(content).addTo(map);
+
+    var polyline = L.polyline([
+      getRandomLatLng(map.getBounds()),
+      getRandomLatLng(map.getBounds()),
+      getRandomLatLng(map.getBounds())
+    ], {
+      color: 'red'
+    }).bindPopup('I\'m a red polyline').addTo(map);
+
+    var marker = L.circleMarker(getRandomLatLng(map.getBounds()), {
+      color: 'red',
+      radius: 25
+    }).bindPopup('I\'m a red circle').addTo(map);
+  </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/rollup.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../../dist/leaflet-src.js"></script>
+
+</head>
+<body>
+
+	<div id="map"></div>
+	<button id="populate-markers">Populate with markers</button>
+	<button id="populate-circles">Populate with circles</button>
+	<button id="populate-lines">Populate with lines</button>
+	<button id="populate-polygons">Populate with polygons</button>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+		var markers = new L.FeatureGroup();
+
+		function getRandomLatLng(llbounds) {
+			var s = llbounds.getSouth(),
+			    n = llbounds.getNorth(),
+			    w = llbounds.getWest(),
+			    e = llbounds.getEast();
+
+			return L.latLng(
+				s + (Math.random() * (n - s)),
+				w + (Math.random() * (e - w))
+			)
+		}
+
+		function populateMarker() {
+			for (var i = 0; i < 5; i++) {
+				L.marker(getRandomLatLng(map.getBounds())).addTo(markers);
+			}
+			return false;
+		}
+
+		function populateCircle() {
+			for (var i = 0; i < 5; i++) {
+				L.circleMarker(getRandomLatLng(map.getBounds())).addTo(markers);
+			}
+			return false;
+		}
+
+		function populateLine() {
+			var lineCoords = [];
+			for (var i = 0; i < 10; i++) {
+				lineCoords.push(getRandomLatLng(map.getBounds()));
+			}
+			L.polyline(lineCoords).addTo(map);
+			return false;
+		}
+
+		function populatePoly() {
+			var lineCoords = [];
+			for (var i = 0; i < 10; i++) {
+				lineCoords.push(getRandomLatLng(map.getBounds()));
+			}
+			L.polygon(lineCoords).addTo(map);
+			return false;
+		}
+
+		markers.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
+
+		L.DomUtil.get('populate-markers').onclick = populateMarker;
+		L.DomUtil.get('populate-circles').onclick = populateCircle;
+		L.DomUtil.get('populate-lines').onclick = populateLine;
+		L.DomUtil.get('populate-polygons').onclick = populatePoly;
+
+		function logEvent(e) { console.log(e.type); }
+
+		populateMarker();
+		populateCircle();
+		populateLine();
+		populatePoly();
+		// map.on('click', logEvent);
+		// map.on('contextmenu', logEvent);
+
+		// map.on('movestart', logEvent);
+		// map.on('move', logEvent);
+		// map.on('moveend', logEvent);
+
+		// map.on('zoomstart', logEvent);
+		// map.on('zoomend', logEvent);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/scroll.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div style="position: absolute; top: 100px; left: 100px; border: 1px solid green">
+		<div style="position: relative; margin-top: 500px; width: 800px; border: 1px solid red; margin-left: 200px">
+			<div style="height: 600px; overflow: auto">
+				<div id="map" style="width: 600px; height: 1000px; border: 1px solid #ccc"></div>
+			</div>
+		</div>
+	</div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			latlng = new L.LatLng(50.5, 30.51);
+
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
+
+		var s = '';
+		for (var i = 0; i < 100; i++) s += 'Test<br>';
+
+		var popup = L.popup({maxHeight: 100})
+			.setContent(s)
+			.setLatLng(latlng)
+			.openOn(map);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/simple-proj.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var map = L.map('map', {
+			crs: L.CRS.Simple
+		}).setView([0, 0], 0);
+
+		L.polygon([
+			[-200, -50],
+			[-40, 250],
+			[200, 100]
+		]).addTo(map);
+
+
+		L.marker([-200, -200]).addTo(map);
+		L.marker([200, -200]).addTo(map);
+		L.marker([200, 200]).addTo(map);
+		L.marker([-200, 200]).addTo(map);
+
+		L.marker([0, 0]).addTo(map);
+
+		L.imageOverlay('http://leafletjs.com/docs/images/logo.png', [[0, 0], [73, 220]]).addTo(map);
+
+		var grid = L.gridLayer({
+			attribution: 'Grid Layer'
+		});
+
+		grid.createTile = function (coords) {
+			var tile = document.createElement('div');
+			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
+			tile.style.outline = '1px solid red';
+			tile.style.background = 'white';
+			return tile;
+		};
+
+		map.addLayer(grid);
+
+		L.circle([0, 0], 100, {color: 'red'}).addTo(map);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/tile-debug.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet tile debug</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+    <style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+    #outer {
+        position: absolute;
+        width: calc(2*256px + 600px);
+        height: calc(2*256px + 400px);
+        border: 10px solid rgba(0, 0, 255, 0.4);
+        background-color: transparent;
+    }
+    #middle, #map {
+        position: absolute;
+        margin: calc(266px - 10px);
+        width: 600px;
+        height: 400px;
+        border: 10px solid transparent;
+    }
+    #middle {
+        pointer-events: none;
+        z-index: 1000;
+        border-color: rgba(0, 255, 0, 0.4);
+    }
+    #map {
+        overflow: visible;
+    }
+    button {
+        width: 40px;
+        text-align: center;
+        margin-right: 5px;
+    }
+    .grid {
+        border: red 1px solid;
+        line-height: 256px;
+        text-align: center;
+        box-sizing: border-box;
+    }
+    #stats {
+        position: absolute;
+        z-index: 1000;
+        width: 300px;
+        right: 0;
+        top: 10px;
+        bottom: 0;
+    }
+    #zoomtable td {
+        height: 40px;
+    }
+    .diag {
+        margin-bottom: 20px;
+    }
+    tr:nth-child(odd) {
+        background-color: #eee;
+    }
+    </style>
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+    <div id="outer"></div>
+    <div id="middle"></div>
+    <div id="map"></div>
+
+    <div id="stats">
+        <div class="diag">
+            <div><button id="dc">DC</button>(flyTo)</div>
+            <div><button id="sf">SF</button>(setView)</div>
+            <div><button id="trd">TRD</button>(flyTo)</div>
+            <div><button id="lnd">LND</button>(fract. zoom)</div>
+            <div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
+            <div><button id="mad">MAD</button>(fitBounds)</div>
+            <div><button id="nul">NUL</button>(image overlay)</div>
+            <div><button id="stop">stop</button></div>
+        </div>
+
+        <table id="zoomtable" class="diag">
+            <tr><td>on movestart</td><td id='movestart' width=230></td></tr>
+            <tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
+            <tr><td>on move</td><td id='move'></td></tr>
+            <tr><td>on moveend</td><td id='moveend'></td></tr>
+            <tr><td>on zoomend</td><td id='zoomend'></td></tr>
+            <tr><td>on grid load</td><td id='load'></td></tr>
+        </table>
+
+        <table>
+            <tr>
+                <th>event</th>
+                <th>Grid</th>
+                <th>Positron</th>
+            </tr>
+            <tr>
+                <td>tileloadstart</td>
+                <td id='grid-tileloadstart'></td>
+                <td id='positron-tileloadstart'></td>
+            </tr>
+            <tr>
+                <td>tileload</td>
+                <td id='grid-tileload'></td>
+                <td id='positron-tileload'></td>
+            </tr>
+            <tr>
+                <td>tileerror</td>
+                <td id='grid-tileerror'></td>
+                <td id='positron-tileerror'></td>
+            </tr>
+            <tr>
+                <td>tileunload</td>
+                <td id='grid-tileunload'></td>
+                <td id='positron-tileunload'></td>
+            </tr>
+            <tr>
+                <td>visible</td>
+                <td id='grid-visible'></td>
+                <td id='positron-visible'></td>
+            </tr>
+            <tr>
+                <td>grid load</td>
+                <td id='grid-load'></td>
+                <td id='positron-load'></td>
+            </tr>
+        </table>
+        <button id="reset">reset</button>
+    </div>
+
+    <script>
+
+        var kyiv = [50.5, 30.5],
+            lnd = [51.51, -0.12],
+            sf = [37.77, -122.42],
+            dc = [38.91, -77.04],
+            trd = [63.41, 10.41],
+            madBounds = [[40.70, -4.19], [40.12, -3.31]],
+            mad = [40.40, -3.7];
+
+        var map = L.map('map', {
+            // zoomSnap: 0,
+            // zoomAnimation: false,
+            fadeAnimation: false
+        }).setView(dc, 16);
+
+        var gridCounts = {},
+            positronCounts = {},
+            gridLoadData = {};
+
+        resetCounter();
+
+        var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+        });
+
+        var grid = L.gridLayer({
+            attribution: 'Grid Layer',
+            tileSize: L.point(256, 256)
+        });
+
+        grid.createTile = function (coords) {
+            var tile = L.DomUtil.create('div', 'grid');
+            var indexStr = [coords.x, coords.y, coords.z].join(', ');
+            if (!(indexStr in gridLoadData)) {
+                gridLoadData[indexStr] = 0;
+            }
+            tile.innerHTML = ++gridLoadData[indexStr];
+
+            // double tile loading alert
+            // if (gridLoadData[indexStr] > 1) {
+                // alert(indexStr);
+            // }
+
+            // more tile loadings -> more red grid tile
+            tile.style.backgroundColor = 'rgba(255,0,0,' + (gridLoadData[indexStr] - 1) / 5 + ')';
+            return tile;
+        };
+
+        grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
+            document.getElementById('grid-' + ev.type).innerHTML = ++gridCounts[ev.type];
+            document.getElementById('grid-visible').innerHTML = grid._container.querySelectorAll('.leaflet-tile').length;
+        });
+
+        positron.on('tileload tileunload tileerror tileloadstart load', function(ev){
+            document.getElementById('positron-' + ev.type).innerHTML = ++positronCounts[ev.type];
+            document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
+        });
+
+        map.addLayer(positron);
+        map.addLayer(grid);
+
+        var marker1 = L.marker(kyiv).addTo(map),
+            marker2 = L.marker(lnd).addTo(map),
+            marker3 = L.marker(dc).addTo(map),
+            marker4 = L.marker(sf).addTo(map),
+            marker5 = L.marker(trd).addTo(map),
+            marker6 = L.marker(mad).addTo(map);
+
+        var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
+
+        document.getElementById('dc').onclick   = function () { map.flyTo(dc,  7, {duration: 40}); };
+        document.getElementById('sf').onclick   = function () { map.setView(sf, 10, {duration: 40, animate: true}); };
+        document.getElementById('trd').onclick  = function () { map.flyTo(trd, 10, {duration: 40}); };
+        document.getElementById('lnd').onclick  = function () { map.flyTo(lnd, 9.25, {duration: 40}); };
+        document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25, {duration: 40}); };
+        document.getElementById('mad').onclick  = function () { map.fitBounds(madBounds); };
+        document.getElementById('nul').onclick  = function () { map.flyTo([0, 0], 10, {duration: 40}); };
+        document.getElementById('stop').onclick = function () { map.stop(); };
+
+        document.getElementById('reset').onclick = function () {
+            resetCounter();
+        }
+
+        function attachMoveEvent(name) {
+            map.on(name, function(){
+                document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
+            });
+        }
+
+        attachMoveEvent('movestart');
+        attachMoveEvent('zoomstart');
+        attachMoveEvent('move');
+        attachMoveEvent('moveend');
+        attachMoveEvent('zoomend');
+
+        positron.on('load', function(){
+            document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
+        });
+
+        function resetCounter() {
+            var fields = ['tileload', 'tileerror', 'tileloadstart', 'tileunload', 'load', 'visible'];
+
+            for (var i = 0; i < fields.length; i++) {
+                gridCounts[fields[i]] = 0;
+                positronCounts[fields[i]] = 0;
+                document.getElementById('positron-' + fields[i]).innerHTML = 0;
+                document.getElementById('grid-' + fields[i]).innerHTML = 0;
+            }
+        };
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/tile-opacity.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+		var map = new L.Map('map');
+		var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
+			layers: 'nexrad-n0r-900913',
+			format: 'image/png',
+			transparent: true,
+			attribution: "Weather data &copy; 2011 IEM Nexrad",
+			opacity: 0.4
+		});
+
+		var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
+
+		map.addLayer(nexrad).fitBounds(bounds);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/tooltip.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style type="text/css">
+		.my-div-icon {
+			background-color: goldenrod;
+			text-align: center;
+		}
+		#map {
+			width: 100%;
+		}
+
+	</style>
+</head>
+<body>
+
+	<div id="map"></div>
+
+
+	<script>
+		var center = [41.2058, 9.4307];
+
+		var map = L.map('map').setView(center, 13);
+
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+
+		L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]]).addTo(map).bindTooltip('Default centered polygon tooltip');
+		L.polygon([[41.20, 9.41], [41.20, 9.39], [41.21, 9.40]]).addTo(map).bindTooltip('Polygon tooltip following mouse', {sticky: true});
+		L.polygon([[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]).addTo(map).bindTooltip('Permanent polygon tooltip', {permanent: true});
+		L.marker([41.20, 9.4307]).addTo(map).bindTooltip('tooltip on the left', {direction: 'left'});
+		L.marker([41.206, 9.44]).addTo(map).bindTooltip('click me, I have a popup', {permanent: true, interactive: true}).bindPopup('See?');
+		L.circleMarker([41.206, 9.48], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello Left World', {direction: 'left'});
+		L.circleMarker([41.20, 9.50], {color: 'Chocolate', radius: 12}).addTo(map).bindTooltip('Hello top World', {direction: 'top', permanent: true});
+		L.circleMarker([41.20, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Seems I am centered', {direction: 'center', permanent: true, interactive: true}).bindPopup('Yeah');
+		L.circleMarker([41.195, 9.47], {color: 'Tomato', radius: 10}).addTo(map).bindTooltip('Me too', {direction: 'center'}).bindPopup('Yeah');
+		var icon = L.divIcon({
+			className: 'my-div-icon',
+			html: '<p>A div icon</p>',
+			iconSize: [50, 50]
+		});
+		L.marker([41.22, 9.48], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip following mouse', {sticky: true, direction: 'auto'});
+		L.marker([41.23, 9.47], {icon: icon}).addTo(map).bindTooltip('A div icon tooltip with custom offset', {direction: 'top', offset: [-25, -25]});
+		L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindTooltip('Draggable marker tooltip', {permanent: true, direction: 'auto'});
+		L.marker([41.19, 9.43]).addTo(map).bindTooltip('Clickable marker tooltip', {permanent: true, interactive: true}).on('click', function () { alert('clicked!'); });
+
+		var marker1 = L.marker([41.18, 9.45], {description: 'Marker 1'});
+		var marker2 = L.marker([41.18, 9.46], {description: 'Marker 2'});
+		var group = new L.FeatureGroup([marker1, marker2]).addTo(map);
+		group.bindTooltip(function (layer) {
+			return 'Group tooltip: ' + layer.options.description;
+		}, {opacity: 0.7});
+		L.marker([41.18, 9.35]).addTo(map).bindTooltip('Top tooltip is top', {permanent: true, direction: 'top'});
+		L.marker([41.173, 9.37]).addTo(map).bindTooltip('Bottom tooltip is weird but ok', {permanent: true, direction: 'bottom'});
+		L.polyline([[41.20, 9.36], [41.205, 9.35], [41.19, 9.34]]).bindTooltip('Polyline tooltip', {permanent: true, direction: 'top'}).addTo(map);
+		L.polygon([[41.21, 9.36], [41.24, 9.35], [41.23, 9.34]]).addTo(map).bindTooltip('Top tooltip following mouse', {sticky: true, direction: 'top'});
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/videooverlay.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	<meta charset="utf-8" />
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style='width:750px; height: 450px;'></div>
+	<button id="populate">Populate with 10 markers</button>
+
+	<script type="text/javascript">
+
+		var map = L.map('map');
+
+		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+			maxZoom: 18,
+			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+			id: 'mapbox.satellite'
+		}).addTo(map);
+
+		var videoUrls = [
+			'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+			'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
+		],
+		bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
+
+		map.fitBounds(bounds);
+
+		var overlay = L.videoOverlay(videoUrls, bounds, {
+			opacity: 0.8,
+			interactive: true,
+			autoplay: false
+		});
+		map.addLayer(overlay);
+
+		overlay.on('dblclick',function (e) {
+			console.log('Double click on image.');
+		});
+
+		overlay.on('load', function () {
+			var MyPauseControl = L.Control.extend({
+				onAdd: function() {
+					var button = L.DomUtil.create('button');
+					button.innerHTML = '⏸';
+					L.DomEvent.on(button, 'click', function () {
+						overlay.getElement().pause();
+					});
+					return button;
+				}
+			});
+			var MyPlayControl = L.Control.extend({
+				onAdd: function() {
+					var button = L.DomUtil.create('button');
+					button.innerHTML = '⏵';
+					L.DomEvent.on(button, 'click', function () {
+						overlay.getElement().play();
+					});
+					return button;
+				}
+			});
+
+			var pauseControl = (new MyPauseControl()).addTo(map);
+			var playControl = (new MyPlayControl()).addTo(map);
+		});
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/wms-marble.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 1024px; height: 440px; border: 1px solid #ccc"></div>
+
+	<script>
+		var map = new L.Map('map', {crs: L.CRS.EPSG4326});
+
+		var bluemarble = new L.TileLayer.WMS("http://maps.opengeo.org/geowebcache/service/wms", {
+			layers: 'bluemarble',
+			attribution: "Data &copy; NASA Blue Marble, image service by OpenGeo",
+			minZoom: 0,
+			maxZoom: 5
+		});
+
+		map.addLayer(bluemarble).fitWorld();
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/wms.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+		var map = new L.Map('map');
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {attribution: osmAttrib}),
+			osm2 = L.tileLayer(osmUrl, {attribution: osmAttrib});
+
+		var nexrad = new L.TileLayer.WMS("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
+			layers: 'nexrad-n0r-900913',
+			format: 'image/png',
+			transparent: true,
+			attribution: "Weather data &copy; 2011 IEM Nexrad",
+			opacity: 0.4
+		});
+
+		var bounds = new L.LatLngBounds(new L.LatLng(32, -126), new L.LatLng(50, -64));
+
+		map.addLayer(osm).addLayer(nexrad).fitBounds(bounds);
+
+		L.control.layers({"CM": osm, "CM2": osm2}, {"NexRad": nexrad}).addTo(map);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/zoom-delta.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="initial-scale=1.0" />
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+	.container {
+		float:left; width: 600px; height: 600px;
+		position: relative;
+		border: 1px solid gray;
+	}
+	#map1, #map2 {
+		position:absolute;
+		top:2em;
+		bottom:2em;
+		left:0;
+		right:0;
+	}
+	#zoom1, #zoom2 {
+		position:absolute;
+		bottom:0;
+		left:0;
+		right:0;
+	}
+	</style>
+</head>
+<body>
+
+	<h1>Zoom delta test.</h1>
+
+	<p>Zooming with touch zoom, box zoom or flyTo then <code>map.stop()</code> must make the zoom level snap to the value of the <code>zoomSnap</code> option. Zoom interactions (keyboard, mouse wheel, zoom control buttons must change the zoom by the amount in the <code>zoomDelta</code> option.</p>
+
+	<div>
+		<button id="sf">SF</button>
+		<button id="trd">TRD</button>
+		<button id="stop">stop</button>
+	</div>
+
+	<div class='container'>
+		Snap: 0.25. Delta: 0.5.
+		<div id="map1"></div>
+		<span id="zoom1"></span>
+	</div>
+	<div class='container'>
+		Snap: 0 (off). Delta: 0.25.
+		<div id="map2"></div>
+		<span id="zoom2"></span>
+	</div>
+
+	<script>
+
+		var sf = [37.77, -122.42],
+			trd = [63.41, 10.41];
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm1 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			osm2 = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			center = L.latLng(63.41, 10.41);
+
+		var map1 = new L.Map('map1', {
+			center: center,
+			layers: [osm1],
+			zoom: 5,
+			zoomSnap: 0.25,
+			zoomDelta: 0.5,
+			wheelPxPerZoomLevel: 50
+		});
+
+		var map2 = new L.Map('map2', {
+			center: center,
+			layers: [osm2],
+			zoom: 5,
+			zoomSnap: 0,
+			zoomDelta: 0.25,
+			wheelPxPerZoomLevel: 50
+		});
+
+		map1.on('zoomend',function(){
+			document.getElementById('zoom1').innerHTML = "Zoom level: " + map1.getZoom();
+		});
+		map2.on('zoomend',function(){
+			document.getElementById('zoom2').innerHTML = "Zoom level: " + map2.getZoom();
+		});
+
+		document.getElementById('sf').onclick   = function () {
+			map1.flyTo(sf, 10, {duration: 20});
+			map2.flyTo(sf, 10, {duration: 20});
+		};
+		document.getElementById('trd').onclick  = function () {
+			map1.flyTo(trd, 10, {duration: 20});
+			map2.flyTo(trd, 10, {duration: 20});
+		};
+		document.getElementById('stop').onclick = function () {
+			map1.stop();
+			map2.stop();
+		};
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/zoom-remain-centered.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+
+	<div id="map"></div>
+
+	<script>
+		// Check the 'center' setting of the scroll-wheel, double-click and touch-zoom
+		// handlers
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {minZoom: 14, attribution: osmAttrib}),
+			latlng = new L.LatLng(51.1788409,-1.82618);
+
+		var map = new L.Map('map', {
+			center: latlng,
+			zoom: 15,
+			layers: [osm],
+			scrollWheelZoom: 'center', // zoom to center regardless where mouse is
+			doubleClickZoom: 'center',
+			touchZoom:       'center'
+		});
+
+		L.marker(latlng).addTo(map);
+
+		L.control.scale().addTo(map);
+
+
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/zoomlevels.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+	    // Test that changing between layers with differing zoomlevels also updates
+        // the zoomlevels in the map + also
+
+		var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
+
+		var osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: osmAttrib, minZoom: 0, maxZoom: 10}).addTo(map),
+			osm2 = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
+
+		L.control.layers({
+			'OSM (5-18)': osm2,
+			'OSM (0-10)': osm
+		}).addTo(map);
+
+		L.control.scale().addTo(map);
+
+		function getRandomLatLng(llbounds) {
+			var s = llbounds.getSouth(),
+			    n = llbounds.getNorth(),
+			    w = llbounds.getWest(),
+			    e = llbounds.getEast();
+
+			return L.latLng(
+				s + (Math.random() * (n - s)),
+				w + (Math.random() * (e - w))
+			)
+		}
+
+		for (var i = 0; i < 1000; i++) {
+			L.marker(getRandomLatLng(map.getBounds())).addTo(map);
+		}
+
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/map/zoompan.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<style>
+	#map {
+		width: 600px;
+		height: 400px;
+	}
+	button {
+		min-width: 3em;
+		text-align: center;
+	}
+	</style>
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<div style="position: absolute; left: 620px; top: 10px; z-index: 500">
+		<div><button id="dc">DC</button>(flyTo)</div>
+		<div><button id="sf">SF</button>(setView, 5 sec)</div>
+		<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
+		<div><button id="lnd">LND</button>(fract. zoom)</div>
+		<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
+		<div><button id="mad">MAD</button>(fitBounds)</div>
+		<div><button id="nul">NUL</button>(image overlay)</div>
+		<div><button id="stop">stop</button></div>
+		<table>
+		<tr><td>on movestart</td><td id='movestart'></td></tr>
+		<tr><td>on zoomstart</td><td id='zoomstart'></td></tr>
+		<tr><td>on move</td><td id='move'></td></tr>
+		<tr><td>on moveend</td><td id='moveend'></td></tr>
+		<tr><td>on zoomend</td><td id='zoomend'></td></tr>
+		<tr><td>on grid load</td><td id='load'></td></tr>
+	</div>
+
+	<script>
+
+		var kyiv = [50.5, 30.5],
+			lnd = [51.51, -0.12],
+			sf = [37.77, -122.42],
+			dc = [38.91, -77.04],
+			trd = [63.41, 10.41],
+			madBounds = [[40.70, -4.19], [40.12, -3.31]],
+			mad = [40.40, -3.7];
+
+		var map = L.map('map', {
+            zoomSnap: 0.25
+        }).setView(dc, 14);
+
+		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+		}).addTo(map);
+
+		var path = new L.Polyline([kyiv, trd, lnd, mad, dc, sf]).addTo(map);
+
+		var marker1 = L.marker(kyiv).addTo(map),
+			marker2 = L.marker(lnd).addTo(map),
+			marker3 = L.marker(dc).addTo(map),
+			marker4 = L.marker(sf).addTo(map),
+			marker5 = L.marker(trd).addTo(map),
+			marker6 = L.marker(mad).addTo(map);
+
+		var nullIslandKitten = L.imageOverlay('http://placekitten.com/300/400?image=6', [[-0.2,-0.15], [0.2, 0.15]]).addTo(map);
+
+		document.getElementById('dc').onclick   = function () { map.flyTo(dc,  4); };
+		document.getElementById('sf').onclick   = function () { map.setView(sf, 10, {duration: 5, animate: true}); };
+		document.getElementById('trd').onclick  = function () { map.flyTo(trd, 10, {duration: 20}); };
+		document.getElementById('lnd').onclick  = function () { map.flyTo(lnd, 9.25); };
+		document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
+		document.getElementById('nul').onclick  = function () { map.flyTo([0, 0], 10); };
+		document.getElementById('mad').onclick  = function () { map.fitBounds(madBounds); };
+		document.getElementById('stop').onclick = function () { map.stop(); };
+
+		function logEvent(e) { console.log(e.type); }
+
+		function attachMoveEvent(name) {
+			map.on(name, function(){
+				document.getElementById(name).innerHTML = map.getCenter() + ' z' + map.getZoom();
+			});
+		}
+
+		attachMoveEvent('movestart');
+		attachMoveEvent('zoomstart');
+		attachMoveEvent('move');
+		attachMoveEvent('moveend');
+		attachMoveEvent('zoomend');
+
+		positron.on('load', function(){
+			document.getElementById('load').innerHTML = map.getCenter() + ' z' + map.getZoom();
+		});
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/add_remove_layers.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+    <div id="map"></div>
+    <div id="buttons">
+        <button type="button" id="b1"> Add Layer</button>
+        <button type="button" id="b2"> Remove Layer</button>
+    </div>
+    <script>
+        var map;
+        var myLayerGroup = new L.LayerGroup();
+
+        // set up the map
+        map = new L.Map('map', {preferCanvas: true});
+
+        // create the tile layer with correct attribution
+        var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        var osmAttrib = 'Map data © OpenStreetMap contributors';
+        var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17, attribution: osmAttrib, detectRetina: true });
+        map.addLayer(osm);
+        map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
+        drawTestLine();
+
+        function drawTestLine() {
+            var lat = 51;
+            var long = 7;
+            for (var i = 0; i < 50; i++) {
+
+                var myCircle = new L.Circle(new L.LatLng(lat, long),3);
+                myCircle.on('click',
+                    function (e) {
+                        popup = new L.Popup();
+                        popup.setLatLng(this.getLatLng());
+
+                        var popuptxt = "Hello!";
+                        alert("I am the click function");
+                                popup.setContent(popuptxt);
+
+                                map.openPopup(popup);
+
+
+                    });
+                myLayerGroup.addLayer(myCircle);
+                    lat = lat + 0.0001;
+                    long = long + 0.0001;
+
+            }
+            map.addLayer(myLayerGroup);
+        };
+
+        L.DomEvent.on(L.DomUtil.get('b1'), 'click', function () {
+          map.addLayer(myLayerGroup);
+        });
+        L.DomEvent.on(L.DomUtil.get('b2'), 'click', function () {
+          map.removeLayer(myLayerGroup);
+        });
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/bringtoback.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+	<button id="foo">Click to add layer, then zoom out or in</button>
+
+	<script>
+
+	var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });
+
+	var demoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer/tile/{z}/{y}/{x}';
+	var demoMap = new L.TileLayer(demoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
+
+	map.addLayer(demoMap);
+
+	document.getElementById('foo').addEventListener('click', function() {
+		var topoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}';
+	var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
+	map.addLayer(topoMap);
+	topoMap.bringToBack();
+	});
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/canvasloop.html

+<html>
+    <head>
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+    <link rel="stylesheet" href="../css/screen.css" />
+
+
+        <script src="../leaflet-include.js"></script>
+    </head>
+    <body>
+
+        <div id="map"></div>
+
+
+        <script>
+            //Init a map, and attempt a locate.
+            var map = L.map('map', {
+                center: [39.84, -96.591],
+                zoom: 4,
+                preferCanvas: true
+            }).locate();
+
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+
+            var vanillaLayer = new L.LayerGroup();
+            map.addLayer(vanillaLayer);
+
+            map.on('moveend',function(e) {
+                console.log('moveend fired.')
+            });
+
+            //For experiments using setRadius
+            var marker = L.circleMarker(map.getCenter(),{radius:30}).addTo(vanillaLayer);
+        </script>
+
+    </body>
+</html>

src/main/resources/static/leaflet/debug/tests/click_on_canvas.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script>
+        var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+        var map = L.map('map', {
+            minZoom: 1,
+            maxZoom: 19,
+            center: [51.505, -0.09],
+            zoom: 9,
+            layers: [osm],
+            preferCanvas: true
+        });
+
+        var polygons = new L.FeatureGroup();
+        var points = [[51.505, -0.01], [51.505, -0.09], [51.55, -0.09]];
+
+        polygons.addLayer(
+        new L.Polyline(
+        points, {
+            weight: 10,
+            opacity: 1,
+            smoothFactor: 1,
+            color: 'red',
+            interactive:true
+        }));
+
+        polygons.on('click', function(m) {
+            // m.layer is the clicked polygon here
+            //m.layer.bindPopup('hello!').openPopup();
+            console.log(m.layer)
+        });
+
+        polygons.addTo(map);
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/custom-panes.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	
+	<link rel="stylesheet" href="../css/screen.css" />
+	
+	<script src="../leaflet-include.js"></script>
+	
+	<style>
+		body { max-width: 1200px }
+		#mapSvg { width: 500px; height: 500px; margin: 20px }
+		#mapCanvas { width: 500px; height: 500px; margin: 20px }
+		.left { float: left; text-align: center }
+		.right { float: right; text-align: center }
+	</style>
+</head>
+<body>
+
+	<div class="right">
+		<h1>Canvas</h1>
+		<div id="mapCanvas"></div>
+	</div>
+	<div class="left">
+		<h1>SVG</h1>
+		<div id="mapSvg"></div>
+	</div>
+
+	<script>
+
+		function makeMap(container, options) {
+			var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+				osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+				osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+			var map = L.map(container, options)
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+				map.createPane('custom1');
+				map.createPane('custom2');
+				map.getPane('custom1').style.zIndex = 601;
+				map.getPane('custom2').style.zIndex = 701;
+
+				var panes = ['overlayPane', 'custom1', 'custom2'];
+
+			function makeFeatures(i) {
+				L.marker([50.505-i*0.005, 30.51]).addTo(map);
+				L.circleMarker([50.505-i*0.005, 30.51], { radius: 30, pane: panes[i] })
+					.bindPopup(function(layer) {
+						return 'Pane: ' + panes[i];
+					})
+					.addTo(map);
+			}
+
+			for (var i = 0; i < 3; i++)
+				makeFeatures(i);
+		}
+
+		makeMap('mapSvg');
+		makeMap('mapCanvas', { preferCanvas: true });
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/detached-dom-memory-leak.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../leaflet-include.js"></script>
+	<script>
+	var map,
+		mapDiv,
+		osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+
+
+	var recreateMap = function(){
+		// destroy previous map and div
+
+		if(map) map.remove();	// This will destroy all DOM childs from layers and controls
+		if(mapDiv) mapDiv.parentNode.removeChild(mapDiv); // This will destroy the map div
+
+		// create new map div
+		var randomDivId = 'mapId' + new Date().getTime();
+		mapDiv = document.createElement('div');
+		mapDiv.id = randomDivId;
+		mapDiv.style.height = '200px';
+		mapDiv.style.width = '200px';
+		document.getElementsByTagName('body')[0].appendChild(mapDiv);
+		// attach map to div
+		map = L.map(randomDivId).setView([51.505, -0.09], 13);
+		map.addLayer(osm);
+	};
+
+	var interval = null;
+	function start(){
+		interval = window.setInterval(recreateMap, 200);
+	}
+
+	function stop() {
+		window.clearInterval(interval);
+	}
+
+	</script>
+</head>
+<body>
+
+This page will destroy and recreate a map div lots of times. Developer tools shall not display a memory leak.
+
+<div>
+<button onclick='recreateMap();'>Once</button>
+<button onclick='start();'>Start</button>
+<button onclick='stop();'>Stop</button>
+</div>
+
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/doubleclick-events-slowdown.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<p>This test is meant for testing the performance of doubleclick event handler in IE. See <a href='https://github.com/Leaflet/Leaflet/issues/4127'>#4127</a> and <a href='https://github.com/Leaflet/Leaflet/issues/2820'>#2820</a></p>
+
+	<div id="map"></div>
+	<button id="populate">Populate with 100 more markers</button><div id='perf'></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([0, 0], 0)
+				.addLayer(osm);
+
+		var markers = new L.FeatureGroup();
+
+		function getEventHandler(i) {
+			return function(ev) { document.getElementById('perf').innerHTML = ('Event on marker ' + i + ': ' + ev.type); }
+		}
+
+		function getRandomLatLng(llbounds) {
+			var s = llbounds.getSouth(),
+			    n = llbounds.getNorth(),
+			    w = llbounds.getWest(),
+			    e = llbounds.getEast();
+
+			return L.latLng(
+				s + (Math.random() * (n - s)),
+				w + (Math.random() * (e - w))
+			)
+		}
+
+		function populate() {
+			var start = performance ? performance.now() : 0;
+
+			for (var i = 0; i < 100; i++) {
+				L.marker(getRandomLatLng(map.getBounds())).addTo(markers).on('dblclick', getEventHandler(i));
+			}
+
+			var end = performance ? performance.now() : 0;
+
+			document.getElementById('perf').innerHTML = 'Adding 100 markers took ' + (end - start) + ' milliseconds.';
+
+			return false;
+		}
+
+		markers.addTo(map);
+
+		populate();
+		L.DomUtil.get('populate').onclick = populate;
+
+		function logEvent(e) { console.log(e.type); }
+
+		// map.on('click', logEvent);
+		// map.on('contextmenu', logEvent);
+
+		// map.on('movestart', logEvent);
+		// map.on('move', logEvent);
+		// map.on('moveend', logEvent);
+
+		// map.on('zoomstart', logEvent);
+		// map.on('zoomend', logEvent);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/dragging_and_copyworldjump.html

+
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Leaflet debug page</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+		<link rel="stylesheet" href="../css/screen.css" />
+		<script src="../leaflet-include.js"></script>
+	</head>
+	<body>
+		<p>
+			On the left Map dragging and worldCopyJump are enabled during initialisation.<br>
+			On the right Map worldCopyJump is enabled. Dragging is enabled by clicking the button.
+		</p>
+		<button id="foo">
+			Click to enable dragging on the right map, then dragging around and watch copying
+		</button><br>
+		<div id="map1" style="height: 300px;width: 400px; float:left;"></div>
+		<div id="map2" style="height: 300px;width: 400px; float:left; margin-left: 10px;"></div>
+		<div style="clear:both"></div>
+
+
+		<script>
+			function addLayerAndMarker(map) {
+				var layer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					maxZoom : 18
+				}).addTo(map);
+
+				var marker = L.marker([50.5, 30.5]).addTo(map);
+
+			}
+			var map1 = new L.Map('map1', {
+				center : new L.LatLng(45.50144, -122.67599),
+				zoom : 0,
+				dragging : true,
+				worldCopyJump : true
+			});
+			var map2 = new L.Map('map2', {
+				center : new L.LatLng(45.50144, -122.67599),
+				zoom : 0,
+				dragging : false,
+				worldCopyJump : true
+			});
+			document.getElementById("foo").addEventListener('click', function() {
+				map2.dragging.enable();
+			});
+
+			addLayerAndMarker(map1);
+			addLayerAndMarker(map2);
+
+		</script>
+	</body>
+</html>

src/main/resources/static/leaflet/debug/tests/dragging_cursors.html

+
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Leaflet debug page</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+		<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+		<link rel="stylesheet" href="../css/screen.css" />
+		<script src="../leaflet-include.js"></script>
+	</head>
+	<body>
+		This page tests if the cursors for dragging the map and the markers behave as expected. The left marker is draggable, the right one is not.
+
+		<hr>
+
+		<div>Map dragging enabled:</div>
+		<div id="map1" style="height: 300px;width: 400px; float:left;"></div>
+
+		<div style="clear:both"></div>
+
+		<div>Map dragging disabled:</div>
+		<div id="map2" style="height: 300px;width: 400px; float:left;"></div>
+
+		<script>
+			function addLayerAndMarkers(map) {
+				var layer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					maxZoom : 18
+				}).addTo(map);
+
+				var draggableMarker = L.marker([20, -120.3], {draggable: true} ).addTo(map);
+				var fixedMarker     = L.marker([50.5, 30.5], {draggable: false}).addTo(map);
+			}
+
+			var map1 = new L.Map('map1', {
+				center : new L.LatLng(0, -30),
+				zoom : 0,
+				dragging : true,
+			});
+
+			var map2 = new L.Map('map2', {
+				center : new L.LatLng(0, -30),
+				zoom : 0,
+				dragging : false,
+			});
+
+			addLayerAndMarkers(map1);
+			addLayerAndMarkers(map2);
+		</script>
+	</body>
+</html>

src/main/resources/static/leaflet/debug/tests/event-perf-2.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <script>
+        /*
+
+            Can be used to profile performance of event system.
+            Start the test, start CPU profiler. Slowly move the
+            mouse around over the map for 20 seconds or so, stop
+            profiler and examine times for _on, _off and fire.
+
+        */
+        var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+        var map = L.map('map')
+                .setView([50.5, 30.51], 15)
+                .addLayer(osm);
+
+        var markers = new L.FeatureGroup().addTo(map),
+            markerArr = [];
+
+        var clicks = 0;
+        markers.on('click', function(e) {
+            clicks++;
+        });
+
+        function getRandomLatLng(llbounds) {
+            var s = llbounds.getSouth(),
+                n = llbounds.getNorth(),
+                w = llbounds.getWest(),
+                e = llbounds.getEast();
+
+            return L.latLng(
+                s + (Math.random() * (n - s)),
+                w + (Math.random() * (e - w))
+            )
+        }
+
+        function shuffleMarkers() {
+            var marker;
+            if (markerArr.length > 2000) {
+                var i = Math.floor(Math.random() * markerArr.length);
+                marker = markerArr.splice(i, 1)[0];
+                markers.removeLayer(marker);
+            } else {
+                marker = L.marker(getRandomLatLng(map.getBounds()))
+                    .on('mouseover', function() {
+                        marker.setZIndexOffset(10000);
+                    })
+                    .on('mouseout', function() {
+                        marker.setZIndexOffset(0);
+                    })
+                    .addTo(markers);
+                markerArr.push(marker);
+            }
+        }
+
+        while (markerArr.length < 2000) {
+            shuffleMarkers();    
+        }
+
+        setInterval(shuffleMarkers, 20);
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/event-perf.html

+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+    <script src="../leaflet-include.js"></script>
+
+  <meta charset="utf-8">
+  <title>Leaflet test for event adding/firing/removing performance</title>
+</head>
+<body>
+  <script>
+
+  function benchmark(name, fn, setup) {
+    //warmup
+    for (var i = 0; i < 100; i++) {
+      if (setup) {
+        setup();
+      }
+      fn();
+    }
+
+    var t = 0;
+    for (var i = 0; i < 100; i++) {
+      if (setup) {
+        setup();
+      }
+      var t0 = performance.now();
+      fn();
+      t += performance.now() - t0;
+    }
+    console.log(name, (t / 100) + ' ms/run');
+  }
+
+  var fn = function (e) {called += e.count;},
+    fns = [],
+    called = 0;
+  for (var p = 0; p < 1000; p++) {
+    fns.push((function(p) { return function(e) { called += p;}; }));
+  }
+  benchmark('Adding same fn', function() {
+    var obj = new L.Evented();
+    var t0 = performance.now();
+    for (var p = 0; p < 1000; p++) {
+      obj.on('test', fn);
+    }
+  });
+
+  benchmark('Adding different fn', function() {
+    var obj = new L.Evented();
+    var fn = function () {};
+    var t0 = performance.now();
+    for (var p = 0; p < 1000; p++) {
+      obj.on('test', fns[p]);
+    }
+  });
+
+  var obj = new L.Evented();
+  var fn = function () {};
+  var t0 = performance.now();
+  for (var p = 0; p < 1000; p++) {
+    obj.on('test', (function(p) { return function() { var x = 2 + p; }})(p));
+  }
+  benchmark('Fire', function() {
+    for (var p = 0; p < 1000; p++) {
+      obj.fire('test');
+    }
+  });
+
+  benchmark('Off', function() {
+    var obj = new L.Evented();
+    var fn = function () {};
+    var t0 = performance.now();
+    for (var p = 0; p < 1000; p++) {
+      obj.on('test', fns[p]);
+    }
+  }, function() {
+    fns = [];
+    var obj = new L.Evented();
+    var t0 = performance.now();
+    for (var p = 0; p < 1000; p++) {
+      var fn = (function(p) { return function() { var x = 2 + p; }})(p);
+      fns.push(fn);
+      obj.on('test', fn);
+    }
+  });
+
+  </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/mousemove_on_polygons.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<style>
+		.mybox {
+			background-color: red;
+		}
+		td {
+			border: transparent solid 2px;
+		}
+		td.red {
+			border: red solid 2px;
+		}
+		td.updated {
+			border: transparent solid 2px;
+			animation-name: borderfade;
+			animation-duration: 0.5s;
+		}
+		
+		@keyframes borderfade {
+			from {
+				border: red solid 2px;
+			}
+			to {
+				border: transparent solid 2px;
+			}
+		}
+	</style>
+	<script src="../leaflet-include.js"></script>
+	<table>
+	<tr><td>           </td><td>Enter       </td><td>Move       </td><td>Exit       </td><td>Click       </td></tr>
+	<tr><td>Triangle 1:</td><td id='enter1'></td><td id='move1'></td><td id='exit1'></td><td id='click1'></td></tr>
+	<tr><td>Triangle 2:</td><td id='enter2'></td><td id='move2'></td><td id='exit2'></td><td id='click2'></td></tr>
+	<tr><td>Map:       </td><td id='enter3'></td><td id='move3'></td><td id='exit3'></td><td id='click3'></td></tr>
+	</table>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			latlng = new L.LatLng(39.05, 8.40);
+
+		var map = new L.Map('map', {center: latlng, zoom: 12, layers: [osm]});
+
+		function update(domid) {
+			return function(){
+				document.getElementById(domid).innerHTML = Date.now();
+				document.getElementById(domid).className = 'red';
+				window.setTimeout(function(){
+					document.getElementById(domid).className = 'updated';
+				},1);
+			}
+		}
+		
+		var polygon = (new L.Polygon([
+			[39, 8.40],
+			[39.10, 8.50],
+			[39.05, 8.30]
+		])).addTo(map).on('mouseover',update('enter1'))
+			.on('mousemove',update('move1'))
+			.on('mouseout',update('exit1'))
+			.on('click',update('click1'))
+			.bindPopup('Triangle 1');
+		
+		var polygon2 = (new L.Polygon([
+			[39.03, 8.30],
+			[39.10, 8.40],
+			[39.00, 8.30]
+		])).addTo(map).on('mouseover',update('enter2'))
+			.on('mousemove',update('move2'))
+			.on('mouseout',update('exit2'))
+			.on('click',update('click2'))
+			.bindPopup('Triangle 2');
+
+		
+		var marker = new L.Marker(latlng, {draggable: true})
+			.bindPopup('Marker');;
+		map.addLayer(marker);
+		
+
+// 		map.on('mousemove', function (e) {
+// 			marker.setLatLng(e.latlng);
+// 		});
+		map.on('mouseover',update('enter3'))
+			.on('mousemove',update('move3'))
+			.on('mouseout',update('exit3'))
+			.on('click',update('click3'));
+		
+		// We should be able to move marker around in a fluid way,
+		// plus going over the polygon with no issue.
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/opacity.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/mobile.css" />
+	<style>
+		.mybox {
+			background-color: red;
+		}
+
+	</style>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
+			latlng = new L.LatLng(50.5, 30.51);
+
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [osm]});
+
+		//Create a marker, clicking it toggles opacity
+		var opaqueIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' });
+		var transparentIcon = new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'transparent' });
+		var marker = new L.Marker(latlng, { icon: opaqueIcon });
+		map.addLayer(marker);
+
+		var visible = true;
+		marker.on('click', function () {
+		if (visible) {
+			marker.setOpacity(0.3);
+			marker.setIcon(transparentIcon)
+		} else {
+			marker.setOpacity(1);
+			marker.setIcon(opaqueIcon);
+		}
+		visible = !visible;
+		});
+
+		var marker2 = new L.Marker(new L.LatLng(50.5, 30.52));
+		map.addLayer(marker2);
+		marker2.bindPopup('This is an amazing message. I shouldn\'t of deleted the Ipsum text');
+
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/popup_offset.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+		L.marker(map.getCenter())
+			.addTo(map)
+			.bindPopup('A pretty CSS3 popup. <br> Easily customizable.',{offset:[100,200]})
+    	.openPopup();
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/popupcontextmenuclicks.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+    <div id="map"></div>
+    <button id="populate">Populate with 10 markers</button>
+
+    <script>
+
+var map = L.map('map').setView([36.9, -95.4], 5);
+map.on('contextmenu', function (e) {
+    alert('The map has been right-clicked');
+});
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+}).addTo(map);
+
+
+
+var exampleGeoJSON = {
+    type: 'Polygon',
+    coordinates: [
+        [
+            [-90.0, 35.0],
+            [-90.0, 45.0],
+            [-100.0, 45.0],
+            [-100.0, 35.0]
+        ]
+    ]
+};
+
+var geoJsonLayer = L.geoJson(exampleGeoJSON, {
+    onEachFeature: function (feature, layer) {
+        layer.on('contextmenu', function (e) {
+            alert('The GeoJSON layer has been clicked');
+        });
+    }
+}).addTo(map);
+
+var marker = L.marker([36, -95]).addTo(map);
+marker.bindPopup('Right-click me <br> to test contextmenu <br> event capture').openPopup();
+
+
+    </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/remove_while_dragging.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+
+	var map = L.map('map').setView( [50, 50], 10);
+	var marker = L.marker([50, 50], {draggable: true}).addTo(map);
+
+	setTimeout(function() {
+		map.removeLayer(marker);
+	}, 3000);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/removetilewhilepan.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../leaflet-include.js"></script>
+	<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+	var map = new L.Map('map', { center: new L.LatLng(45.50144, -122.67599), zoom: 4 });
+
+	var demoUrl='http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer/tile/{z}/{y}/{x}';
+	var demoMap = new L.TileLayer(demoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
+
+	var topoUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer/tile/{z}/{y}/{x}';
+	var topoMap = new L.TileLayer(topoUrl, { maxZoom: 19, attribution: 'Tiles: &copy; Esri' });
+	map.addLayer(topoMap);
+
+	map.addLayer(demoMap);
+
+	map.on('dragstart', function () {
+		console.log('dragstart');
+		setTimeout(function () {
+			console.log('removing');
+			map.removeLayer(demoMap);
+		}, 400);
+	});
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/reuse_popups.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+		var map = L.map('map');
+
+		var marker = L.marker([51.5, -0.09])
+			.bindPopup("<b>Hello world!</b><br />I am a popup.")
+			.addTo(map);
+			//.openPopup();
+
+		var marker2 = L.marker([51.525, -0.09])
+			.addTo(map);
+
+		map.setView([51.505, -0.09], 13);
+
+		var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+		}).addTo(map);
+
+		var a_popup = L.popup().setContent('Previously created')
+
+		marker2.bindPopup(a_popup);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/rtl.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+	body {
+		direction: rtl;
+	}
+</style>
+</head>
+<body>
+
+	<p>Click the map to place a popup at the mouse location</p>
+	<div id="map"></div>
+
+	<script>
+
+		var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+		});
+
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(osm);
+
+		map.on('click', function(e) {
+			L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
+		});
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/rtl2.html

+<html dir="rtl">
+<head>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="../css/mobile.css" />
+
+    <script src="../leaflet-include.js"></script>
+    <style>
+        #map { height: 100%; }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+<script>
+    var map = L.map('map').setView([51.505, -0.09], 13);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+    map.on('click', function(e) {
+        L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
+    });
+</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/set_icon_reuse_dom.html

+<html>
+<head>
+<title>Test for preservation of Icon DOM element</title>
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+
+	var blueIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif'});
+	var redIcon = new L.Icon({iconUrl: 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif'});
+
+	var map = L.map('map').setView( [50, 50], 10);
+
+	var marker = L.marker([50, 50], {icon: blueIcon, draggable: true});
+
+	marker.on('dragstart', function () {
+		console.log('dragstart');
+		marker.setIcon(redIcon);
+		//This is the previous workaround:
+		//var iconElem = L.DomUtil.get(marker._icon);
+		//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_red.gif';
+	});
+
+	marker.on('dragend', function () {
+		console.log('dragend');
+		marker.setIcon(blueIcon);
+		//This is the previous workaround:
+		//var iconElem = L.DomUtil.get(marker._icon);
+		//iconElem.src = 'http://www.webatlas.no/webatlasapi/v/071009/media/interface/default/markers/flag_blue.gif';
+
+	});
+
+	marker.addTo(map);
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/svg_clicks.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script src="../leaflet-include.js"></script>
+	<script src="http://code.jquery.com/jquery-1.8.0.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<script>
+
+	var map;
+	var myLayerGroup = new L.LayerGroup();
+
+	initmap();
+
+	function initmap() {
+	 	// set up the map
+	 	map = new L.Map('map');
+
+		// create the tile layer with correct attribution
+		var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+		var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 17 });
+		map.addLayer(osm);
+		map.fitBounds(new L.LatLngBounds([51,7],[51,7]));
+
+		var route = L.polyline([
+			[51, 7.000],
+			[51.002, 7.004],
+			[51.004, 7.006]
+		]).addTo(map).on('click',function(e){console.log('bottom')})
+
+		var route2 = L.polyline([
+			[51, 7.000],
+			[51.002, 7.004]
+		],
+		{ interactive:false,color:'#f00' }
+		).addTo(map);
+
+		// when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
+	};
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/tile-bounds.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+	#map {
+		margin: 256px;
+		width: auto;
+		overflow: visible
+	}
+	</style>
+</head>
+<body>
+
+	The CSS in this page makes the boundaries of the GridLayer tiles visible. Tiles which do not overlap the map bounds shall not be shown, even at fractional zoom levels.
+
+	<button onclick='map.zoomIn(0.1)'> Zoom + 0.1 </button>
+	<button onclick='map.zoomOut(0.1)'> Zoom - 0.1 </button>
+
+	<div id="map" class="map"></div>
+
+	<script>
+		var mapopts =  {
+			center: [35, -122],
+			zoom: 5.7,
+			zoomSnap: 0.1
+		};
+
+		var map = L.map('map', mapopts);
+
+		var grid = L.gridLayer({
+			attribution: 'Grid Layer',
+			tileSize: L.point(150, 80)
+		});
+
+		grid.createTile = function (coords, done) {
+			var tile = document.createElement('div');
+			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
+			tile.style.border = '2px solid red';
+// 			tile.style.background = 'white';
+
+			// test async
+			setTimeout(function () {
+				done(null, tile);
+			}, 0);
+
+			return tile;
+		};
+
+		map.addLayer(grid);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/tile-events.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+	#map {
+		margin: 0;
+		width: auto;
+	}
+
+	.redTile {
+		border: red 1px solid;
+		line-height: 256px;
+		text-align: center;
+	}
+
+	table {
+		border-collapse: collapse;
+	}
+	table th, table td {
+		border: 1px #444 solid;
+		margin: 0;
+	}
+
+	</style>
+</head>
+<body>
+
+	<p>Keep track of how many tileload/tileunload events are being fired. The counts should always match. See <a href='https://github.com/Leaflet/Leaflet/issues/4093'>#4093</a>, <a href='https://github.com/Leaflet/Leaflet/issues/4193'>#4193</a></p>
+
+	<div id="map" class="map"></div>
+
+	<table>
+		<tr>
+			<th>
+			<th>Start
+			<th>Load
+			<th>Error
+			<th>Unload
+			<th>Visible
+			<th>Grid load
+		<tr>
+			<th>Grid
+			<td id='grid-tileloadstart'>
+			<td id='grid-tileload'>
+			<td id='grid-tileerror'>
+			<td id='grid-tileunload'>
+			<td id='grid-visible'>
+			<td id='grid-load'>
+		<tr>
+			<th>Positron
+			<td id='positron-tileloadstart'>
+			<td id='positron-tileload'>
+			<td id='positron-tileerror'>
+			<td id='positron-tileunload'>
+			<td id='positron-visible'>
+			<td id='positron-load'>
+	</table>
+
+	<p>start = unload + visible on screen</p>
+
+	<div><button id="dc">DC</button>(flyTo)</div>
+	<div><button id="sf">SF</button>(setView, 5 sec)</div>
+	<div><button id="trd">TRD</button>(flyTo 20 sec)</div>
+	<div><button id="lnd">LND</button>(fract. zoom)</div>
+	<div><button id="kyiv">KIEV</button>(setView, fract. zoom)</div>
+	<div><button id="mad">MAD</button>(fitBounds)</div>
+	<div><button id="nul">NUL</button>(image overlay)</div>
+	<div><button id="stop">stop</button></div>
+
+
+	<script>
+		var mapopts =  {
+			center: [35, -122],
+			zoom: 5.75,
+			zoomSnap: 0.25,
+			fadeAnimation: true
+		};
+
+		var kyiv = [50.5, 30.5],
+			lnd = [51.51, -0.12],
+			sf = [37.77, -122.42],
+			dc = [38.91, -77.04],
+			trd = [63.41, 10.41],
+			madBounds = [[40.70, -4.19], [40.12, -3.31]],
+			mad = [40.40, -3.7];
+
+		var map = L.map('map', mapopts);
+
+		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+		})
+
+		var grid = L.gridLayer({
+			attribution: 'Grid Layer',
+// 			tileSize: L.point(150, 80)
+			tileSize: L.point(256, 256)
+		});
+
+		grid.createTile = function (coords/*, done*/) {
+			var tile = L.DomUtil.create('div', 'redTile');
+			tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
+
+			return tile;
+		};
+
+		var gridCounts = {
+			tileload: 0,
+			tileerror: 0,
+			tileloadstart: 0,
+			tileunload: 0,
+			load: 0
+		};
+
+		var positronCounts = {
+			tileload: 0,
+			tileerror: 0,
+			tileloadstart: 0,
+			tileunload: 0,
+			load: 0
+		};
+
+		grid.on('tileload tileunload tileerror tileloadstart load', function(ev){
+			document.getElementById('grid-' + ev.type).innerHTML = ++gridCounts[ev.type];
+			document.getElementById('grid-visible').innerHTML = grid._container.querySelectorAll('.leaflet-tile').length;
+		});
+
+		positron.on('tileload tileunload tileerror tileloadstart load', function(ev){
+			document.getElementById('positron-' + ev.type).innerHTML = ++positronCounts[ev.type];
+			document.getElementById('positron-visible').innerHTML = positron._container.querySelectorAll('.leaflet-tile').length;
+		});
+
+		map.addLayer(positron);
+		map.addLayer(grid);
+
+
+		document.getElementById('dc').onclick   = function () { map.flyTo(dc,  10); };
+		document.getElementById('sf').onclick   = function () { map.setView(sf, 10, {duration: 5, animate: true}); };
+		document.getElementById('trd').onclick  = function () { map.flyTo(trd, 10, {duration: 20}); };
+		document.getElementById('lnd').onclick  = function () { map.flyTo(lnd, 9.25); };
+		document.getElementById('kyiv').onclick = function () { map.setView(kyiv, 9.25); };
+		document.getElementById('nul').onclick  = function () { map.flyTo([0, 0], 10); };
+		document.getElementById('mad').onclick  = function () { map.fitBounds(madBounds); };
+		document.getElementById('stop').onclick = function () { map.stop(); };
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/tile-opacity.html

+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+
+	<script src="../leaflet-include.js"></script>
+	<style>
+	</style>
+</head>
+<body>
+
+	The opacity of the "toner" layer should pulse nicely, even when dragging/zooming the map around with new tiles.
+	<div id="map" class="map"></div>
+
+	<script>
+		var mapopts =  {
+			center: [35, -122],
+			zoom : 5
+		};
+
+		var map = L.map('map', mapopts);
+
+		var watercolorUrl = 'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
+		var watercolor = L.tileLayer(watercolorUrl, {maxZoom: 18, attribution: 'Map by Stamen, map data OpenStreetMap'}).addTo(map);
+
+		var tonerUrl = 'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png';
+		var toner = L.tileLayer(tonerUrl, {maxZoom: 18, attribution: ''}).addTo(map);
+
+		window.setInterval(function(){
+			// Sine function, phase shifts one radian every sec.
+			var opacity = 0.6 + 0.4 * Math.sin(Date.now() / 1000);
+			toner.setOpacity(opacity);
+		}, 200);
+
+	</script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/touch-shake.html

+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
+
+
+	<script>
+		// Trick Leaflet into believing we have a touchscreen (for Chrome)
+		if (window.Touch) { window.ontouchstart = function(){} };
+	</script>
+
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<script src="../leaflet-include.js"></script>
+
+	<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
+  <meta charset="utf-8">
+  <title>Leaflet test for pinch-zoom-without-bounce</title>
+  <style>
+	#map {
+		position:absolute;
+		top: 50px;
+		bottom: 0;
+		left:0;
+		right:0;
+	}
+	body {margin:0; padding: 0}
+
+	.label-right, .label-left, .label-bottom, .label-top {
+		line-height: 20px;
+		color: black;
+	}
+
+	.label-right {
+		text-align: left;
+	}
+
+	.label-left {
+		text-align: right;
+	}
+
+	.label-bottom, .label-top{
+		text-align: center;
+	}
+
+	</style>
+</head>
+<body>
+
+	This is a semi-automated test for checking touch-zoom shaking.
+
+	<div>
+		<button onclick='resetMap()'>reset</button>
+		<button onclick='pinchAndPanL()' >⌐¬</button>
+		<button onclick='pinchAndPanV()' >∧</button>
+		<button onclick='pinchAndPanII()'>||</button>
+	</div>
+
+  <div id='map'></div>
+
+
+  <script>
+
+	var map = L.map('map', {
+		crs: L.CRS.Simple,
+		minZoom: -3,
+		bounceAtZoomLimits: false,
+		maxZoom: 1
+	});
+
+	var bounds = [[0,0],[1000,1000]];
+
+	// Map bounds
+	L.rectangle(bounds,{
+		fill: false,
+		weight: 3,
+		color: 'black'
+	}).addTo(map);
+
+	// Reticule
+	for (var i=100; i<=900; i+=100) {
+		// Vertical line
+		L.polyline([[0, i],[1000, i]], {
+			fill: false,
+			weight: 1,
+			color: 'black'
+		}).addTo(map);
+
+		// Horizontal line
+		L.polyline([[i, 0],[i, 1000]], {
+			fill: false,
+			weight: 1,
+			color: 'black'
+		}).addTo(map);
+
+	}
+
+	for (var i=0; i<=1000; i+=100) {
+		// Right label
+		L.marker([i, 1000], { icon: L.divIcon({
+			iconSize: [40, 20],
+			iconAnchor: [-2, 10],
+			html: i,
+			className: 'label-right'
+		}) }).addTo(map);
+
+		// Left label
+		L.marker([i, 0], { icon: L.divIcon({
+			iconSize: [40, 20],
+			iconAnchor: [42, 10],
+			html: i,
+			className: 'label-left'
+		}) }).addTo(map);
+
+		// Top label
+		L.marker([1000, i], { icon: L.divIcon({
+			iconSize: [40, 20],
+			iconAnchor: [20, 22],
+			html: i,
+			className: 'label-top'
+		}) }).addTo(map);
+
+		// Bottom label
+		L.marker([0, i], { icon: L.divIcon({
+			iconSize: [40, 20],
+			iconAnchor: [20, -2],
+			html: i,
+			className: 'label-bottom'
+		}) }).addTo(map);
+	}
+
+	map.fitBounds(bounds);
+
+
+	var marker = L.marker([500, 500]).addTo(map);
+
+	var marker2 = L.marker([900, 400]).addTo(map);
+
+	var hand = new Hand({timing: 'frame'});
+	var f1 = hand.growFinger('touch');
+	var f2 = hand.growFinger('touch');
+
+	function resetMap() {
+		map.setView(myCenter, 15);
+	}
+
+	function pinchAndPanL() {
+
+		var start = map.getSize().divideBy(2);
+		start.y += 50;
+
+		hand.sync(1000);
+		f1.wait(200).moveTo(start.x - 50, start.y, 0)
+			.down()
+			.moveBy( -50, 0, 1500)
+// 			.moveBy(  -1, 0, 1500)
+			.moveBy( -50, 0, 1500)
+			.moveBy(0, 100, 1500)
+			.wait(1500)
+			.up();
+		f2.wait(200).moveTo(start.x + 50, start.y, 0)
+			.down()
+			.moveBy( 50, 0, 1500)
+// 			.moveBy(  1, 0, 1500)
+			.moveBy( 50, 0, 1500)
+			.moveBy(0, 100, 1500)
+			.wait(1500)
+			.up();
+	};
+
+	function pinchAndPanV() {
+		hand.sync(1000);
+
+		var start = map.latLngToContainerPoint([900, 300]);
+		start.y += 50;
+
+		f1.wait(200).moveTo(start.x - 25, start.y, 0)
+			.down()
+			.moveBy(-100, 300, 5000)
+			.wait(1500)
+			.up();
+		f2.wait(200).moveTo(start.x + 25, start.y, 0)
+			.down()
+			.moveBy( 100, 300, 5000)
+			.wait(1500)
+			.up();
+	};
+
+	function pinchAndPanII() {
+		hand.sync(5);
+		f1.wait(200).moveTo(175, 100, 0)
+			.down()
+			.moveBy(0, 300, 5000)
+			.wait(1500)
+			.up();
+		f2.wait(200).moveTo(225, 100, 0)
+			.down()
+			.moveBy(0, 300, 5000)
+			.wait(1500)
+			.up();
+	};
+
+
+
+
+	map.on('mousedown mouseup zoomend', function(ev){
+// 		console.log('L: ', performance.now(), JSON.stringify(ev.originalEvent));
+		console.log('L: ', performance.now(), ev.type);
+	});
+
+// 	L.DomEvent.on(map._container, 'touchstart touchend touchmove', function(ev){
+// 		console.log('T: ', performance.now(), ev.type, ev.touches.length, ev.changedTouches.length, ev);
+// 	});
+
+
+// 	pinchAndPanL();
+	pinchAndPanV();
+// 	pinchAndPanII();
+
+  </script>
+</body>
+</html>

src/main/resources/static/leaflet/debug/tests/touch-zoom-bounce.html

+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
+
+
+	<script>
+		// Trick Leaflet into believing we have a touchscreen (for Chrome)
+		if (window.Touch) { window.ontouchstart = function(){} };
+	</script>
+
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<script src="../leaflet-include.js"></script>
+
+	<script src="../../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
+	<meta charset="utf-8">
+	<title>Leaflet test for pinch-zoom-without-bounce</title>
+	<style>
+		#map {
+			position:absolute;
+			top: 50px;
+			bottom: 0;
+			left:0;
+			right:0;
+		}
+		body {margin:0; padding: 0}
+	</style>
+</head>
+<body>
+
+	This is an automated test for <a href='https://github.com/Leaflet/Leaflet/issues/3530'>#3530</a>.
+
+	<div>
+		<button onclick='resetMap()'>reset</button>
+		<button onclick='pinchAndPanL()' >⌐¬</button>
+		<button onclick='pinchAndPanV()' >∧</button>
+		<button onclick='pinchAndPanII()'>||</button>
+	</div>
+
+  <div id='map'></div>
+
+
+  <script>
+
+	var myCenter = new L.LatLng(63.41, 10.41);
+	var map = new L.Map('map', {
+		center: myCenter,
+		zoom: 15,
+		minZoom: 1,
+// 		maxZoom: 16,
+		bounceAtZoomLimits: false
+	});
+
+	//In any map, set minZoom and/or maxZoom, plus bounceAtZoomLimits to false.
+
+	var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+	}).addTo(map);
+
+	var marker = L.marker(myCenter);
+	map.addLayer(marker);
+
+	var marker2 = L.marker( map.containerPointToLatLng([200, 50]) ).addTo(map);
+
+
+	console.log('marker 2 is at: ', map.containerPointToLatLng([200, 50]) );
+
+//     map.on('move', function(ev){
+// 		console.log('map move event A ', map._lastCenter, map._zoom, map._pixelOrigin);
+// 		console.log('map move event B ', map.getCenter());
+//     });
+
+
+// 	var hand = new Hand({timing: 'minimal'});
+	var hand = new Hand({timing: 'frame'});
+	var f1 = hand.growFinger('touch');
+	var f2 = hand.growFinger('touch');
+
+	function resetMap() {
+		map.setView(myCenter, 15);
+	}
+
+
+	function pinchAndPanL() {
+		hand.sync(1000);
+		f1.wait(200).moveTo(150, 300, 0)
+			.down()
+			.moveBy( -50, 0, 1500)
+// 			.moveBy(  -1, 0, 1500)
+			.moveBy( -50, 0, 1500)
+			.moveBy(0, 100, 1500)
+			.wait(1500)
+			.up();
+		f2.wait(200).moveTo(250, 300, 0)
+			.down()
+			.moveBy( 50, 0, 1500)
+// 			.moveBy(  1, 0, 1500)
+			.moveBy( 50, 0, 1500)
+			.moveBy(0, 100, 1500)
+			.wait(1500)
+			.up();
+	};
+
+	function pinchAndPanV() {
+		hand.sync(1000);
+
+		var center =
+
+		f1.wait(200).moveTo(175, 100, 0)
+			.down()
+			.moveBy(-100, 300, 500)
+			.wait(2500)
+			.up();
+		f2.wait(200).moveTo(225, 100, 0)
+			.down()
+			.moveBy( 100, 300, 500)
+			.wait(2500)
+			.up();
+	};
+
+	function pinchAndPanII() {
+		hand.sync(5);
+		f1.wait(200).moveTo(175, 100, 0)
+			.down()
+			.moveBy(0, 300, 5000)
+			.wait(1500)
+			.up();
+		f2.wait(200).moveTo(225, 100, 0)
+			.down()
+			.moveBy(0, 300, 5000)
+			.wait(1500)
+			.up();
+	};
+
+
+
+
+	map.on('mousedown mouseup zoomend', function(ev){
+// 		console.log('L: ', performance.now(), JSON.stringify(ev.originalEvent));
+		console.log('L: ', performance.now(), ev.type);
+	});
+
+// 	L.DomEvent.on(map._container, 'touchstart touchend touchmove', function(ev){
+// 		console.log('T: ', performance.now(), ev.type, ev.touches.length, ev.changedTouches.length, ev);
+// 	});
+
+
+// 	pinchAndPanL();
+	pinchAndPanV();
+// 	pinchAndPanII();
+
+	</script>
+</body>
+</html>