Error while edit layer

[CityBelfast]

Hi, I'm getting error when I do the following steps with geoman drawing tool.

1. load existing geometry into $LayerDrawItems group Layer
2. edit the loaded geometry by edit layer button

let $LayerDrawItems = new L.FeatureGroup();
Map.addLayer($LayerDrawItems);

_**Load existing geometry and attach to drawing tool at initial page load**_
 L.Proj.geoJson(data, {
                    onEachFeature: function (feature, layer) {           
                         layer.groupName = "editBoundary";   
                         layer.options.snapIgnore = true;        
                         $LayerDrawItems.addLayer(layer);
                     }
                });

_**Create Layer Event**_
function Create (e) {
            debugger;
            let layer = e.layer, type = e.shape;
            layer.groupName = layer.options.groupName;              
            }

_**Configurations**_
 var drawOptions = {
                        snappable: true, snapDistance: 20, snapMiddle: true, allowSelfIntersection: false,                     
                        cursorMarker: true,
                        finishondoubleclick: true,
                        layerGroup: $LayerDrawItems
                    };
                    Map.pm.setGlobalOptions(drawOptions)                                                     
                    Map.pm.Draw.Polygon.setPathOptions({ opacity: 0.7, weight: 2, snapIgnore: true,  groupName:"editBoundary"});
                    Map.pm.Draw.Rectangle.setPathOptions({ opacity: 0.7, weight: 2, snapIgnore: true,   groupName: "editBoundary" });
                    Map.pm.Draw.Line.setPathOptions({ opacity: 0.7, weight: 2, snapIgnore: true,   groupName: "editBoundary" });
                    Map.pm.Draw.Circle.setPathOptions({ opacity: 0.7, weight: 2, snapIgnore: true,  groupName: "editBoundary" });                                                            
                    Map.pm.disableDraw();
                    Map.pm.addControls({ editMode: true, oneBlock: true, cutPolygon: false, drawCircleMarker: false });   

https://user-images.githubusercontent.com/76213912/104944720-86c2e300-59af-11eb-84e6-58b2617cc596.MOV

[Falke-Design]

I was not able to reproduce this. Is it possible that you upload this to a server, so that I can look on it?

Else here my attempt: https://jsfiddle.net/falkedesign/cuasby2j/

Also try to use the newest version of Leaflet 1.7.1

[Falke-Design]

I don't think that this makes a problem. This is really strange...

Out of interest what are these functions they are you using from leaflet-draw?

[CityBelfast]

We use leaflet-draw tool for our existing functionality to plot normal boundary. But this tool doesn't support multi-geometry editing. That is the reason, we are trying to use leaflet-geoman

[Falke-Design]

So you are not missing any functions of leaflet-draw in geoman? 👍

[CityBelfast]

I don't think so as there are a few extra functionality exists in geoman like multi-geometry, snapping, drag geometry, which makes this tool more attractive to use it. hopefully the bug will get resolved once I update with the latest leaflet version. I will let you know the outcome of version upgrade.

[CityBelfast]

the leaflet libary got updated with 1.7.1 version. but I'm still getting the error when move small circle marker while editing geometry. In fact, this issue is only in Dev system.

[Falke-Design]

It would be very helpful to have the code. Would it possible that you send me the project over Google Drive or so?

Can you debug it in the browser? If you don't know how, I can make you an description

[CityBelfast]

it is a massive project. As per company policy, I don't think I'm allowed to copy anything to outside. would you please make a description to debug it in the browser please? do you want me to debug leaflet.geoman.min.js file locally?

[Falke-Design]

I think that you use the npm modul of geoman, if not it is the similar behaviour but in a different source folder:

https://user-images.githubusercontent.com/19800037/105202174-fb2d8b80-5b41-11eb-8130-4b86256b8a22.mp4

I'm interested what are the value of the variable which calls forEach where the error is thrown. Because normally the variable is always an array, so I don't understand why it is not anymore an array.

Also please click on the script-link "leaflet.geoman.min.js:1" at i.handleLayerAdditionInGlobalEditMode (leaflet.geoman.min.js:1) in the error. And expand the script same as in the video and then please send me an screenshot if it looks different as in the video.

[CityBelfast]

here is the screenshot. but addedLayers array is undefined.

[CityBelfast]

I'm just wondering, is it something do with the blow line of code in the geoman file as I'm adding layers directly to group layer rather than adding into map.

this.map.on("layeradd", this._layerAdded, this),

[Falke-Design]

Can you please try to use

var data = JSON.parse("{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-236.601563,57.891497],[-193.007813,14.264383],[-260.507813,-17.644022],[-186.679688,6.664608],[-223.242188,-55.37911],[-133.945313,17.978733],[-136.757813,62.431074],[-236.601563,57.891497]]]}}");
    L.geoJSON(data,{

instead of L.Proj.geoJson(features, {

[Falke-Design]

this.map.on("layeradd", this._layerAdded, this),

This should not be a problem, also it is working for me

do you think pointToLayer needs to be changed as I'm using L.circle and L.marker?

this should also make no problems.

Can you please set a break point / debug point here:

            this.throttledReInitEdit || (this.throttledReInitEdit = L.Util.throttle(this.handleLayerAdditionInGlobalEditMode, 100, this)),
            this._addedLayers = [],
            this.map.on("layeradd", this._layerAdded, this),

is the new debug point called when you enable edit mode?

After enableing the edit mode check in the console if the map has the array:

map.pm._addedLayers

[CityBelfast]

Can you please try to use

var data = JSON.parse("{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Polygon\",\"coordinates\":[[[-236.601563,57.891497],[-193.007813,14.264383],[-260.507813,-17.644022],[-186.679688,6.664608],[-223.242188,-55.37911],[-133.945313,17.978733],[-136.757813,62.431074],[-236.601563,57.891497]]]}}");
    L.geoJSON(data,{

instead of L.Proj.geoJson(features, {

sorry this coordinates are outside of our map. we use OS UK map.

[Falke-Design]

What are the center of your map? map.getCenter()

[CityBelfast]

What are the center of your map? map.getCenter()

E:278657 | N:187307

[Falke-Design]

It's not possible for me to convert this into latlng, which crs system are you using? It should be possible to get the center in latlng or not? Have your tried the debug steps?

I'm now AFK but I think im lastest in 40mins back

[CityBelfast]

It's not possible for me to convert this into latlng, which crs system are you using? It should be possible to get the center in latlng or not? Have your tried the debug steps?

I'm now AFK but I think im lastest in 40mins back

here is the lat/lng for those values 51.571534 , -3.7522848

[CityBelfast]

this.map.on("layeradd", this._layerAdded, this),

This should not be a problem, also it is working for me

do you think pointToLayer needs to be changed as I'm using L.circle and L.marker?

this should also make no problems.

Can you please set a break point / debug point here:

            this.throttledReInitEdit || (this.throttledReInitEdit = L.Util.throttle(this.handleLayerAdditionInGlobalEditMode, 100, this)),
            this._addedLayers = [],
            this.map.on("layeradd", this._layerAdded, this),

is the new debug point called when you enable edit mode?

After enableing the edit mode check in the console if the map has the array:

map.pm._addedLayers

yes I've set a break point but the pointer doesn't come over there

[CityBelfast]

I don't know whether it is a problem for the library but i just want to highlight one more point here that all my code is within self invoking function like below

(function (gisenq) {

code is here....

})(gisenq);

[CityBelfast]

would you like to have a hangout call?

[Falke-Design]

Yes send me please the invite link to design.falke@gmail.com

[Falke-Design]

The error was because of the PMLock library.

@CityBelfast it'is fixed now: https://raw.githubusercontent.com/Falke-Design/PMLock/master/js/pmLock.js

[CityBelfast]

The error was because of the PMLock library.

@CityBelfast it'is fixed now: https://raw.githubusercontent.com/Falke-Design/PMLock/master/js/pmLock.js

Thank you so much