Skip to content

Instantly share code, notes, and snippets.

@stiles
Created March 2, 2012 21:36
Show Gist options
  • Save stiles/1961562 to your computer and use it in GitHub Desktop.
Save stiles/1961562 to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Charter Schools in Washington, DC</title>
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->
<script src="leaflet.js"></script>
<script src="wax.leaf.min.js"></script>
<script src="charters.js"></script>
</head>
<body>
<div id="mapbox" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
// Define a geojson data layer
var geojsonLayer = new L.GeoJSON(data);
// Define the map to use from MapBox
var url = 'http://api.tiles.mapbox.com/v3/mapbox.mapbox-streets.jsonp';
// Get metadata about the map from MapBox
wax.tilejson(url,function(tilejson) {
// Make a new Leaflet map in your container div
var map = new L.Map('mapbox') // container's id="mapbox"
// Center the map on Washington, DC, at zoom 15
.setView(new L.LatLng(38.9, -77.035), 12)
// Add MapBox Streets as a base layer
.addLayer(new wax.leaf.connector(tilejson))
// Add the geojson layer
.addLayer(geojsonLayer);
// Display the name property on click
geojsonLayer.on("featureparse", function (e) {
if (e.properties && e.properties.name){
e.layer.bindPopup(e.properties.name);
}
});
// Populate our geojson layer with data
geojsonLayer.addGeoJSON(data);
});
var geojsonLayer = new L.GeoJSON(null, {
pointToLayer: function (latlng){
return new L.CircleMarker(latlng, {
radius: 8,
fillColor: "#18817E",
color: "#0D4140",
weight: 2,
opacity: 1,
fillOpacity: 0.7
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment