RubyGems - leaflet-js - Versions diffs - 0.7.9 → 0.8.dev2 - Mend

leaflet-js 0.7.9 → 0.8.dev2

Files changed (341) hide show

data/lib/leaflet/debug/map/controls.html ADDED

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<link rel="stylesheet" href="../css/screen.css" />
+	<script type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<script type="text/javascript">
+		function getCloudMadeUrl(styleId) {
+			return 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/' + styleId + '/256/{z}/{x}/{y}.png';
+		}
+		var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = new L.TileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution}),
+			cloudmade2 = new L.TileLayer(getCloudMadeUrl(998), {attribution: 'Hello world'});
+		var map = new L.Map('map').addLayer(cloudmade).setView(new L.LatLng(50.5, 30.512), 15);
+		var marker = new L.Marker(new L.LatLng(50.5, 30.505), {color: 'red'});
+		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({
+			'CloudMade Fresh': cloudmade,
+			'CloudMade Pale Dawn': cloudmade2
+		}, {
+			'Some marker': marker,
+			'Another marker': marker2
+		});
+		map.addControl(layersControl);
+		map.addControl(new L.Control.Scale());
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/map/geolocation.html ADDED

@@ -0,0 +1,34 @@
+<!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 type="text/javascript">
+        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
+            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
+        var map = new L.Map('map', {zoom: 15, layers: [cloudmade]});
+        function logEvent(e) { console.log(e.type); }
+        map.on('locationerror', logEvent);
+        map.on('locationfound', logEvent);
+        map.locate({setView: true});
+    </script>
+</body>
+</html>

data/lib/leaflet/debug/map/grid.html ADDED

@@ -0,0 +1,45 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<script type="text/javascript">
+		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);
+			}, Math.random() * 500);
+			return tile;
+		};
+		var map = L.map('map')
+				.setView([50.5, 30.51], 10)
+				.addLayer(grid);
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/map/iframe.html ADDED

@@ -0,0 +1,11 @@
+<style>
+	iframe {
+		position: absolute;
+		top: 50px;
+		left: 50px;
+		width: 500px;
+		height: 500px;
+	}
+</style>
+<iframe src="map.html">
+</iframe>

data/lib/leaflet/debug/map/image-overlay.html ADDED

@@ -0,0 +1,43 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<button id="populate">Populate with 10 markers</button>
+	<script type="text/javascript">
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+			latlng = new L.LatLng(50.5, 30.51);
+		var map = new L.Map('map');
+		map.addLayer(cloudmade);
+		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
+		});
+		map.addLayer(overlay);
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/map/map-mobile.html ADDED

@@ -0,0 +1,34 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<script type="text/javascript">
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+			latlng = new L.LatLng(50.5, 30.51);
+		var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
+		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>

data/lib/leaflet/debug/map/map.html ADDED

@@ -0,0 +1,61 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<button id="populate">Populate with 10 markers</button>
+	<script type="text/javascript">
+		var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
+			maxZoom: 18,
+			attribution: 'Map data &copy; 2011 <a href="#">OpenStreetMap</a> contributors, Imagery &copy; 2011 <a href="#">CloudMade</a>',
+			key: 'd4fc77ea4a63471cab2423e66626cbb6'
+		});
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(cloudmade);
+		var markers = new L.FeatureGroup();
+		function populate() {
+			for (var i = 0; i < 10; i++) {
+				markers.addLayer(new L.Marker(getRandomLatLng(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>");
+		map.addLayer(markers);
+		populate();
+		L.DomUtil.get('populate').onclick = populate;
+		function logEvent(e) { console.log(e.type); }
+		map.on('click', logEvent);
+//
+//		map.on('movestart', logEvent);
+//		map.on('move', logEvent);
+//		map.on('moveend', logEvent);
+//
+//		map.on('zoomstart', logEvent);
+//		map.on('zoomend', logEvent);
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/map/max-bounds.html ADDED

@@ -0,0 +1,38 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map"></div>
+	<script type="text/javascript">
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
+			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: [cloudmade],
+			maxBounds: bounds
+		});
+		var latlngs = L.rectangle(bounds).getLatLngs();
+		L.polyline(latlngs.concat([latlngs[0]])).addTo(map);
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/map/opacity.html ADDED

@@ -0,0 +1,223 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<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 type="text/javascript">
+		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 osm1 = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941
+		}).addTo(map1);
+		// EEZs / Nations
+		var eez1 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+		    tms: true
+		}).addTo(map1);
+		// Marine Protected Areas overlay
+		var mpa1 = new 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('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941
+		}).addTo(map2);
+		// EEZs / Nations
+		var eez2 = new 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 = new 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('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941,
+		    zIndex: 0
+		}).addTo(map3);
+		// EEZs / Nations
+		var eez3 = new 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 = new 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('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941,
+		    opacity: 1
+		}).addTo(map4);
+		// EEZs / Nations
+		var eez4 = new 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 = new 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('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941,
+		    opacity: 0.99
+		}).addTo(map5);
+		// EEZs / Nations
+		var eez5 = new 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 = new 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('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png?v=1', {
+		    attribution: '',
+		    key: 'BC9A493B41014CAABB98F0471D759707',
+		    styleId: 97941,
+		    opacity: 0.99
+		}).addTo(map6);
+		// EEZs / Nations
+		var eez6 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/eezs/{z}/{x}/{y}.png', {
+		    tms: true,
+		    opacity: 1
+		}).addTo(map6);
+		// Marine Protected Areas overlay
+		var mpa6 = new L.tileLayer('http://tile1.mpatlas.org/tilecache/mpas/{z}/{x}/{y}.png', {
+		    tms: false,
+		    opacity: 0.99
+		}).addTo(map6);
+	</script>
+</body>
+</html>