Displaying scale on a map and allow the calculation of an area

README.md

@@ -154,7 +154,13 @@ new Mapkick.Map("map", data, {style: "mapbox://styles/mapbox/outdoors-v12"})
 Zoom and controls
 
 ```javascript
-new Mapkick.Map("map", data, {zoom: 15, controls: true})
+new Mapkick.Map("map", data, {zoom: 15, controls: true, displayScale: true})
+```
+
+Calculate area
+
+```javascript
+new Mapkick.Map("map", data, {draw: true})
 ```
 
 Pass options directly to the mapping library
@@ -244,3 +250,6 @@ cd mapkick.js
 npm install
 npm run build-dev
 ```
+To test in development:
+
+Create an access-token.js file in examples folder, and put your mapbox access token inside

examples/index.html

@@ -10,6 +10,12 @@
     <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
     <script src="access-token.js"></script>
 
+    <!-- For polygon draw -->
+    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.js"></script>
+    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css" type="text/css">
+    <!-- ------- -->
+
     <!--
     <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.css" rel="stylesheet" />
     <script src="https://api.mapbox.com/mapbox-gl-js/v1.13.2/mapbox-gl.js"></script>
@@ -79,6 +85,22 @@ <h1>Label</h1>
         new Mapkick.Map("label", [{latitude: 37.7829, longitude: -122.4190, label: "Hello"}]);
       </script>
 
+      <h1>Zoom Navigation</h1>
+      <div id="zoom-navigation" class="map"></div>
+      <script>
+        new Mapkick.Map("zoom-navigation", [{latitude: 37.7829, longitude: -122.4190, label: "Hello"}], {controls: true, displayScale: true});
+      </script>
+
+      <h1>Calculate area</h1>
+      <div id="calculate-area" class="map"></div>
+      <script>
+        new Mapkick.Map("calculate-area", [{latitude: 37.7829, longitude: -122.4190, label: "Hello"}], {draw: true});
+      </script>
+      <div>
+        <p>Click the map to draw a polygon.</p>
+        <p><span id="calculated-area">0</span> square meters.</p>
+      </div> 
+
       <h1>No Hover</h1>
       <div id="no-hover" class="map"></div>
       <script>

src/index.js

@@ -603,6 +603,21 @@ class BaseMap {
       }
     }
 
+    const updateArea = (e, draw) => {
+      const data = draw.getAll()
+      const answer = document.getElementById('calculated-area')
+      if (data.features.length > 0) {
+        const area = window.turf.area(data)
+        const roundedArea = Math.round(area * 100) / 100
+        answer.innerHTML = `${roundedArea}`
+      } else {
+        answer.innerHTML = '0'
+        if (e.type !== 'draw.delete') {
+          alert('Click the map to draw a polygon.')
+        }
+      }
+    }
+
     const generateMap = (element, data, options) => {
       const geojson = generateGeoJSON(data, options)
       options = options || {}
@@ -675,6 +690,27 @@ class BaseMap {
         }
       }
 
+      if(options.displayScale){
+        map.addControl(new window.mapboxgl.ScaleControl())
+      }
+
+      if(options.draw){
+        const draw = new window.MapboxDraw({
+          displayControlsDefault: false,
+          controls: {
+            polygon: true,
+            trash: true
+          },
+          defaultMode: 'draw_polygon'
+        })
+
+        map.addControl(draw)
+
+        map.on('draw.create', (e) => updateArea(e, draw))
+        map.on('draw.delete', (e) => updateArea(e, draw))
+        map.on('draw.update', (e) => updateArea(e, draw))
+      }
+
       this.map = map
 
       onMapLoad(function () {