index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100% }
    #bikesUI, #docksUI {
      background-color: #fff;
      border: 1px solid #ddd;
      cursor: pointer;
      float: left;
      text-align: center;
    }
    #bikesText, #docksText {
      color: rgb(25,25,25);
      font-family: Roboto,Arial,sans-serif;
      font-size: 16px;
      line-height: 25px;
      padding: 10px;
    }
    .control {
    }
    .control.Selected {
      font-weight: bold;
    }
    </style>
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src=
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyAbM8EJ5BxK80eOtDUTBtBflW77ISJrfic"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">

    // borrowed some of this from https://www.divvybikes.com/assets/js/chicago/stations.js
    var map;
    var infowindow;
    var bounds;
    var stationList;
    var fillOpacity = 0.3;
    var iconScale = 0.5;
    var divvyColor = '#38b5e6';
    var im = 'https://www.robotwoods.com/dev/misc/bluecircle.png';
    var userPos;

    function stationControl(controlDiv, map, bikes) {
      // We set up a variable for this since we're adding event listeners
      // later.
      var control = this;

      // Set the center property upon construction
      controlDiv.style.clear = 'both';

      // Set CSS for the control border
      var bikesUI = document.createElement('div');
      bikesUI.id = 'bikesUI';
      bikesUI.title = 'Click for available Bikes';
      bikesUI.className = 'control';
      if(bikes) bikesUI.className += ' Selected';
      controlDiv.appendChild(bikesUI);

      // Set CSS for the control interior
      var bikesText = document.createElement('div');
      bikesText.id = 'bikesText';
      bikesText.innerHTML = 'Bikes';
      bikesUI.appendChild(bikesText);

      // Set CSS for the setCenter control border
      var docksUI = document.createElement('div');
      docksUI.id = 'docksUI';
      docksUI.title = 'Click for available Docks';
      docksUI.className = 'control';
      if(!bikes) docksUI.className += ' Selected';
      controlDiv.appendChild(docksUI);

      // Set CSS for the control interior
      var docksText = document.createElement('div');
      docksText.id = 'docksText';
      docksText.innerHTML = 'Docks';
      docksUI.appendChild(docksText);

      // Set up the click event listener for 'Center Map': Set the center of
      // the map
      // to the current center of the control.
      bikesUI.addEventListener('click', function() {
        bikesUI.className = 'control Selected';
        docksUI.className = 'control';
        clearMap();
        drawMap(true);
      });

      // Set up the click event listener for 'Set Center': Set the center of
      // the control to the current center of the map.
      docksUI.addEventListener('click', function() {
        docksUI.className = 'control Selected';
        bikesUI.className = 'control';
        clearMap();
        drawMap(false);
      });
    }

    // http://code.tutsplus.com/tutorials/quick-tip-cross-domain-ajax-request-with-yql-and-jquery--net-10225
    // Accepts a url and a callback function to run.
    function requestCrossDomain(site, callback) {
      // If no url was passed, exit.
      if (!site) {
      alert('No site was passed.');
      return false;
      }

      // Take the provided url, and add it to a YQL query. Make sure you encode it!
      var yql = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from html where url="' + site + '"') + '&format=xml';

      // Request that YSQL string, and run a callback function.
      // Pass a defined function to prevent cache-busting.
      $.get(yql, cbFunc);

      function cbFunc(data) {
      // parse xml response
      var xml = data.documentElement.outerHTML,
      xmlDoc = $.parseXML(xml),
      $xml = $(xmlDoc),
      $body = $xml.find('body');

      // If we have something to work with...
      if($body.text()) {
        // If the user passed a callback, and it
        // is a function, call it, and send through the data var.
        if(typeof callback === 'function') {
          //callback($body.text());
          var json = $.parseJSON($body.text());
          callback(json);
        }
      }
      // Else, Maybe we requested a site that doesn't exist, and nothing returned.
      else throw new Error('Nothing returned from getJSON.');
      }
    }

    // clear markers and polygons
    function clearMap() {
      for(var j = 0; j < stationList.active.length; j++) {
        if(stationList.active[j].marker) stationList.active[j].marker.setMap(null);
        if(stationList.active[j].polygon) stationList.active[j].polygon.setMap(null);
      }
      for(var j = 0; j < stationList.inactive.length; j++) {
        if(stationList.inactive[j].marker) stationList.inactive[j].marker.setMap(null);
      }
    }

    // draw map
    function drawMap(bikes) {
      // initialize station list
      stationList = {active: [], inactive: []};

      //$.getJSON("stations.json", function(stations) {
      requestCrossDomain('feeds.divvybikes.com/stations/stations.json', function(stations) {
        // iterate through each station
        $.each(stations.stationBeanList, function(i, station) {
          // get marker location
          var point = new google.maps.LatLng(station.latitude, station.longitude);
          bounds.extend(point);

          var image = 'https://member.divvybikes.com/assets/images/chicago/icons/stations/map-icon-inservice-legend.png'
          var active = true;
          if((!bikes && (station.availableDocks == 0)) || (bikes && (station.availableBikes == 0))) {
            image = 'https://member.divvybikes.com/assets/images/chicago/icons/stations/map-icon-inservice-legend.png';
            active = false;
          }

          // create marker
          var marker = new google.maps.Marker({
              icon: {
              url: image,
              scaledSize: new google.maps.Size(41*iconScale, 53*iconScale)
            },
            position : point,
            map : map,
            title : station.stationName
          });

          var contentString = station.stationName + '<br> ' + 'Available Bikes: ' + station.availableBikes + '<br> ' + 'Available Docks: ' + station.availableDocks;

          // add listener to marker click
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, this);

            // iterate through station list
            for(var j = 0; j < stationList.length; j++) {
              var opacity = 0.0;
              // check if this marker was clicked
              if(this == stationList[j].marker) {
                opacity = fillOpacity;
              }

              // set opacity
              stationList[j].polygon.setOptions({
                fillOpacity: opacity
              });
            }
          });

          // add marker to station list
          s = {marker: marker, name: station.stationName, position: [station.latitude, station.longitude], content: contentString}
          if((!bikes && (station.availableDocks == 0)) || (bikes && (station.availableBikes == 0))) stationList.inactive.push(s);
          else stationList.active.push(s);
        })

        // generate voronoi polygons
        voronoiDiagram(userPos);
      });
    }

    // initialize call for window load
    function initialize() {
      // specify location
      var chicago = new google.maps.LatLng(41.898188, -87.631073);
      userPos = chicago;

      // show bikes first by default
      var type = 'bikes';

      // create map and info window
      var mapOptions = {
      center: chicago,
      zoom: 14
      };
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      infowindow = new google.maps.InfoWindow();

      // keep track of bounds for recentering the map
      bounds = new google.maps.LatLngBounds();

      // create controls
      var stationControlDiv = document.createElement('div');
      var control = new stationControl(stationControlDiv, map, type);

      // show controls
      stationControlDiv.index = 1;
      //stationControlDiv.style['padding-top'] = '10px';
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(stationControlDiv);

      // get location
      // Try HTML5 geolocation.
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          map.setCenter(pos);

          var userMarker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: im
          });

          // store user position
          userPos = pos;

          // draw map
          drawMap(type);
        }, function() {
          // couldn't get position, draw map anyway
          drawMap(type);
        });
      } else {
        // Browser doesn't support Geolocation draw map anyway
        drawMap(type);
      }
    }

    // from https://github.com/substack/point-in-polygon
    function pointInPolygon(point, vs) {
      // ray-casting algorithm based on
      // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
      var xi, xj, i, intersect,
      x = point[0],
      y = point[1],
      inside = false;
      for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        xi = vs[i][0],
        yi = vs[i][1],
        xj = vs[j][0],
        yj = vs[j][1],
        intersect = ((yi > y) != (yj > y))
        && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    }

    function voronoiDiagram(pos) {
      // generate voronio polygons
      var widthAdj = (bounds.getNorthEast().lng() - bounds.getSouthWest().lng())/2.0;
      var heightAdj = (bounds.getNorthEast().lat() - bounds.getSouthWest().lat())/2.0;
      var voronoi = d3.geom.voronoi().clipExtent([[bounds.getSouthWest().lat() - heightAdj, bounds.getSouthWest().lng() - widthAdj], [bounds.getNorthEast().lat() + heightAdj, bounds.getNorthEast().lng() + widthAdj]]);
      var positions = [];
      for(i = 0; i < stationList.active.length; i++) {
        positions.push(stationList.active[i].position);
      }
      var polygons = voronoi(positions);

      // iterate through polygons, draw on map
      if(!polygons) return false;
      for(var i = 0; i < polygons.length; i++) {
        var voronoiCoords = [];
        // store coordinates for each polygon
        for(var j = 0; j < polygons[i].length; j++) {
          voronoiCoords.push(new google.maps.LatLng(polygons[i][j][0], polygons[i][j][1]));
        }
        // complete polygon
        voronoiCoords.push(new google.maps.LatLng(polygons[i][0][0], polygons[i][0][1]));

        // create google maps polygon and draw
        var voronoiPolygon = new google.maps.Polygon({
          paths: voronoiCoords,
          strokeColor: divvyColor,
          strokeOpacity: fillOpacity,
          strokeWeight: 3,
          fillColor: divvyColor,
          fillOpacity: 0.0
        });
        voronoiPolygon.setMap(map);

        // add listener to polygon click
        google.maps.event.addListener(voronoiPolygon, 'click', function(event) {
          // iterate through station list
          for(var j = 0; j < stationList.active.length; j++) {

            var opacity = 0.0;
            // check if this marker was clicked
            if(this == stationList.active[j].polygon) {
              opacity = fillOpacity;

              // open marker's info window
              infowindow.setContent(stationList.active[j].content);
              infowindow.open(map, stationList.active[j].marker);
            }

            // set opacity
            stationList.active[j].polygon.setOptions({
              fillOpacity: opacity
            });
          }
        });

        stationList.active[i].polygon = voronoiPolygon;

        // check for closest station to geolocation
        if(pos) {
          if(pointInPolygon([pos.lat, pos.lng], polygons[i])) {
            infowindow.setContent(stationList.active[i].content);
            infowindow.open(map, stationList.active[i].marker);
            stationList.active[i].polygon.setOptions({
              fillOpacity: fillOpacity
            });
          }
        }
      }
    }

    // call initialize on window load
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <title></title>
  </head>
  <body>
    <div id="map-canvas">
  </body>
</html>