added map to visualize the data

jmarin · Sep 29, 2013 · d84025e · d84025e
1 parent 44de76e
commit d84025e
Showing 1 changed file with 48 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+	<title>MaptimePDX | GeoJSON!</title>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+	 <!--[if lte IE 8]>
+	     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
+	 <![endif]-->
+
+	 <!-- THIS IS WHERE WE PUT ALL THE STYLE INFO FOR THE PAGE-->
+ 	<style type="text/css">
+		body {
+			padding: 0;
+			margin: 0;
+		}
+
+		html, body, #map {
+			height: 100%; /* make the map take up the whole page */
+		}
+
+ 	</style>
+
+	<body>
+		<!-- the 'map' div is where the map content is going -->
+		<div id="map"></div> 
+		<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+		<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+		<script>
+		// create a map in the "map" div, set the view to a given place and zoom
+		var map = L.map('map').setView([45.5, -122.7], 11);
+
+		// add an OpenStreetMap tile layer
+		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+		    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(map);
+
+		// add our goejson data
+		$.getJSON("pdxplaces.geojson", function(data) {
+			var geojson = L.geoJson(data, {
+				onEachFeature: function (feature, layer) {
+					layer.bindPopup(feature.properties.Name); // add the Name property from the geojson to the popup
+				}
+			}).addTo(map);
+		});
+		</script>
+	</body>
+</html>