Edit Mode

[AbdulrahmanM0]

Edit Mode

[AbdulrahmanM0]

import React, { useEffect } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import '@geoman-io/leaflet-geoman-free';

const LeafletMapComponent = () => {
useEffect(() => {
// Create a Leaflet map
const map = L.map('map').setView([24.774265, 46.738586], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Enable drawing and editing with leaflet-geoman
map.pm.addControls({
  position: 'topleft',
  allowSelfIntersectionEdit: true,
  syncLayersOnDrag: true,
  drawCircle: false,
  rotateMode: false,
  showControls: ['all'],
  editMode: true,
});

// Set up a flag to check if an edit has occurred
let isEditOccurred = false;

// Listen for the pm:edit event to capture edits
map.on('pm:edit', (event) => {
  console.log('Edited Layer GeoJSON:', event);

});

// Listen for the pm:create event to capture creations
map.on('pm:create', (event) => {
  console.log('Drawn Data:', event);
});

// Check for edits after a timeout
const checkEdits = () => {
  if (isEditOccurred) {
    // Get all layers on the map (including edited ones)
    const allLayers = map.pm.getGeomanDrawLayers();

    // Log GeoJSON data of edited layers
    const editedLayersGeoJSON = allLayers.map(layer => layer.toGeoJSON());
    console.log('Edited Layers GeoJSON:', editedLayersGeoJSON);
  }
};

// Check for edits after a timeout of 1 second
setTimeout(checkEdits, 1000);

// Cleanup on component unmount
return () => {
  map.remove();
};

}, []);

return <div id="map" style={{ width: '600px', height: '600px' }} />;
};

export default LeafletMapComponent;

[Falke-Design]

You need to add the event listener to the layer instead of to the map:

layer.on("pm:edit", (e) => {
  console.log(e);
});