Generalizing a GeoJSON multipolygon by expanding and contracting a tuff.buffer in Leaflet

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////
var coords = [48.89, 2.333];
var zoomLevel = 16;
var map = L.map('map').setView(coords, zoomLevel);

ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
  '&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';
L.tileLayer(CDB_URL, {
  attribution: ATTR
}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//styles//
/////////////////////////////////////////////////////////////////////////////////////////////
var originalStyle = {
    "color": "#C44",
    "weight": 1,
    "opacity": 0.7,
    "fillOpacity": 0
};

var bufferedStyle = {
    "weight": 2
};

/////////////////////////////////////////////////////////////////////////////////////////////
//expanding and contracting buffers//
/////////////////////////////////////////////////////////////////////////////////////////////
var feat = getFeatures().features[0];
featLayer = L.geoJson(feat, {style:originalStyle}).addTo(map);

var buffered = turf.buffer(feat, 20, 'meters');
var buffback = turf.buffer(buffered.features[0], -20, 'meters');
buffLayer = L.geoJson(buffback, {style:bufferedStyle}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//GeoJSON down here//
/////////////////////////////////////////////////////////////////////////////////////////////
function getFeatures() {
  var features = {
  "type": "FeatureCollection",
  "features": [{
        "type": "Feature",
        "properties": {
          "cartodb_id": 87,
          "lycee": false,
          "code": "0752319N",
          "nom": "ANTOINE...