jasonlally/sf_bike_lanes_example.html

## sf_bike_lanes_example.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Load GeoJSON from a URL</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZGF0YXNmIiwiYSI6Ilo3bVlHRDQifQ.7gkiPnZtioL8CnCvJ5z9Bg';
var map = L.mapbox.map('map', 'mapbox.streets')
  .setView([37.773972, -122.431297], 13);

// As with any other AJAX request, this technique is subject to the Same Origin Policy:
// http://en.wikipedia.org/wiki/Same_origin_policy
// So the CSV file must be on the same domain as the Javascript, or the server
// delivering it should support CORS. In the case of Socrata open data calls, they do support CORS

var featureLayer = L.mapbox.featureLayer()
  // The following is the geojson endpoint for bike paths in SF, available at https://data.sfgov.org/d/x3cv-qums
  .loadURL('https://data.sfgov.org/resource/x3cv-qums.geojson?$limit=10000')
  .on('ready', function() {
    featureLayer.eachLayer(function(line) {
      // we can grab the Bike Facility Type from the returned gejson (Bike Lane, Bike Path, etc) and style them differently
      var facilityType = line.feature.properties.facility_type
      var style

      switch (facilityType) {
        case 'BIKE PATH':
          style = {color:'green'}
          break
        case 'BIKE LANE':
          style = {color: 'red'}
          break
        default:
          style = {color: 'blue'}
      }

      line.setStyle(style)
    })
  })
  .addTo(map);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Load GeoJSON from a URL</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>

	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoiZGF0YXNmIiwiYSI6Ilo3bVlHRDQifQ.7gkiPnZtioL8CnCvJ5z9Bg';
	var map = L.mapbox.map('map', 'mapbox.streets')
	.setView([37.773972, -122.431297], 13);

	// As with any other AJAX request, this technique is subject to the Same Origin Policy:
	// http://en.wikipedia.org/wiki/Same_origin_policy
	// So the CSV file must be on the same domain as the Javascript, or the server
	// delivering it should support CORS. In the case of Socrata open data calls, they do support CORS

	var featureLayer = L.mapbox.featureLayer()
	// The following is the geojson endpoint for bike paths in SF, available at https://data.sfgov.org/d/x3cv-qums
	.loadURL('https://data.sfgov.org/resource/x3cv-qums.geojson?$limit=10000')
	.on('ready', function() {
	featureLayer.eachLayer(function(line) {
	// we can grab the Bike Facility Type from the returned gejson (Bike Lane, Bike Path, etc) and style them differently
	var facilityType = line.feature.properties.facility_type
	var style

	switch (facilityType) {
	case 'BIKE PATH':
	style = {color:'green'}
	break
	case 'BIKE LANE':
	style = {color: 'red'}
	break
	default:
	style = {color: 'blue'}
	}

	line.setStyle(style)
	})
	})
	.addTo(map);
	</script>
	</body>
	</html>