PolygonDistances/playground.html at master · barrycarter/PolygonDistances · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<link rel="stylesheet" href="includes/leaflet.css" />
<script src="includes/leaflet.js"></script>
<script src="includes/turf"></script>
<body onload="initialize()">
  <div id="map" style="height: 600px;"></div>
  <script>
    function initialize(){
      //Create a Leaflet map and set the view to the center of the polygon
      const map = L.map('map').setView([37.8, -96], 4);
      // Add a tile layer to the map
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // Create a polygon feature
      const polygon = turf.polygon([[[-81, 41], [-88, 36], [-84, 31], [-80, 33], [-77, 39], [-81, 41]]]);
      // Set the buffer distance
      const distance = 5;
      // Set the buffer unit
      const unit = 'miles';
      // Perform the buffer operation
      const buffered = turf.buffer(polygon, distance, { units: unit });
      // Convert the buffered polygon to a Leaflet layer
      const bufferedLayer = L.geoJSON(buffered).addTo(map);
      // Zoom the map to the buffered polygon
      map.fitBounds(bufferedLayer.getBounds());

L.geoJSON(polygon).addTo(map);
    }
  </script>
</body>
``