Question: How can I manipulate layers with external data?

[franciscoeymardneto]

For example, I have polygon and circle data in my database and I must add this data to my map. In addition, you can edit and delete either on the map or on the database.

[Falke-Design]

You need to add the layers in the default leaflet way or over geojson.

When you listen on layer.on('pm:edit',(e)=>{console.log(e)}) you can get the new latlngs
When you listen on layer.on('pm:remove',(e)=>{console.log(e)}) you can catch the removed layer

[ghost]

I have the same question.

I have my react leaflet project and I set up geoman as seen on the geoman blog post with the Event.tsx component. I fetch some geoJsons containing polygons and I display them using the Polygon component from the react leaflet library.

I noticed that when I try to edit or move a polygon that I have fetched and displayed the way I described, the polygons change on the map so it seems to work fine but the events pm:edit, pm:updated are not being emitted. They are only emitted when I edit or move the polygons I have created with the geoman draw tool.

As I understand geoman doesn't recognize my polygons as geoman polygons so it doesn't emit these events. I tried displaying my polygons with the GeoJson component but still the pm:edit, pm:update events where not emitted.

import { TileLayer, Polygon, Pane } from "react-leaflet";

export default function Layers({ layerControl, geoData }: LayersProps) {
  const colors = [
    "blue",
    "orange",
    "purple",
    "green",
    "black",
    "red",
    "yellow",
  ];

  return (
    <>
      {/* ------- Base Layers ------- */}
      {layerControl.baseLayers[0].open && (
        <TileLayer url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}" />
      )}
      {layerControl.baseLayers[1].open && (
        <TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
      )}
      {/* ------- Vector Layers ------- */}
      {geoData.map((field, index) => {
        return (
          field.properties.open && (
            <Pane
              name={field.properties.name}
              key={index}
              style={{ zIndex: 200 + field.properties.index }}
            >
              <Polygon
                key={field.properties.opacity}
                pathOptions={{ color: colors[index] }}
                positions={field.geometry.coordinates}
                fillOpacity={field.properties.opacity}
              />
            </Pane>
          )
        );
      })}
    </>
  );
}