index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Turf Concave Hull</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibW9yZ2FuaGVybG9ja2VyIiwiYSI6Ii1zLU4xOWMifQ.FubD68OEerk74AYCLduMZQ';
var map = L.mapbox.map('map', 'faraday2.mg6daigm')
.setView([42.9186,-72.6833], 16);
var points_layer = L.mapbox.featureLayer().loadURL('bathymetry.geojson');
var depthColor = d3.scale.linear()
.domain([0,12])
.range([ '#c2a5cf','#7b3294' ]);
points_layer.on('ready', function () {
var resolution = 75;
var breaks = [1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,10.5,11,11.5,12,12.5,13,13.5,14,14.5,15];
var isolines = turf.isolines(points_layer.toGeoJSON(), 'DepthMeter', resolution, breaks);
isolines.features.forEach(function (feature) {
feature.properties["stroke"] = depthColor(feature.properties.DepthMeter);
feature.properties["stroke-width"] = 1;
feature.properties["stroke-opacity"] = 0.5;
});
L.mapbox.featureLayer().setGeoJSON(isolines).addTo(map);
});
</script>
</body>
</html>