public/examples/heatmap/index.html from merlos/panatrans-api

public/examples/heatmap/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Heatmap Panama Roads</title>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="heatmap.min.js"></script>
  <script src="leaflet-heatmap.min.js"></script>
</head>
<body> 
 <div id="map-canvas" style="width: 100%;height: 600px;border:1px solid blue"></div>
  
  <script>
 
    $(document).ready(function() {
      
      var baseLayer = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
          }
        );
      
      var cfg = {
        // radius should be small ONLY if scaleRadius is true (or small radius is intended)
        // if scaleRadius is false it will be the constant radius used in pixels
        "radius": 0.005,
        "maxOpacity": .8, 
        // scales the radius based on map zoom
        "scaleRadius": true, 
        // if set to false the heatmap uses the global maximum for colorization
        // if activated: uses the data maximum within the current map boundaries 
        //   (there will always be a red spot with useLocalExtremas true)
        "useLocalExtrema": true,
        // which field name in your data represents the latitude - default "lat"
        latField: 'lat',
        // which field name in your data represents the longitude - default "lng"
        lngField: 'lon',
        // which field name in your data represents the data value - default "value"
        valueField: 'value'
      };

      var heatmapLayer = new HeatmapOverlay(cfg);
 
      var map = new L.Map('map-canvas', {
        center: [8.9740946, -79.5508536],
        zoom: 12,
        layers: [baseLayer, heatmapLayer]
      });
       
      $.get( "http://test-panatrans.herokuapp.com/v1/stops/", function( data ) {
        var stops = [];
        $.each(data.data, function(key, stop) {
          stop.value=1;
          stop.lat= parseFloat(stop.lat);
          stop.lon = parseFloat(stop.lon); 
          stops.push(stop);  
        });
        var myData = {max: 1, data: stops}
        heatmapLayer.setData(myData);
      });     
});

  </script>

</body>
</html>