Edit on
<div id="menu">
  <div>
  <span class="title">L.A. Points of Interest</span><br/>
  <span>Spatial Analysis with Turf and Leaflet</span>
  </div>
  <hr/>
  <div class="actions">
    <label class="topcoat-checkbox">
      <input id="show_hoods" type="checkbox" checked=true>
      <div class="topcoat-checkbox__checkmark"></div> Show Neighboorhoods
    </label><br/>
  
    <button class="topcoat-button topcoat-button-small" onclick="doAnalysis(findCenter)">Find Centeroid Point</button>

    <button class="topcoat-button topcoat-button-small" onclick="doAnalysis(findCentralPOIs)">Find Centeroid by Neighborhood</button>
    
    <button class="topcoat-button topcoat-button-small" onclick="doAnalysis(makeTIN)">Interpolate (Delaunay)</button>
    
    <button class="topcoat-button topcoat-button-small" onclick="doAnalysis(makeHeatMap)">Create Heat Map</button>


  </div>
  
</div>

<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%; 
  font-size: 1.4vw;
  line-height: 1.8vw;
  font-family: Helvetica;
}

body { 
  margin:0; 
  padding:0; 
}

body span {
  font-size: 1.2vw;
}

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

#menu { 
  background: #333; 
  color: #EEE;
  padding: 1vw; 
  padding-left: 2vw; 
  height: 100%;
  position:absolute;
  width: 24vw;
  right: 0px;
  top: 0px;
  z-index: 100;
}

#menu .title {
  color: #EEE;
  font-size: 2vw;
  line-height: 3.4vw;
}

.actions button {
  margin: .5vw;
  font-size: 1.6vw;
}

.topcoat-button {
  padding: 0.4vw;
}
/* Calculate the center of all points */
function findCenter() {
  var centroidPt = turf.centroid(points);
  var marker = L.geoJson(centroidPt)
  markers.push(marker)
  marker.addTo(map);
}

/* Find the rectangular boundary of all points */
function findBounds() {
  
  bbox = turf.extent(points);
  bboxPolygon = turf.bboxPolygon(bbox);

  var bounds = L.geoJson(bboxPolygon);
  map.fitBounds(bounds.getBounds());
}

// Show a pseudo-random sample of points in the box
function randomSample() {
    var sample = L.geoJson(turf.sample(points, 100), { style: circle_options })
    sample.addTo(map);
    markers.push(sample);
}

/* Find the Most Central POI by Neihborhood */
function findCentralPOIs() {
  
    hoods = turf.featurecollection(neighborhoods.features);
    display = L.geoJson(hoods, { style: hood_options }).addTo(map);
  
    _.each(hoods.features, function(feature){
        try {
            var center = turf.centroid(feature);
            var nearest = turf.nearest(center, points);
            var marker = L.geoJson(center)
            markers.push(marker)
            marker.addTo(map);
        } catch(e) { console.log(e) }
    });
}

/* Find the Most Central POI by Neihborhood */
function hoodByPOI() {
  
    hoods = turf.featurecollection(neighborhoods.features);
    display = L.geoJson(hoods, { style: hood_options }).addTo(map);
  
    _.each(hoods.features, function(feature){
        try {
          console.log(feature)
          var collection = turf.featurecollection(feature);
          //var aggregated = turf.sum( hoods, points, 'population', 'sum');
          
          var counted = turf.count(collection, points, 'pt_count');
          console.log(counted)
        } catch(e) { console.log(e) }
    });
}

/* Triangular Irregular Network */
function makeTIN() {
  // THis collection was pre-made using the spatial join (turf.tag) feature
  var collection = westlake;
  
  var tin = turf.tin(collection);
  //var markers = L.geoJson(collection).addTo(map);
  var display = L.geoJson(tin, tin_options);
  display.addTo(map);
  markers.push(display);
  map.fitBounds(display.getBounds());
  
  // TODO: make helper function for markers to circles 
  _.each(collection.features, function(x){
    // Convert lat/long to Leaflet coord 
    var coord = L.latLng(x.geometry.coordinates[1], x.geometry.coordinates[0]);
    var radius = 30;
    var circle = L.circle(coord, radius , circle_options).addTo(map);
    markers.push(circle);
 });
}

// Heat map of all points using Leaflet Heatmap
function makeHeatMap() {
    
    coords = []; //define an array to store coordinates
    heat_options = {
        radius: 14  ,
        gradient: { 0.4: '#80cdc1', 0.65: '#b8e186', 1.0: '#d01c8b' }
    }
    
    _.each(points.features, function(feature){
      coords.push([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]);
    });
  
    var scale = chroma.scale('PuBuGn');
  
    try {
      var heat = L.heatLayer(coords, heat_options )
      markers.push(heat);
      heat.addTo(map);     
      map.setZoom(14);
      
    } catch(e) {
      console.log(e)    
    }
}

// Show or Hide LA Neighborhoods
function showNeighborhoods(hide) {
    
    if (hide == true) {
      map.removeLayer(display_hoods)
    } else {
      display_hoods = L.geoJson(hoods, { style: hood_options });
      display_hoods.addTo(map);
    }
}

// Util function to clear all features/markers
function clearMap() {
  
  for(i = 0; i < markers.length; i++) {
    map.removeLayer(markers[i])    
  }
}

// UI for calling the different functions 
function bindActions() {
  
  doAnalysis(showNeighborhoods);
  
  $( "#show_hoods" ).change(function() {
    var checked = $(this).prop("checked");
    if (checked == true) {
      showNeighborhoods();
    } else {
      showNeighborhoods(true);
    }
  });
}
  
function doAnalysis(which, arg) {
  
  clearMap();
  
  which.call(this, arg);
}

/* Map Setup, which is less interesting */
var mapMain = 'osaez.kp2ddba3';
L.mapbox.accessToken = 'pk.eyJ1Ijoib3NhZXoiLCJhIjoiOExKN0RWQSJ9.Hgewe_0r7gXoLCJHuupRfg';

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

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

var circle_options = {
  color:'#053275',
  opacity: 0,
  weight: .5,
  fillColor: '#3490E7 ',
  fillOpacity : .5
};

var hood_options = {
    color : "#9013FE",
    weight : .4,
    opacity : 0.65,
    fillColor : "#9013FE",
    fillOpacity : .01
};

var tin_options = {
    color : "#417505",
    weight : .4,
    opacity : 0.65,
    fillColor : "#417505 ",
    fillOpacity : .1
};

//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);
  hoods = turf.featurecollection(neighborhoods.features);
  
  prepAnalysis();  
    
});

function prepAnalysis() {

  // Show a box around all possible points of interest
  hull = turf.convex(points);
  
  layer = L.geoJson(hull);
     
  bindActions();

  /* 
    TODO: move to separate example
    Do a spatial join and filter 
    var by_hood = turf.tag(points, hoods, 'external_id', 'hood');
    filtered = turf.filter(by_hood, "hood", "westlake");
  */  
    
}




Rerun