Listening to changes

[joshting]

I tried all the events on the documentation and couldn't get this to work. I am able to listen to pm:create when a new point, line or polygon is placed on the map. However, I have not find a way to listen to changes made to the feature, i.e. when it is moved, vertexes added/removed, etc.

Please help. Thank you.

[Falke-Design]

You need to listen on the layer self and not on the map:

map.on('pm:create', (e)=>{
  e.layer.on('pm:change', (x)=>{
    console.log('change', x);
  });
});

[sten-e]

Hey @Falke-Design,

I made a sortlike listener but for the pm:dragend instead of pm:change. But it only works the first time a drag something, the second time it doesnt console log anything.

leafletMap.value.on('pm:create', (e)=>{ e.layer.on('pm:dragend', (x)=>{ console.log('change', x); }); });

also tried this, it works for some pm:... but not the pm:dragend
leafletMap.value.eachLayer(function(layer){ layer.on('pm:dragend', function(e){ console.log('dragend', e) }) })

Hope you know a solution :)

[Falke-Design]

Hi @sten-e,
works fine for me: https://jsfiddle.net/8qyw5n7f/

[sten-e]

Hey @Falke-Design,

i found out the sollution works on newly created items. when i get a geojson from the api and render the items on the map it only works ones. It doesnt matter what item i drag, the event only gets logged once. When i start dragging something else, or the same item, after the 'dragend' gets logged, the 'dragstart' doenst get logged.

Here is how i add them to the map:

response.data.features.forEach(feature => {
    // Controleer het type van de geometrie
    switch (feature.geometry.type) {
      case 'Point':
        // Maak een Leaflet-marker voor punten
        const pointMarker = L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {properties: feature.properties});
        // Voeg eventuele eigenschappen toe als labels
        pointMarker.bindTooltip(feature.properties.naam,{permanent: true, direction:'center', className: 'text-center text-sm'}); // Voorbeeld: gebruik 'naam' als label
        // Voeg de marker toe aan de kaart
        pointMarker.addTo(leafletMap.value);
        break;
      case 'LineString':
        // Maak een Leaflet-polylijn voor LineStrings
        const lineString = L.polyline(feature.geometry.coordinates.map(coord => [coord[1], coord[0]]), {properties: feature.properties});
        // Voeg eventuele eigenschappen toe als labels
        lineString.bindTooltip(feature.properties.naam,{permanent: true, direction:'center', className: 'text-center text-sm'}); // Voorbeeld: gebruik 'naam' als label
        // Voeg de polylijn toe aan de kaart
        lineString.addTo(leafletMap.value);
        break;
      case 'Polygon':
        // Maak een Leaflet-polygon voor Polygonen
        const polygon = L.polygon(feature.geometry.coordinates[0].map(coord => [coord[1], coord[0]]), { properties: feature.properties });
        // Voeg het eingenschap naam toe als tekst in het midden van het polygon
        polygon.bindTooltip(feature.properties.naam,{permanent: true, direction:'center', className: 'text-center text-sm'});
        // Voeg het polygon toe aan de kaart
        polygon.addTo(leafletMap.value);
        break;
      default:
        console.error('Onbekend geometrietype:', feature.geometry.type);
    }
  });

Tnx for the quick response :)

[Falke-Design]

@sten-e still works for me: https://jsfiddle.net/8qyw5n7f/1/

the event only gets logged once

It should never get logged for the manual added layers, because you never added the event listener. polygon.on('pm:dragend', ....

Please make a demo with jsfiddle, else I can't help you

[sten-e]

Hey @Falke-Design,

tnx for the quick response, i managed to get it working using the way you suggested!

edit: Sorry forgot to click the reply button.....