refresh leaflet map: map container is already initialized

javascript leaflet
leandro713 picture leandro713 · Oct 4, 2013 · Viewed 109.4k times · Source

I have a page where given a select to the user he can switch the leaflet map I show.

After a initial leaflet map load, my problem is when i want to refresh the map.

I always get "Map container is already initialized":

The problem line is:

var map = L.map('mapa').setView([lat, lon], 15);

Initially it loads well, but when I select another parameter in the form and want to display the map another time it crashes.

btw, I've tried to destroy and recreate $('#mapa') with jQuery before the second setView() but it shows the same error.

Answer

Josh picture Josh · Oct 5, 2013

Try map.remove(); before you try to reload the map. This removes the previous map element using Leaflet's library (instead of jquery's).

Related questions

How to change the map center in Leaflet.js

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function? function initialize() { map = L.map(…

Read More
How to reference static assets within vue javascript

I'm looking for the right url to reference static assets, like images within Vue javascript. For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found): Main.…

Read More
Marker in leaflet, click event

var map = L.map('map'); var marker = L.marker([10.496093,-66.881935]).on('click', onClick); function onClick(e) {alert(e.latlng);} marker.addTo(map) When I do click in the marker, the alert message is: undefined But if I put it in …

Read More