Bay Area Bike Share Expansion? leaflet mapbox js by mpmckenna8

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.

index.html

<!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="//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="//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>