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

@@ -0,0 +1,54 @@
+<!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;
+	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 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]
+	  ],
+	  { clickable:false,color:'#f00' }
+	  ).addTo(map);
+	  // when the mouse hovers over the red route2, you cannot click through the blue route1 beneath
+	};
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/vector/bounds-extend.html ADDED

@@ -0,0 +1,88 @@
+<!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>
+    <button onclick="boundsExtendBounds();">Extend the bounds of the center rectangle with the upper right rectangle</button>
+    <button onclick="boundsExtendLatLng()">Extend the bounds of the center rectangle with the lower left marker</button>
+	<script src="route.js"></script>
+	<script>
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/d4fc77ea4a63471cab2423e66626cbb6/997/256/{z}/{x}/{y}.png',
+			cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
+        var latLng = new L.LatLng(54.18815548107151, -7.657470703124999);
+		var bounds1 = new L.LatLngBounds(new L.LatLng(54.559322, -5.767822), new L.LatLng(56.1210604, -3.021240));
+        var bounds2 = new L.LatLngBounds(new L.LatLng(56.56023925701561, -2.076416015625), new L.LatLng(57.01158038001565, -0.9777832031250001));
+        var bounds3;
+    	var map = new L.Map('map', {
+		    layers: [cloudmade],
+		    center: bounds1.getCenter(),
+		    zoom: 7
+		});
+        var rectangle1 = new L.Rectangle(bounds1);
+        var rectangle2 = new L.Rectangle(bounds2);
+        var rectangle3;
+        var marker = new L.Marker(latLng);
+    	map.addLayer(rectangle1).addLayer(rectangle2).addLayer(marker);
+        function boundsExtendBounds() {
+        	if  (rectangle3) {
+        		map.removeLayer(rectangle3);
+        		rectangle3 = null;
+        	}
+        	if (bounds3) {
+        		bounds3 = null;
+        	}
+        	bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
+        	bounds3.extend(bounds2);
+        	rectangle3 = new L.Rectangle(bounds3, {
+	            color: "#ff0000",
+	            weight: 1,
+	            opacity: 1,
+	            fillOpacity: 0
+	        });
+	        map.addLayer(rectangle3);
+        }
+        function boundsExtendLatLng() {
+        	if  (rectangle3) {
+        		map.removeLayer(rectangle3);
+        		rectangle3 = null;
+        	}
+        	if (bounds3) {
+        		bounds3 = null;
+        	}
+        	bounds3 = new L.LatLngBounds(bounds1.getSouthWest(), bounds1.getNorthEast());
+        	bounds3.extend(marker.getLatLng());
+        	rectangle3 = new L.Rectangle(bounds3, {
+	            color: "#ff0000",
+	            weight: 1,
+	            opacity: 1,
+	            fillOpacity: 0
+	        });
+	        map.addLayer(rectangle3);
+        }
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/vector/feature-group-bounds.html ADDED

@@ -0,0 +1,90 @@
+<!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>
+	<button onclick="geojsonLayerBounds();">Show GeoJSON layer bounds</button>
+	<button onclick="featureGroupBounds();">Show feature group bounds</button>
+	<script type="text/javascript" src="geojson-sample.js"></script>
+	<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}),
+			rectangle,
+			featureGroup;
+		var map = new L.Map('map', {
+			center: new L.LatLng(0.78, 102.37),
+			zoom: 7,
+			layers: [cloudmade]
+		});
+		var geojson = L.geoJson(geojsonSample, {
+			style: function (feature) {
+				return {color: feature.properties.color};
+			},
+			onEachFeature: function (feature, layer) {
+				var popupText = 'geometry type: ' + feature.geometry.type;
+				if (feature.properties.color) {
+					popupText += '<br/>color: ' + feature.properties.color
+				}
+				layer.bindPopup(popupText);
+			}
+		});
+		geojson.addLayer(new L.Marker(new L.LatLng(2.745530718801952, 105.194091796875)))
+		var eye1 = new L.Marker(new L.LatLng(-0.7250783020332547, 101.8212890625));
+		var eye2 = new L.Marker(new L.LatLng(-0.7360637370492077, 103.2275390625));
+		var nose = new L.Marker(new L.LatLng(-1.3292264529974207, 102.5463867187));
+		var mouth = new L.Polyline([
+			new L.LatLng(-1.3841426927920029, 101.7333984375),
+			new L.LatLng(-1.6037944300589726, 101.964111328125),
+			new L.LatLng(-1.6806671337507222, 102.249755859375),
+			new L.LatLng(-1.7355743631421197, 102.67822265625),
+			new L.LatLng(-1.5928123762763, 103.0078125),
+			new L.LatLng(-1.3292264529974207, 103.3154296875)
+		]);
+		map.addLayer(eye1).addLayer(eye2).addLayer(nose).addLayer(mouth);
+		featureGroup = new L.FeatureGroup([eye1, eye2, nose, mouth]);
+		map.addLayer(geojson);
+		map.addLayer(featureGroup);
+		function geojsonLayerBounds() {
+			if (rectangle) {
+				rectangle.setBounds(geojson.getBounds());
+			} else {
+				rectangle = new L.Rectangle(geojson.getBounds());
+				map.addLayer(rectangle);
+			}
+		}
+		function featureGroupBounds() {
+			if (rectangle) {
+				rectangle.setBounds(featureGroup.getBounds());
+			} else {
+				rectangle = new L.Rectangle(featureGroup.getBounds());
+				map.addLayer(rectangle);
+			}
+		}
+	</script>
+</body>
+</html>

data/lib/leaflet/debug/vector/geojson-sample.js ADDED

@@ -0,0 +1,53 @@
+var geojsonSample = {
+	"type": "FeatureCollection",
+	"features": [
+		{
+			"type": "Feature",
+			"geometry": {
+				"type": "Point",
+				"coordinates": [102.0, 0.5]
+			},
+			"properties": {
+				"prop0": "value0",
+				"color": "blue"
+			}
+		},
+		{
+			"type": "Feature",
+			"geometry": {
+				"type": "LineString",
+				"coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]
+			},
+			"properties": {
+				"color": "red",
+				"prop1": 0.0
+			}
+		},
+		{
+			"type": "Feature",
+			"geometry": {
+				"type": "Polygon",
+				"coordinates": [[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]]
+			},
+			"properties": {
+				"color": "green",
+				"prop1": {
+					"this": "that"
+				}
+			}
+		},
+		{
+			"type": "Feature",
+			"geometry": {
+				"type": "MultiPolygon",
+				"coordinates": [[[[100.0, 1.5], [100.5, 1.5], [100.5, 2.0], [100.0, 2.0], [100.0, 1.5]]], [[[100.5, 2.0], [100.5, 2.5], [101.0, 2.5], [101.0, 2.0], [100.5, 2.0]]]]
+			},
+			"properties": {
+				"color": "purple"
+			}
+		}
+	]
+};

data/lib/leaflet/debug/vector/geojson.html ADDED

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<link rel="stylesheet" href="../css/screen.css" />
+	<style>
+		#map {
+			width: 800px;
+			height: 500px;
+		}
+		.info {
+			padding: 6px 8px;
+			font: 14px/16px Arial, Helvetica, sans-serif;
+			background: white;
+			background: rgba(255,255,255,0.8);
+			box-shadow: 0 0 15px rgba(0,0,0,0.2);
+			border-radius: 5px;
+		}
+		.info h4 {
+			margin: 0 0 5px;
+			color: #777;
+		}
+		.legend {
+			text-align: left;
+			line-height: 18px;
+			color: #555;
+		}
+		.legend i {
+			width: 18px;
+			height: 18px;
+			float: left;
+			margin-right: 8px;
+			opacity: 0.7;
+		}
+	</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" src="us-states.js"></script>
+	<script type="text/javascript">
+		var map = L.map('map').setView([37.8, -96], 4);
+		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',
+			key: 'd4fc77ea4a63471cab2423e66626cbb6',
+			styleId: 998
+		}).addTo(map);
+		// control that shows state info on hover
+		var info = L.control();
+		info.onAdd = function (map) {
+			this._div = L.DomUtil.create('div', 'info');
+			this.update();
+			return this._div;
+		};
+		info.update = function (props) {
+			this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
+				'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
+				: 'Hover over a state');
+		};
+		info.addTo(map);
+		// get color depending on population density value
+		function getColor(d) {
+			return d > 1000 ? '#800026' :
+			       d > 500  ? '#BD0026' :
+			       d > 200  ? '#E31A1C' :
+			       d > 100  ? '#FC4E2A' :
+			       d > 50   ? '#FD8D3C' :
+			       d > 20   ? '#FEB24C' :
+			       d > 10   ? '#FED976' :
+			                  '#FFEDA0';
+		}
+		function style(feature) {
+			return {
+				weight: 2,
+				opacity: 1,
+				color: 'white',
+				dashArray: '3',
+				fillOpacity: 0.7,
+				fillColor: getColor(feature.properties.density)
+			};
+		}
+		function highlightFeature(e) {
+			var layer = e.target;
+			layer.setStyle({
+				weight: 5,
+				color: '#666',
+				dashArray: '',
+				fillOpacity: 0.7
+			});
+			if (!L.Browser.ie) {
+				layer.bringToFront();
+			}
+			info.update(layer.feature.properties);
+		}
+		var geojson;
+		function resetHighlight(e) {
+			geojson.resetStyle(e.target);
+			info.update();
+		}
+		function zoomToFeature(e) {
+			map.fitBounds(e.target.getBounds());
+		}
+		function onEachFeature(feature, layer) {
+			layer.on({
+				mouseover: highlightFeature,
+				mouseout: resetHighlight,
+				click: zoomToFeature
+			});
+		}
+		geojson = L.geoJson(statesData, {
+			style: style,
+			onEachFeature: onEachFeature
+		}).addTo(map);
+		map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
+		var legend = L.control({position: 'bottomright'});
+		legend.onAdd = function (map) {
+			var div = L.DomUtil.create('div', 'info legend'),
+				grades = [0, 10, 20, 50, 100, 200, 500, 1000],
+				labels = [],
+				from, to;
+			for (var i = 0; i < grades.length; i++) {
+				from = grades[i];
+				to = grades[i + 1];
+				labels.push(
+					'<i style="background:' + getColor(from + 1) + '"></i> ' +
+					from + (to ? '&ndash;' + to : '+'));
+			}
+			div.innerHTML = labels.join('<br>');
+			return div;
+		};
+		legend.addTo(map);
+	</script>
+</body>
+</html>