Leaflet: Error: Map Container Is Already Initialized
refreshing a leaflet map giving Error: Map Container Is Already Initialized
bibeputt
All 20 comments
Sounds like you are trying to re-init an existing map... The issues boards here is more for working through bugs and suggestions of new features. StackOverflow(http://stackoverflow.com/questions/tagged/leaflet) is a better place for troubleshooting your usage of the library. If you do believe this is from a bug, post your example case in a JSFiddle or another demo site.
snkashis
on 26 Oct 2015
Looks like issue is related to implementation in MVVM and not a bug. Will try to search some MVVM examples using leaflet.
bibeputt
on 26 Oct 2015
same issue here... what could it be?
ralexrdz
on 22 Dec 2015
@ralexrdz perhaps a container that you initialize more than once?
mourner
on 22 Dec 2015
@mourner The html is basically html head loading js and css and a div with id="map". And the only js that I have is
map.setView([19.34, -99.15], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapboxMapId,
accessToken: 'mapboxAccessToken'
}).addTo(map);
How could that be that a container is initialize before?
ralexrdz
on 23 Dec 2015
i am having the same issue, i am using leaflet in React
epicallan
on 7 Jan 2016
That'll be a react-leaflet bug probably @epicallan
danzel
on 10 Jan 2016
@danzel i am using react, its react-leaflet bug, just did some hacky work arounds
epicallan
on 11 Jan 2016
@epicallan Can you please explain what you did? I have the same issue with React and Leaflet.
srflorea
on 16 Jun 2016
Before initializing map check for is the map is already initiated or not
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}
Dipinrajc
on 26 Apr 2018
@Dipinrajc With this method your not available to drag with mouse on the map.
adrielstar
on 2 May 2018
Any ideia how to drag map again with mouse @adrielstar ?
fillipefeitosa
on 20 Dec 2018
I us this @fillipefeitosa .
HTML:
< div id="map" >< /div>
render map:
document.getElementById('map').innerHTML = "< div id='map' style='width: 100%; height: 100%;'>
to reload content of div where render map.
Hoop this will help you too
adrielstar
on 21 Dec 2018
Thanks friend, but that did not work. It replaced my var map with the div and map not loads
fillipefeitosa
on 26 Dec 2018
Before initializing map check for is the map is already initiated or not
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}
is there an existent leaflet method for this?
enzojimenez
on 9 May 2019
same problem with me :(
mohafouad
on 20 May 2019
Before initializing map check for is the map is already initiated or not
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}is there an existent leaflet method for this?
@enzojimenez , You can create one method for this as I have created below
function initializingMap() // call this method before you initialize your map.
{
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}
}
SyedAkmal
on 11 Jun 2019
Para resolver el problema, define:
import * as Map from 'leaflet';
@ViewChild('map') mapElement: ElementRef;
map: Map.Map;
this.map = Map.map(this.mapElement.nativeElement, {
maxZoom: 18
});
Solucion aquí: https://www.designlimbo.com/leaflet-ionic-3-and-map-container-is-already-initialized/
josuelmm
on 25 Sep 2019
as said here, this would be the best way of doing it:
if (map != undefined) {
map.remove();
}
amin-setayeshfar
on 24 Dec 2019
Before initializing map check for is the map is already initiated or not
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}
You are an Angel
MRVirus007
on 28 Sep 2020
Related issues
JonnyBGod
·
4Comments
jblarsen
·
3Comments
CallMarl
·
3Comments
onethread
·
3Comments
piehei
·
3Comments
Most helpful comment
Before initializing map check for is the map is already initiated or not
var container = L.DomUtil.get('map');
if(container != null){
container._leaflet_id = null;
}