accent-dialect-map/src/map.js

'use strict';
import mapbox, { Map, Popup } from '../node_modules/mapbox-gl/dist/mapbox-gl.js';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import FreeHand from 'mapbox-gl-draw-freehand-mode';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import turf from 'turf';

mapbox.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';

const map = new 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
  }
});

const AddPopup = (map) => (area) => {
  let polygon = turf.polygon(area);
  let center = turf.centroid(polygon);
  console.log(center, polygon)

  return new 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)
  }
});