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

@@ -0,0 +1,41 @@
+<!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 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 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 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>

data/lib/leaflet/debug/map/simple-proj.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>
+	<script type="text/javascript">
+		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>

data/lib/leaflet/debug/map/wms-marble.html ADDED

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

data/lib/leaflet/debug/map/wms.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 type="text/javascript">
+		var map = new L.Map('map');
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/{styleId}/256/{z}/{x}/{y}.png',
+			cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = new L.TileLayer(cloudmadeUrl, {styleId: 997, attribution: cloudmadeAttribution}),
+			cloudmade2 = new L.TileLayer(cloudmadeUrl, {styleId: 998, attribution: cloudmadeAttribution});
+		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(cloudmade).addLayer(nexrad).fitBounds(bounds);
+		L.control.layers({"CM": cloudmade, "CM2": cloudmade2}, {"NexRad": nexrad}).addTo(map);
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,45 @@
+<!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">
+	    // Test that changing between layers with differing zoomlevels also updates
+        // the zoomlevels in the map + also
+		function getCloudMadeUrl(styleId) {
+			return 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/' + styleId + '/256/{z}/{x}/{y}.png';
+		}
+		var map = L.map('map').setView(L.latLng(50.5, 30.51), 0);
+		var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+			cloudmade = L.tileLayer(getCloudMadeUrl(997), {attribution: cloudmadeAttribution, minZoom: 0, maxZoom: 10}).addTo(map),
+			cloudmade2 = L.tileLayer(getCloudMadeUrl(998), {attribution: 'Hello world', minZoom: 5, maxZoom: 18});
+		L.control.layers({
+			'CloudMade Pale Dawn (5-18)': cloudmade2,
+			'CloudMade Fresh (0-10)': cloudmade
+		}).addTo(map);
+		L.control.scale().addTo(map);
+		for (var i = 0; i < 1000; i++) {
+			L.marker(getRandomLatLng(map)).addTo(map);
+		}
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,87 @@
+<!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='http://code.jquery.com/jquery-1.8.0.js'></script>
+    <script>
+        L_PREFER_CANVAS = true;
+        $(document).ready(function() {
+            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 = 'http://a.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);
+            };
+            $("#b1").click(function() {
+              map.addLayer(myLayerGroup);
+            });
+            $("#b2").click(function() {
+              map.removeLayer(myLayerGroup);
+            });
+        });
+    </script>
+    <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>
+</body>
+</html>

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

@@ -0,0 +1,37 @@
+<!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>
+	<button id="foo">Click to add layer, then zoom out or in</button>
+	<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' });
+	map.addLayer(demoMap);
+	$('#foo').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>

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

@@ -0,0 +1,47 @@
+<html>
+    <head>
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+    <script>
+        L_PREFER_CANVAS = true;
+    </script>
+    <link rel="stylesheet" href="../css/screen.css" />
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    </head>
+    <body>
+        <div id="map"></div>
+        <script>
+        $(document).ready(function() {
+            //Init a map, and attempt a locate.
+            var map = L.map('map', {
+                center: [39.84, -96.591],
+                zoom: 4
+            }).locate();
+            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="http://osm.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
+            window.marker = L.circleMarker(map.getCenter(),{radius:30}).addTo(vanillaLayer);
+        });
+        </script>
+        <script type="text/javascript" src="../../build/deps.js"></script>
+        <script src="../leaflet-include.js"></script>
+    </body>
+</html>

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

@@ -0,0 +1,58 @@
+<!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='http://code.jquery.com/jquery-1.8.0.js'></script>
+    <script>
+        L_PREFER_CANVAS = true;
+        $(document).ready(function() {
+            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 = L.map('map', {
+                minZoom: 1,
+                maxZoom: 19,
+                center: [51.505, -0.09],
+                zoom: 9,
+                layers: [cloudmade]
+            });
+            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',
+                clickable: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>
+    <script type="text/javascript" src="../../build/deps.js"></script>
+    <script src="../leaflet-include.js"></script>
+</head>
+<body>
+    <div id="map"></div>
+</body>
+</html>