Issue with Leaflet and Leaflet Draw: Uncaught TypeError: Cannot read property of undefined (read 'length') in vue-leaflet.draw.js? 20d6:8

Question

mounted() {
 this.initMap();
},
methods: {
initMap() {
  this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12);
  this.tileLayer = L.tileLayer(
      "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
      {
        attribution: '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: "mapbox/satellite-streets-v11",
        accessToken: "token",
      }
  );
  this.tileLayer.addTo(this.map);
  var drawnItems = new L.FeatureGroup();
  this.map.addLayer(drawnItems);
  var drawControl = new L.Control.Draw({
    edit: {
      featureGroup: drawnItems
    }
  });
  this.map.addControl(drawControl);

  this.map.on(L.Draw.Event.CREATED, function(event){
    let layer = event.layer;
    console.log(`start ${layer}`);
    drawnItems.addLayer((layer))
  })
 },
},
}

leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read property of undefined (read 'length')

After interacting with the map for the first time, an error appears in the console and the shape can no longer be drawn

UPD: Switch to mapbox drawing

Answer 1

I used similar code to draw polygons on a basemap and had similar issues using Vue3 with leaflet and leaflet drawing. After drawing the polygon, I get a bunch of errors in the console, probably triggered by mouseover events.

Uncaught TypeError: this._markers is undefined
in leaflet-draw.js:162:18

The root cause of the issue has not been found, but the reason may be that leaflet-draw no longer conforms to the Leaflet base library (just a guess). The last commit to Github is from 2018, and there is a long list of issues and open pull requests, while Leaflet itself is constantly being updated.

This problem may also occur when using this library with Vue.

Have you tried creating the above functionality using Vanilla JS?

Answer 2

This is how I solved the problem. Instead of Leaflet, Using MapBox and MapBox drawing works in Vue 3