DC Plows via the BowersPlowers API

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css' rel='stylesheet'>
  <link href="https://netdna.bootstrapcdn.com/bootswatch/3.0.2/slate/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
  body {
      padding: 0;
      margin: 0;
    }

html, body, #map {
      height: 100%;
    }
        #content {
        position:absolute;
        top:0;
        right:0;
        width:250px;
        bottom:0;
        background:#000;
        background:rgba(0, 0, 0, 0.7);
    }
    .sidecontainer {
      padding:20px;
    }
  @media (max-width:640px) {
      body {
        line-height:14px;
        }
    #content {
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        top:auto;
        max-height:260px;
        width:100%;
        background:#000;
        background:rgba(0, 0, 0, 0.7);
    }
    .sidecontainer {
      padding:10px;
    }
    .sidecontainer h4 {
    font-size:12px;
    }
    .sidecontainer h1 {
    font-size:16px;
    }
  </style>
  <script src="https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="https://asset.geosprocket.com/leaflet/leaflet-hash.js"></script>

<title>DC Plowtracker</title>
</head>

<div id='content'>
    <div class="sidecontainer">
      <h1>The District Plows Tonight</h1>

<h4>Apparently it snows often enough in our nation's capital that the D.C. public works department has actual snowplows, monitored by GPS. <a href="https://twitter.com/jeremybowers" target="_blank">Jeremy Bowers</a> of NPR <a href="https://github.com/jeremyjbowers/mister-plow" target="_blank">helpfully made a feed of these locations</a>, so here you can see what's been plowed and when. Or you could look out the window. Whatever.</h4>
      <hr>

<blockquote class="pull-right">
        - with love, from <a href="https://geosprocket.io" target="_blank">Geosprocket</a>
      </blockquote>
    </div>
  </div><script>
var baseTiles = L.tileLayer('https://a.tiles.mapbox.com/v3/landplanner.ggflie7k/{z}/{x}/{y}.png', {
    maxZoom: 18
  });

$.getJSON("plows.php", function(plows_parsed) {
    //var plows_parsed = $.parseJson(data);
    
    var geojsonData = {"type": "FeatureCollection"};

geojsonData.features = [];
    for (var i = 0; i < plows_parsed.incidents.items.length; i++) {
      geojsonData.features[i] = {
        "type": "Feature",
        "properties": {
          "plow": plows_parsed.incidents.items[i].vehicle_id, 
          "timestamp": plows_parsed.incidents.items[i].time_string,
          "incident": plows_parsed.incidents.items[i].object_id
        },
          "geometry": {
            "type": "Point","coordinates": [ 
              plows_parsed.incidents.items[i].lng,
              plows_parsed.incidents.items[i].lat
            ]
          }
        };
      };

Modified http://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js to a secure url

Modified http://code.jquery.com/jquery-1.10.2.min.js to a secure url

Modified http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js to a secure url

Modified http://asset.geosprocket.com/leaflet/leaflet-hash.js to a secure url

https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js

https://code.jquery.com/jquery-1.10.2.min.js

https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js

https://asset.geosprocket.com/leaflet/leaflet-hash.js