Closed AbdulrahmanM0 closed 7 months ago
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;
You need to add the event listener to the layer instead of to the map:
layer.on("pm:edit", (e) => {
console.log(e);
});
I have a big problem with the edit => its not firing but the create is working map.on('pm:edit', (event) => { console.log('Edited Layer GeoJSON:', event);