Leaflet.draw icon indicating copy to clipboard operation
Leaflet.draw copied to clipboard

Error when drawing polygon: Cannot read property 'x' of undefined

Open demesiooliveira opened this issue 2 years ago • 0 comments

Hi guys, I'm trying to add the leaflet draw in VueJS 3 but when I create a drawing the leaflet returns the error Cannot read property 'x' of undefined

  • [ ] I'm reporting a bug, not asking for help
  • [X] I've looked at the documentation to make sure the behaviour is documented and expected
  • [ ] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
  • [X] I've searched through the issues to make sure it's not yet reported

How to reproduce

  • Leaflet version I'm using: "leaflet": "^1.6.0", vue-leaflet": "^0.6.1",
  • Leaflet Draw version I'm using: "leaflet-draw": "^1.0.4",
  • Browser (with version) I'm using: Google Chrome Versão 92.0.4515.131 (Versão oficial) (x86_64)
  • OS/Platform (with version) I'm using: macOS Catalina

What behaviour I'm expecting and which behaviour I'm seeing

Uncaught TypeError: Cannot read property 'x' of undefined
    at Proxy.intersects (app.js:32431)
    at Proxy._clipPoints (app.js:39706)
    at Proxy._update (app.js:39751)
    at Proxy._reset (app.js:39250)
    at Proxy.onAdd (app.js:39195)
    at Proxy._layerAdd (app.js:37950)
    at Proxy.whenReady (node_modules_leaflet_dist_leaflet-src_esm_js.js:4512)
    at Proxy.addLayer (node_modules_leaflet_dist_leaflet-src_esm_js.js:6713)
    at Proxy.addVertex (app.js:31161)
    at Proxy._endPoint (app.js:31161)

Minimal example reproducing the issue

<l-map id="mapView" :zoom="zoom" @ready="onReady" ref="map" >
    <l-tile-layer :url="url"></l-tile-layer>
</l-map>

import "leaflet-draw";
import "leaflet-draw/dist/leaflet.draw.css";

onReady(mapObject) {
    mapObject.locate();

    this.drawControl = new L.Control.Draw({
        draw: {
            polyline: false,
            polygon: true,
            circle: false,
            marker: false,
            circlemarker: false,
            rectangle:false
        }
    });
    
    mapObject.addControl(this.drawControl);
},
  • [X] this example is as simple as possible
  • [X] this example does not rely on any third party code

Has anyone been through this, could you help me?

demesiooliveira avatar Aug 19 '21 21:08 demesiooliveira