Actualiser la carte leaflet : le conteneur de la carte est déjà initialisé

Question

J'ai une page où, en fournissant une sélection à l'utilisateur, il peut changer la carte Leaflet que je montre.

Après le chargement initial de la carte Leaflet, mon problème survient lorsque je veux rafraîchir la carte.

Je reçois toujours le message "Container de carte déjà initialisé" :

La ligne posant problème est :

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

Initialement, ça se charge bien, mais lorsque je sélectionne un autre paramètre dans le formulaire et que je veux afficher la carte une autre fois, ça plante.

Au fait, j'ai essayé de détruire et de recréer $('#mapa') avec jQuery avant le deuxième setView() mais cela affiche la même erreur.

Answer 1

Essayez map.remove(); avant de recharger la carte. Cela supprime l'élément de carte précédent en utilisant la bibliothèque Leaflet (au lieu de celle de jquery).

Answer 2

La meilleure façon

map.off();
map.remove();

Vous devriez ajouter map.off(), cela fonctionne également plus rapidement et ne pose pas de problèmes avec les événements

Answer 3

Html:

JavaScript:

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © OpenStreetMap contributors,' +
                        ' CC-BY-SA',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    var map = new L.Map('map');
    map.setView(new L.LatLng(lat,lon), 9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);
}

J'utilise cela :

document.getElementById('weathermap').innerHTML = "";

pour recharger le contenu de la div où la carte est affichée.

Answer 4

Avant d'initialiser la carte, vérifiez si la carte est déjà initiée ou non

var container = L.DomUtil.get('map');
      if(container != null){
        container._leaflet_id = null;
      }

Answer 5

Utilisez seulement ceci

map.invalidateSize();

https://github.com/Leaflet/Leaflet/issues/690