leaflet-geoman | powerful leaflet plugin for drawing and editing geometry | Map library

Suppose I have a geojson data:

I am trying to lazy load js drawing library Leaflet-Geoman

I am using webpack and the following code to load

I'm trying to get topological movement of lines with Leaflet-Geoman plugin using TopoJSON. There is a method called topojson.mesh , which

Returns the GeoJSON MultiLineString geometry object representing the mesh for the specified object in the given topology. This is useful for rendering strokes in complicated objects efficiently, as edges that are shared by multiple features are only stroked once. If object is not specified, a mesh of the entire topology is returned.

Thanks to answer in this post, I've been able to return the MultiLineString using topojson.mesh. Since Leaflet-Geoman supports MultiLineString I came across with idea that may be the returned mesh can be edited with Leaflet-Geoman while maintaining the topological properties.

But when I try to accomplish it, the returned MultiLineString get separated in to two parts when I try to edit it using geoman plugin. My question is if that it is really a mesh that returned from topojson.mesh why the lines get seperated? Does that cause by geoman plugin? If that so, how can I get it done? Is there any way I can change the position of a node by dragging it while maintaining the topology?

I'll attach the code below

We have an Angular 11 application with strict mode turned on. It has these values in the compilerOptions configurtation in tsconfig.json:

I am listening to adding a vertex during "draw mode" as documented in docs https://github.com/geoman-io/leaflet-geoman#draw-mode

I am trying to use leaflet-geoman library in a React project. I need to create a custom toolbar button that enables and disables global drag mode.

When toolbar button is clicked, map.pm.enableGlobalDragMode(); function enables global mode. When toolbar button is clicked again, map.pm.disableGlobalDragMode(); causes useCallback function afterClick running in infinite loop.

codesandbox.io

useDraw.js

I am trying to use geoman-io plugin (https://github.com/geoman-io/leaflet-geoman) in ngx-leaflet application. I've found this post: Integrate EasyButton, Geoman with ngx-leaflet , but the only solution provided in this post, that works for me, is to use bracket notation like that:

map["pm"]["addControls"]({position: 'topleft'});

I guess that's not the best way to do this. So my question is how to properly use geoman-io in ngx-leaflet?

When i tried exactly these steps, it doesn't work, because at map.pm.addControls({...}) i get error

Property 'pm' does not exist on type 'Map'

Steps:

1. npm i @geoman-io/leaflet-geoman-free
2. Import geoman in the component import '@geoman-io/leaflet-geoman-free';
3. In angular.json in "build" section import geoman styles:

I have a L.canvasMarker from leaflet-canvas-markers

When in editing mode with Leaflet-Geoman I can move the marker without any issue. But if I drag the map then try to drag the marker, it does not work (it has lost focus). To be able to drag it again I have to click it first, then I can drag it normally again.

My attempt of fixing this was to get the DOM element of the marker then fire focus() event. But I dont know how to get access to a leaflet layer DOM element.

my attempt of fixing below:

I'm using Leaflet and Leaflet-geoman in conjunction with wfs-t to create an editable map object. I have a class EditMap that has a leaflet map as a property. I'm trying to listen for the 'pm:create' event on this map for every class. Here is my code: