D3 Examples - Socrata wifi example

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>Example</title>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.js'></script>
  <script src='socrata.json'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map {
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }
  </style>
</head>
<body>
​
<div id='map'></div>
<script>
  var m = mapbox.map('map');
  m.addLayer(mapbox.layer().id('examples.map-20v6611k'));
​
  // Create an empty markers layer
  var markerLayer = mapbox.markers.layer();
​
  // Add interaction to this marker layer. This
  // binds tooltips to each marker that has title
  // and description defined.
  mapbox.markers.interaction(markerLayer);
  m.addLayer(markerLayer);
​
  m.zoom(5).center({ lat: 37, lon: -77 });
​
  var features = [];
  for (var i = 0; i < socrata_data.data.length; i++) {
      var d = socrata_data.data[i];
      features.push({
          properties: {
              title: d[10],
              'marker-color': (d[16] === 'Free') ? '#75FF7A' : '#555',
              description: d[11] + ', ' + d[12]
          },
          geometry: {
              coordinates: [
                  d[9][2], d[9][1]
              ]
          }
      });
  }
  // Add a single feature to the markers layer.
  // You can use .features() to add multiple features.
  markerLayer.features(features);
  m.extent(markerLayer.extent());
</script>
</body>
</html>
​
    