I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:
Uncaught TypeError: this._map is null Popup.js
and the error on chrome
Uncaught TypeError: Cannot read properties of null (reading '_latLngToNewLayerPoint') Popup.js
Other than this, on some instances when the error occurs, the markers on the map stop moving with the zoom animation while zooming in and out. One of the solutions was to set soomAnimation as false which I cannot do with, I need the animations on my UI. I also tried a solution to properly unwrap / unproxy this.map before using it with Leaflet where I changed all the this.map instances in my script to toRaw(this.map) but the error still persists.
L.geoJSON(geoJson, {
onEachFeature: function (feature, layer) {
self.onEachFeature(feature, layer);
layer.on({
click: self.clickMarker,
});
},
}).addTo(self.markerLayer);
self.markerLayer.addTo(toRaw(self.map));
I have tried updating Leaflet too but nothing works. Please Help
You probably need to do the same unwrapping process whenever you refer to an object that you also store in your Vue3 component state, like self.markerLayer, and similarly if you use those within your self.onEachFeature and self.clickMarker methods.