[Question] compatibility with leaflet geoman?

[AndrejGajdos]

I am trying to use this library with leaflet-geoman. Leaflet geoman has an option allowEditing: false to disable editing for selected layers. It works in general, but for some reason it doesn't work for layers generated by arrowheads. I am not sure if this is good place to ask this question.

jsfiddle

L.PM.Utils.findLayers(map).forEach((layer) => {
   if (layer?._arrowheads){
    const arrows = layer.getArrowheads()
        console.log({arrows})
    arrows?.pm.setOptions({ allowEditing: false })
        arrows?.eachLayer(arrowLayer => {
           console.log({arrowLayer})
           arrowLayer?.pm.setOptions({ allowEditing: false })
        })
  }
})

[slutske22]

This was quite tricky. The issue is that the arrowheads need to be updated every time the map moves, and we lose the custom options you had set with .pm.setOptions every time. So you have to readd them:

/**
 * Sets options on arrowheads after they were added to map
 */
const setPmOptions = (geoJsonLayer) => geoJsonLayer.eachLayer(layer => {
  // The issue is that this is a new instance of L.layerGroup on every map move - maybe should be fixed in src code
  const arrows = layer.getArrowheads();
  arrows.eachLayer(l => {
    l.pm.setOptions({
      allowEditing: false
    })
  })

})

const parsed = routes.map(route => {
  const geojson = JSON.parse(route.geojsonString);
  const geoJsonLayer = L.geoJSON(geojson, {
    arrowheads: {
      size: '25%',
      frequency: 'endonly',
    },
  })
  geoJsonLayer.addTo(map)
  setPmOptions(geoJsonLayer);
  return geoJsonLayer;
})

map.on('moveend', () => {
  parsed.forEach(geoJsonLayer => {
    setPmOptions(geoJsonLayer)
  })
})

jsfiddle

[AndrejGajdos]

@slutske22 thanks!