I am using Leaflet.js in my Vue.js 3 project. In my application as the user navigates the map, new layers are loaded if they exist at that location and I would like the old layers to be deleted if new information is found at the current location. The error that Leaflet pointed out happens when zooming with an open PopUp, showing:
Cannot read properties of null (reading '_latLngToNewLayerPoint')
I wonder if it is possible to fix this bug without disabling the zoom animation and without changing the internal files of the leaflet library.
Quoted code snippet:
getContributionsAndEMSI: _.debounce(async function (x, y) {
let result = await contribution.index(x, y);
if (result.success) {
this.contributions = result.contribution;
}
if (this.contributions.length && this.layers.length) {
this.layers.forEach((l) => {
this.map.removeLayer(l);
});
}
// Visualização de Contribuições
this.contributions.forEach((el) => {
const data = '<strong>Colaboração de Usuário</strong><br><hr><br>'
+ `<strong>Categoria:</strong> ${el.category_name}<br>`
+ `<strong>Data de ocorrência:</strong> ${el.occurrence || 'Não Informado'}<br>`
+ `<strong>Vítimas:</strong> ${el.victims ? 'Sim' : 'Não'}<br>`
+ `<strong>Risco de danos:</strong> ${el.risk_damage ? 'Sim' : 'Não'}<br>`
+ `<strong>Descrição:</strong> ${el.desc || 'Não Informado'}<br>`;
if (wkt.parse(el.local).type === 'Point') {
this.layers.push(
L.marker(wkt.parse(el.local).coordinates).addTo(toRaw(this.map)).bindPopup(data),
);
}
if (wkt.parse(el.local).type === 'Polygon') {
this.layers.push(
L.polygon(wkt.parse(el.local).coordinates).addTo(toRaw(this.map)).bindPopup(data),
);
}
if (wkt.parse(el.local).type === 'LineString') {
this.layers.push(
L.polyline(wkt.parse(el.local).coordinates).addTo(toRaw(this.map)).bindPopup(data),
);
}
});
});
}, 2000), // Espera 2 segundos pra mandar a requisição