added draw tools and turf.js

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
+    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
 
     <title>Accent dialect map</title>
   </head>
@@ -52,7 +53,7 @@
           <div class="row">
             <div class="col-md-12">
               <label>Map time</label>
-              <div id='map' style='width: 100%; height: 80vh;'></div>
+              <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
             </div>
           </div>
           <hr class="mb-4">
@@ -71,19 +72,19 @@
   </div>
     <script>
         mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
-        var bounds = [
+        const bounds = [
           [-2.460270, 53.370427],
           [-2.062598, 53.552900]
         ]
         
-        var map = new mapboxgl.Map({
+        const map = new mapboxgl.Map({
           container: 'map',
           style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
           center: [-2.884808, 53.495743],
           zoom: 9.5,
         });
         
-        var Draw = new MapboxDraw({
+        const Draw = new MapboxDraw({
           displayControlsDefault: false,
           controls: {
             polygon: true,
@@ -91,20 +92,43 @@
           }
           });
         
+        console.log("turf", turf);
+        
+        const AddPopup = (map) => (area) => {
+          let polygon = turf.polygon(area);
+          let center = turf.centroid(polygon);
+          console.log(center, polygon)
+
+          return new mapboxgl.Popup({closeOnClick: false})
+            .setLngLat(center.geometry.coordinates)
+            .setHTML(`
+              <h3>form</h3>
+              <label for="data">some data</label>
+              <input type="text" class="form-control" id="data" placeholder="" required>
+              <button type="button">save</button>
+            `)
+            .addTo(map)
+        }
+
+
         map.addControl(Draw, 'top-right');
 
         map.on('load', function() {
-          var drawnData = {};
+          let drawnData = {};
           map.on('draw.create', createArea);
           map.on('draw.delete', deleteArea);
           map.on('draw.update', updateArea);
 
           function createArea(polygon) {
+            let area = polygon.features[0].geometry;
             drawnData = {
               ...drawnData,
-              [polygon.features[0].id]: polygon.features[0].geometry
+              [polygon.features[0].id]: area
             };
-            console.log("data", drawnData)
+
+            console.log("create", area);
+            const popup = AddPopup(map)(area.coordinates);
+
           }
 
           function deleteArea(polygon) {