Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/db2eef40314fe24e9177 to your computer and use it in GitHub Desktop.
Save mpmckenna8/db2eef40314fe24e9177 to your computer and use it in GitHub Desktop.
Bay Area Bike Share Expansion? leaflet mapbox js

The map shows the initial San Francisco Bay Area Bike Share stations with blue circles and more recent stations as of 2/28/2014 with map markers. The most recent dataset has not just the city so explore the peninsula!

If this were for a paying person I'd probably try and make the layer selector a little more customized. But this will do for now w/ some pretty vanilla leaflet.js and a custom basemap easily generated on the Mapbox site.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BABS stations</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="./stationsgeojson.geojson"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var begin = L.geoJson(start,{
pointToLayer:function(feature, latlng){
return L.circleMarker(latlng,{
radius:9,
fillColor: "orange",
fillOpacity:.7
})
}
}),
end = L.geoJson(end);
var both = [end,begin];
var overMaps = {
"Starting":begin,
"Recent":end,
}
var mytile = L.tileLayer('https://{s}.tiles.mapbox.com/v3/mpmckenna8.i60p2il1/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map', {
center:[37.7899, -122.4168],
zoom:13,
layers:[mytile,end,begin]
})
L.control.layers("",overMaps).addTo(map);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment