Editing a pre-defined layer

[stjasink]

Hi, I am looking for some guidance please. The demo shows how to use the controls to create new editable layers. I need to render a number of Markers, Polylines and Polygons that I already have data for, in addition to being able to create new ones.

For example I have a few lines something like this:

<Marker position={getMarkerLocation()} icon={getIcon()}>
<Polygon positions={getOrangePoints()} pathOptions={{ color: 'orange' }} />
<Polygon positions={getBluePoints()} pathOptions={{ color: 'blue' }} />
<Polyline positions={getLinePoints()} pathOptions={{ color: 'black' }} />

How can I set these layers to be rendered as immediately editable? I don't need to do any special event handling yet. I tried simply adding an editable={true} attribute in the hope that it would work, but did not.

BTW I have some code that uses LeafletEditable in a non-React app and I set layers to be editable like this when I create them:

const polygon = L.polygon(pointsArray, shapeOptions).addTo(map);
polygon.enableEdit();

Any help appreciated, thanks!

Stephen

[AlejandroRM-DEV]

Hi @stjasink,

You should assign a reference like this:

<Polygon
    ref={(ref) => (refs.current[key] = ref)}
    positions={getLinePoints()}
/>

After that, you can enable editing by using:

refs.current[key].enableEdit();

This way, you'll have access to the Polygon instance through the ref and can easily call methods on it.

[stjasink]

Thank you @AlejandroRM-DEV I'll try that.