D3 Examples - DRCOG Traffic Heat Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Leaflet.heat demo</title>
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
    <style>
    #map {
      width: 100%;
      height:100%;
      position: absolute;
    }
​
    body {
      margin:0;
    }
​
    </style>
</head>
<body>
<div id="map"></div>
<script src="leaflet-heat.js"></script>
<script src="co_traffic.js"></script>
<script>
​
var denver_maxBounds = [
  [39.511673, -105.268289], //Southwest
  [40.072867, -104.550904]  //Northeast
];
​
var options = {
  center: [0, 0],
  zoom: 0,
  scrollWheelZoom: true,
  zoomSnap: .1,
  dragging: true,
  zoomControl: false
}
​
var map = L.map('map', options).fitBounds(denver_maxBounds);
​
// var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
//     attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
// }).addTo(map);
​
// var tiles = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
//   attribution: ''
// }).addTo(map);
​
var tiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a> &mdash; Map data &copy; <a href="https://drcog.org/">Denver Regional Council of Governments</a> and <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: 'abcd',
    ext: 'png'
}).addTo(map);
​
//intensify altitude/density
addressPoints = addressPoints.map(function (p) { return [p[0], p[1], p[2] * 20]; });
​
var heat = L.heatLayer(addressPoints).addTo(map);
​
</script>
</body>
</html>
    