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

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

• javascript
• leaflet
• vuejs3

2 Answers 2

We also ran into this issue, but we were using the position api with refs.

As a ref creates a deep-reactive object by default, using it for the leaflet root element or e.g. a marker cluster, many listeners will be registered, resulting in performance issues and therefore the marker freezes and console errors (_map is null) occur.

Our solution to this was using shallowRef for leaflet objects we needed to track in our app and plain JS variables for non-tracked objects.

As the vue docs state:

shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.

You probably need to do the same unwrapping process whenever you refer to an object that you also store in your Vue3 ponent state, like self.markerLayer, and similarly if you use those within your self.onEachFeature and self.clickMarker methods.