leandro713 leandro713 - 5 months ago 587
Javascript Question

refresh leaflet map: map container is alreay initialized

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 conflictive line is

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


initially it loads well, but when i select another parameters in the form and want to display the map another time it crash.

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

Answer

Html:

<div id="weathermap"></div>

JavaScript:

function buildMap(lat,lon)  {
    document.getElementById('weathermap').innerHTML = "<div id='map' style='width: <?php echo $this->width; ?>; height: <?php echo $this->height; ?>;'></div>";
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                        ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    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);
}

I use this:

document.getElementById('weathermap').innerHTML = "<div id='map' style='width: <?php echo $this->width; ?>; height: <?php echo $this->height; ?>;'></div>";

to reload content of div where render map.

Comments