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: dynamic points
​
$(document).ready(function() {
  var 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);
  
  var turfLayer = L.geoJson(null, {
    style: function (feature) {
      var style = {
        color: '#561196',
        fillColor: '#561196',
        weight: 0.5
      };
      return style;
    }
  }).addTo(map);
  
  var clickedPoints = L.layerGroup().addTo(map);
  
  map.on('click', function (e) {
    L.circleMarker(e.latlng).addTo(clickedPoints);
    
    // Get rid of current layers in turfLayer
    turfLayer.clearLayers();
    
    // If there are at least three points that have been clicked,
    // add the convex hull of those points to turfLayer
    if (clickedPoints.getLayers().length >= 3) {
      turfLayer.addData(turf.convex(clickedPoints.toGeoJSON()));
    }
  });
});
Output

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

Dismiss x
public
Bin info
ebrelsfordpro
0viewers