Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
​
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
​
    <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="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
​
#map {
  height: 100%;
  width: 100%;
}
​
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: purple;
}
​
.leaflet-popup {
  color: white;
  font-size: 24px;
  font-weight: bold;
}
 
// Turf: buffering polygons
​
var map;
var turfLayer;
​
$(document).ready(function() {
  map = L.map('map').setView([40.70, -73.96], 11);
  L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
    maxZoom: 18,
    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 &copy; <a href="http://mapbox.com">Mapbox</a>'
  }).addTo(map);
​
  // Create a layer to hold the GeoJSON objects that we
  // will make with Turf
  turfLayer = L.geoJson(null, {
    style: {
      fillColor: 'red',
      stroke: false
    }
  }).addTo(map);
​
  $.getJSON('https://rawgit.com/ebrelsford/geojson-examples/master/bids.geojson', function(data) {
    var bids = L.geoJson(data, {
      onEachFeature: function(feature, layer) {
        layer.bindPopup(feature.properties.NAME);
        
        // Buffer each feature by 250 ft and add the result to turfLayer
        turfLayer.addData(turf.buffer(feature, 250, 'feet'));
      },
      style: {
        stroke: false
      }
    }).addTo(map);
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ebrelsfordpro
0viewers