Error while drawing a polygon, edition or deleting.

[Ornstrias]

Hello, I don't kow if the problem comes from my code but every time I draw a polygon, edit a form or delete one I've got got this error :

leaflet.draw.js:9 Uncaught TypeError: Cannot read property 'updatePosition' of null

After that if I zoom in or out, my polygon never updates it's size.

Here is my code:

angular.module('myApp.view1', ['ngRoute', 'leaflet-directive'])
.controller('View1Ctrl', ["$scope", "leafletData", function ($scope, leafletData) {

   var drawnItems = new L.FeatureGroup();

    var options = {
        edit: {
            featureGroup: drawnItems
        },
        draw: {
            polyline: false,
            marker: false,
            polygon: {
                shapeOptions: {
                    color: 'purple'
                }
            },
            circle: {
                shapeOptions: {
                    stroke: true,
                    weight: 4,
                    color: 'blue',
                    opacity: 0.5,
                    fill: true,
                    fillColor: null, //same as color by default
                    fillOpacity: 0.2,
                    clickable: true
                }
            }
        },
        showRadius: true
    }
    var drawControl = new L.Control.Draw(options);

    angular.extend($scope, {
        defaults: {
            scrollWheelZoom: false
        },
        london: {
            lat: 51.505,
            lng: -0.09,
            zoom: 8
        },
        controls: {
            custom: [drawControl]
        }
    });

    leafletData.getMap().then(function (map) {
        map.addLayer(drawnItems);
        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;

            if (type == "polygon") {
                console.log("polygon " + JSON.stringify(layer.toGeoJSON()));
            }
            if (type === 'circle') {
                console.log(JSON.stringify(layer.toGeoJSON()));
            }

            drawnItems.addLayer(layer);
        });

    });
}]);

Thank you for the help

[ddproxy]

@Jehlahd Is this with leaflet 1.0.x or earlier?

[Ornstrias]

The last version available on bower, I don't know which is it

[ddproxy]

I'm not sure either since I use npm instead of bower. I'll assign this as L1.x issue.

@Jehlahd Could you get the error stack from this?

[annesofie]

I have the same problem! It happends after I draw something on the map, then every time I move the mouse over the map I get this message: cannot read property 'updatePosition' of null

[Ornstrias]

Exactly annesofie, I have the same error

[ddproxy]

Can I see how you are constructing the map?

[annesofie]

Im using the angular-leaflet-directive, so i only do this in my map-view: <leaflet lf-center="center" controls="controls" width="100%" height="600px"></leaflet>

[Ornstrias]

Same here

[annesofie]

I now recognize that the error do not appear when I draw a circle.. But if I draw something else afterwards, like a marker, the error comes. And it never stops if it has started to appear.

[ddproxy]

Does it only happen with a circle? I'm elevating this bug for a patch release.

[annesofie]

It do not happen with a circle, only with the other elements.

[ddproxy]

OH! well that's odd. Thanks for the details.

[annesofie]

Have anyone managed to find out why this happens?

[Ornstrias]

Nope, Still I used a previous version of Leaflet.Draw and the issues was gone

[annesofie]

Which version? So everything works for you now?

[Ornstrias]

I take the version from this fiddle: http://jsfiddle.net/4fq6m3dc/1/ In external resources I downloaded the leaflet.draw.js and replace mine with it I hope it'll help you

[annesofie]

Thank you!! Now it works

[Ornstrias]

You're welcome :D

[themre]

I tried using existing geojson on map and I get cannot get 'lat' of undefined: https://jsfiddle.net/Lscupxqp/31/

[bdoyle522]

I have the exact same issue as @themre. Has this been addressed in another thread?

Edit: Upgraded from v0.2.3 to v0.4.10, seems like the bug was addressed and fixed

[xiaohaiH]

在 vue3 中我碰到了这个问题, 可以给大家参考一下, 查看源码后发现绑定事件的时候也关联了传进去的 this; 当创建的 map 实例和Draw.Marker实例都用 ref 包裹时, 两个的 this 是不一样的, 导致无法注销事件 比如👇

const mapInstance = ref(L.map(dom, options));
const markerInstance = ref(new L.Draw.Marker(mapInstance.value));

markerInstance.value.enable();
// 禁用后会报错, disable 执行时 this 指向 markerInstance.value
// 而 L.Draw.Marker 在初始化的时候 this 是 Marker 实例本身, this 不一致导致事件无法被注销
markerInstance.value.disable();

[pangpanglolo]

在 vue3 中我碰到了这个问题, 可以给大家参考一下, 查看源码后发现绑定事件的时候也关联了传进去的 this; 当创建的 map 实例和Draw.Marker实例都用 ref 包裹时, 两个的 this 是不一样的, 导致无法注销事件 比如👇

const mapInstance = ref(L.map(dom, options));
const markerInstance = ref(new L.Draw.Marker(mapInstance.value));

markerInstance.value.enable();
// 禁用后会报错, disable 执行时 this 指向 markerInstance.value
// 而 L.Draw.Marker 在初始化的时候 this 是 Marker 实例本身, this 不一致导致事件无法被注销
markerInstance.value.disable();

谢谢你的回答，确实是vue3使用ref代理L 和 map 会导致draw插件报这个错误