Editing polygons in NextJs

[peter-novak-m]

Hi all,

Thanks for this very promising-looking repo! I have been trying to let users do CRUD operations on a map using NextJs, and the creation and deletion work well. For the editing though, I can somehow not trigger the right functions in my GeomanControl.tsx so that the map state in Map.tsx could be updated properly.

My project code running here (sorry for the long link) and at this point I just want to be able to update my state in Map.tsx (that I am printing out to the console) when editing my polygons.

Grateful for any advice regarding what I could be doing wrong since I assume this should be working in NextJs as well?

https://codesandbox.io/p/github/peter-novak-m/leaflet-geoman/master?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clito5f9h000b286fxsq8kl01%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522panelType%2522%253A%2522TABS%2522%252C%2522id%2522%253A%2522clito5f9h000d286f8lhqpnrc%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clito5f9h000b286fxsq8kl01%2522%253A%257B%2522id%2522%253A%2522clito5f9h000b286fxsq8kl01%2522%252C%2522activeTabId%2522%253A%2522clitrmlb90059286f6292mwnm%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clito5f9h000a286fmtwajz9b%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fmodules%252Fproject%252Fcomponents%252FMapArea%252FGeomanControl.tsx%2522%252C%2522id%2522%253A%2522clitrmlb90059286f6292mwnm%2522%252C%2522mode%2522%253A%2522temporary%2522%257D%255D%257D%252C%2522clito5f9h000d286f8lhqpnrc%2522%253A%257B%2522id%2522%253A%2522clito5f9h000d286f8lhqpnrc%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clito5wow006e286f0f4vwhb6%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clitp3l9f00fb286fizr9wwk2%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clitp3l9f00fb286fizr9wwk2%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[Falke-Design]

If you look into the events in the docs, you will see that the edit events are called on the layer instead of on the map.

So instead of:

// When a layer is updated
      map.on("pm:change", (e: { layer: MyLayer }) => {
        if (this.options.onUpdate) {
          this.options.onUpdate(e.layer);
        }
      });

do:

// When a layer is updated
      layer.on("pm:change", (e: { layer: MyLayer }) => {
        if (this.options.onUpdate) {
          this.options.onUpdate(e.layer);
        }
      });