Create map javascript file

map.js

@@ -0,0 +1,70 @@
+'use strict';
+
+mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
+const bounds = [
+  [-2.460270, 53.370427],
+  [-2.062598, 53.552900]
+]
+
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
+  center: [-2.884808, 53.495743],
+  zoom: 9.5,
+});
+
+const Draw = new MapboxDraw({
+  displayControlsDefault: false,
+  controls: {
+    polygon: true,
+    trash: true
+  }
+  });
+
+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() {
+  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]: area
+    };
+
+    console.log("create", area);
+    const popup = AddPopup(map)(area.coordinates);
+
+  }
+
+  function deleteArea(polygon) {
+    console.log('delete', polygon);
+  }
+
+  function updateArea(polygon) {
+    console.log('update', polygon)
+  }
+});