initial geojson example work

2011-06-17 19:45:04 +03:00 · 2011-06-17 19:45:04 +03:00 · 157e5f058f
commit 157e5f058f
parent 2aee0be776
2 changed files with 105 additions and 0 deletions
--- a/examples/geojson-example.html
+++ b/examples/geojson-example.html
@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+	<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
+	
+	<link rel="stylesheet" href="../css/screen.css" />
+	
+	<script src="../dist/leaflet.js"></script>
+</head>
+<body>
+
+	<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
+	<button id="populate">Populate with 10 markers</button>
+
+	<script type="text/javascript" src="geojson-sample.js"></script>
+	<script type="text/javascript">
+
+		var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/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', {
+			center: new L.LatLng(0.78, 102.37), 
+			zoom: 7, 
+			layers: [cloudmade]
+		});
+		
+		var geojson = new L.GeoJSON();
+		
+		/* points are rendered as markers by default, but you can change this:
+			
+		var geojson = new L.GeoJSON(null, {
+			pointToLayer: function(latlng) { return new L.CircleMarker(latlng); }
+		});
+		*/
+		
+		geojson.on('featureparse', function(e) {
+			// you can style features depending on their properties, etc.
+			var popupText = 'geometry type: ' + e.geometryType + '<br/>';
+			if (e.layer instanceof L.Path) {
+				e.layer.setStyle({color: e.properties.color});
+				popupText += 'color: ' + e.properties.color;
+			}
+			e.layer.bindPopup(popupText);
+		});
+		
+		geojson.addGeoJSON(geojsonSample);
+		
+		map.addLayer(geojson);
+	</script>
+</body>
+</html>
--- a/examples/geojson-sample.js
+++ b/examples/geojson-sample.js
@ -0,0 +1,50 @@
+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]]]]
+			}
+		}
+	]
+};