Disable editing layers on load from external source (esri)

[marc-at-brightnight]

I'm using esri-leaflet to load a featureLayer, as so:

  const map = useMap();

  const landLayer = useMemo(() => {
    if (!arcgisAuth) return null;
    return featureLayer({
      url: 'https://services6.arcgis.com/XXXXXXXXXX/arcgis/rest/services/Land_Layer/FeatureServer/0',
      token: arcgisAuth.token,
    });
  }, [arcgisAuth]);

  useEffect(() => {
    if (!landLayer) return () => {};
    landLayer.addTo(map);
    return () => {
      landLayer.remove();
    };
  }, [map, landLayer]);

The issue is, I can't find a way to elegantly disable editing of these layers on load. What has worked is the following:

    const layers = map.pm.getGeomanLayers();
    layers.forEach((layer) => {
        layer.pm.setOptions({
          allowEditing: false,
          allowRemoval: false,
          allowCutting: false,
        });
   });

But the issue is, I would need to trigger this code every time the map view changes and esri-leaflet loads more layers. I would like to avoid this due to performance concerns. Is there a way to elegantly disable editing for the featureGroup or individual layers on load?

[Falke-Design]

You can set the option pmIgnore: true on the layer and it should work on the featureGroup too, to disable all Geoman interactions.

featureGroup.options.pmIgnore = true or maybe on creation you can pass pmIgnore: true like token.

[marc-at-brightnight]

Thanks for the quick reply. That did seem to work. Any idea how to fix the Typescript issue? I do have import '@geoman-io/leaflet-geoman-free'; at the top of the file.

src/react-components/maps/EsriLayer.tsx:67:11 - error TS2339: Property 'options' does not exist on type 'FeatureLayer'.

67     layer.options.pmIgnore = true;

layer is typed as esri.FeatureLayer

[Falke-Design]

You can try to overwrite it like we do with the Leaflet Layer Options:

leaflet-geoman/leaflet-geoman.d.ts

Lines 1 to 12 in c8961ef

	import * as L from 'leaflet';
	// redeclare module, maintains compatibility with @types/leaflet
	declare module 'leaflet' {
	/**
	* Extends built in leaflet Layer Options.
	*/
	interface LayerOptions {
	pmIgnore?: boolean;
	snapIgnore?: boolean;
	}

[marc-at-brightnight]

Can confirm this seem to work:

// esri-leaflet.d.ts
import * as L from 'esri-leaflet'

declare module 'esri-leaflet' {

  interface FeatureLayerOptions {
    pmIgnore?: boolean;
  }

  interface FeatureLayer {
    options: FeatureLayerOptions
  }
}