<div id="map" class="leaflet-container leaflet-fade-anim"></div>


<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/la-county-neighborhoods-current.geojson"></script>
html, body{
  height:100%;
}

body { margin:0; padding:0; }

#map { height: 100%; width:100%; position: relative }

#header { background: #BBB; padding: 8px; height: 40px;}

#type {
  font-size: 1.2em;
  float:right
}
var mapMain = 'osaez.kp2ddba3';
L.mapbox.accessToken = 'pk.eyJ1Ijoib3NhZXoiLCJhIjoiOExKN0RWQSJ9.Hgewe_0r7gXoLCJHuupRfg';

map = L.mapbox.map('map', mapMain, {
    attributionControl: false,
    maxZoom: 10,
    minZoom: 5
}).setView([34.10469794977326,-118.39656829833986], 10);


var markers = [];
var layers = [];
var hoods;
var points;

//Convert Shapefile to GeoJSON using Shapefile.js
shp("https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/la-poi-only.zip").then(function(geojson){
  json = geojson;
  
  points = turf.featurecollection(json.features);
  
  //var centroidPt = turf.centroid(points);
  //console.log("centroid: ", centroidPt);
  doAnalysis();  
    
});

function doAnalysis() {

      coords = []; //define an array to store coordinates
    heat_options = {
        radius: 18,
        gradient: { 0.4: '#80cdc1', 0.65: '#b8e186', 1.0: '#d01c8b' }
        // 0.4 : scale(0.3), 0.65 : scale(0.5), 1 : scale(0.8)
    }
    
    _.each(points.features, function(feature){
      coords.push([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]);
    });
  
    console.log(coords);

    var scale = chroma.scale('PuBuGn');
  
    try {
      var heat = L.heatLayer(coords, heat_options ).addTo(map);
      
      map.setZoom(map.getZoom() + 1);

    } catch(e) {
      console.log(e)    
    }

}

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css
  2. https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css
  3. http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js
  4. https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/turf.js
  6. https://cdnjs.cloudflare.com/ajax/libs/chroma-js/0.6.3/chroma.min.js
  7. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/shp.js
  8. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/leaflet.label.js
  9. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/L.Mask.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/leaflet-heat.js