accent-dialect-map/map.js

'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)
  }
});