Where do the features/layers live in geoman?

[stebogit]

Hello, I'm using geoman with react-leaflet so I'm following the useful structure showed in here and here for example.

Still I'm having a hard time figuring out where the geojson layers live. For example, I need to set initial polygons the user might have previously created. How do I add them to geoman, where are the geojson features stored? Also, how do I add the same callbacks on edit and remove to the externally added features, assuming there is a way to import features? I haven't found any issue regarding importing initial features.

I tried this at first load and it partially works, so I'm not sure this is the correct way to add new GeoJSON layers to the map, since I would think I should add such layers to the map.pm.getGeomanLayers(), assuming all editable features would belong to the "geoman ones" (if that make sense):

useEffect(() => {
    map.pm.addControls({ ... });
    map.pm.setGlobalOptions({...});

    const layersGroup = map.pm.getGeomanLayers(true);
    
    initialFeatures.forEach((geojsonFeature) => {
        const geojsonLayer = L.geoJSON(geojsonFeature);
        geojsonLayer.properties = {...geojsonFeature.properties};
        geojsonLayer.on('click', handleFeatureClick);
        geojsonLayer.addTo(map);
        // this does not work, as the feature do not appear on the map
        // layersGroup.addLayer(geojsonLayer)
    });
    
    map.on('pm:create', ({layer, ...rest}) => {
        layer.on('pm:edit', ({layer}) => { ... });    
        layer.properties = layer.properties || {};
        // ...
        layer.on('click', handleFeatureClick);
    });
    map.on('pm:remove', ({layer}) => { ... };
    // ...
}

Also, the handleFeatureClick function passed to the layer created by geoman and the geojsonLayer create on first load receive different parameters for some reason, any idea why? I'd assume the event listener would be attached to a GeoJSON layer in both cases. Finally, the geojsonLayer.properties set in the layers created in initial load doesn't stick, that is when handleFeatureClick is executed on those layers the properties attribute is undefined.

I definitely miss some basic detail here, any suggestion would help. Thanks!

[TurtIeSocks]

At @stebogit I just put together a React wrapper for the lib :) let me know if the code samples in the example folder helps clear up your question about syncing with a GeoJSON.

[Falke-Design]

Hi @stebogit,

sorry for the late answer.

I looks like you should first look into Leaflet. Geoman is only a drawing / editing plugin for Leaflet.

To your questions:

1. All layers are stored as a own JavaScript object (layer). You can connect the layer with the map or with a group (layer.addTo(map)) but you need always have a reference / variable to the layer, else you can't access it in your code. Geoman is going over the map an loops over each layer on the map (map._layers) to filter the layers for editing out. You get the same result with map.pm.getGeomanLayers(). You can for example hide a layer with layer.options.pmIgnore = true then it will not be visible in the result of getGeomanLayers().
2. Leaflet works with Leaflet-Layers and not with GeoJSON-Layers. There is only a possiblity to import ( & export) GeoJSON-Features into Leaflet-Layers. But after that they are no GeoJSON anymore.
3. The differences in the handleFeatureClick are because one time you add the listener to the layer self (pm:create) and one time to the geojson group (L.geoJSON). You can access the single layer from the group with geojsonLayer.getLayers()