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/tests/click_on_canvas_broken.html ADDED

@@ -0,0 +1,49 @@
+<!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="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css" />
+    <link rel="stylesheet" href="../css/screen.css" />
+    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
+    <script>
+        L_PREFER_CANVAS = true;
+        $(document).ready(function() {
+            var map = L.map('map', {
+                minZoom: 1,
+                maxZoom: 19,
+                center: [51.505, -0.09],
+                zoom: 9
+            });
+            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: 2,
+                opacity: 1,
+                smoothFactor: 1,
+                color: 'red'
+            }));
+            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>
+    <script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
+</head>
+<body>
+    <div id="map"></div>
+</body>
+</html>

data/lib/leaflet/debug/tests/dragging_and_copyworldjump.html ADDED

@@ -0,0 +1,61 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+		<script src="../leaflet-include.js"></script>
+		<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.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 type="text/javascript">
+			function addLayerAndMarker(map) {
+				var layer = new L.TileLayer('http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{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
+			});
+			$("#foo").click(function() {
+              map2.dragging.enable();
+            });
+			addLayerAndMarker(map1);
+			addLayerAndMarker(map2);
+		</script>
+	</body>
+</html>

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

@@ -0,0 +1,56 @@
+<!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 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]});
+		//Create a marker, clicking it toggles opacity
+		var marker = new L.Marker(latlng, { icon: new L.DivIcon({ className: 'mybox', iconSize: new L.Point(100,100), html: 'opaque. click to toggle' }) });
+		map.addLayer(marker);
+		var visible = true;
+		marker.on('click', function () {
+			if (visible) {
+				marker.setOpacity(0.3);
+				marker._icon.innerHTML = 'transparent';
+			} else {
+				marker.setOpacity(1);
+				marker._icon.innerHTML = 'opaque';
+			}
+			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>

data/lib/leaflet/debug/tests/popupcontextmenuclicks.html ADDED

@@ -0,0 +1,59 @@
+<!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 map = L.map('map').setView([36.9, -95.4], 5);
+map.on('contextmenu', function (e) {
+    alert('The map has been right-clicked');
+});
+L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+    attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+    key: 'BC9A493B41014CAABB98F0471D759707'
+}).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>

data/lib/leaflet/debug/tests/remove_while_dragging.html ADDED

@@ -0,0 +1,28 @@
+<!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" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+	<script type="text/javascript">
+	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>

data/lib/leaflet/debug/tests/removetilewhilepan.html ADDED

@@ -0,0 +1,41 @@
+<!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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+	<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
+</head>
+<body>
+	<div id="map"></div>
+	<script type="text/javascript">
+	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>

data/lib/leaflet/debug/tests/reuse_popups.html ADDED

@@ -0,0 +1,40 @@
+<!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" 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 cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
+			attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			maxZoom: 18,
+			key: 'd4fc77ea4a63471cab2423e66626cbb6',
+			styleId: 997
+		}).addTo(map);
+		var a_popup = L.popup().setContent('Previously created')
+		marker2.bindPopup(a_popup);
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/tests/rtl.html ADDED

@@ -0,0 +1,42 @@
+<!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>
+	body {
+		direction: rtl;
+	}
+</style>
+</head>
+<body>
+	<p>Click the map to place a popup at the mouse location</p>
+	<div id="map"></div>
+	<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 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			key: 'd4fc77ea4a63471cab2423e66626cbb6'
+		});
+		var map = L.map('map')
+				.setView([50.5, 30.51], 15)
+				.addLayer(cloudmade);
+		map.on('click', function(e) {
+			L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
+		});
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/tests/rtl2.html ADDED

@@ -0,0 +1,27 @@
+<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 type="text/javascript" src="../../build/deps.js"></script>
+	<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('http://{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>

data/lib/leaflet/debug/tests/set_icon_reuse_dom.html ADDED

@@ -0,0 +1,43 @@
+<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 type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+	<script type="text/javascript">
+	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>