GeoMAN | Tensorflow Implement of GeoMAN , IJCAI-18 | Machine Learning 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 have an issue that when leaflet geoman removes a vertex on for example polygon, I cannot restore the latLngs of the object.

What im doing: On object click -> object.getLatLngs(). Works fine.

If I start editing the object and then object.setLatLngs(ObjectClickLatLngs) it works fine.

But the issue is: Click object -> start editing -> Right click vertex(to delete vertex) -> object.setLatLngs(ObjectclickLatLngs). Now the vertex is deleted and did not restore to the latLngs it had previously.

Try to click the polygon, change a vertex then click "restore object to initial position" (works as expected) Then click the polygon, but right click a vertex(to delete) without moving it then click "restore object to initial position" (now the object is not in the state it should be, expected it to restore to same position as initial)

https://jsfiddle.net/6tzxg2ds/2/

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: