Leaflet: Error: Map Container Is Already Initialized

[bibeputt]

refreshing a leaflet map giving Error: Map Container Is Already Initialized

[snkashis]

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.

[bibeputt]

Looks like issue is related to implementation in MVVM and not a bug. Will try to search some MVVM examples using leaflet.

[ralexrdz]

same issue here... what could it be?

[mourner]

@ralexrdz perhaps a container that you initialize more than once?

[ralexrdz]

@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?

[epicallan]

i am having the same issue, i am using leaflet in React

[danzel]

That'll be a react-leaflet bug probably @epicallan

[epicallan]

@danzel i am using react, its react-leaflet bug, just did some hacky work arounds

[srflorea]

@epicallan Can you please explain what you did? I have the same issue with React and Leaflet.

[Dipinrajc]

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;
}

[adrielstar]

@Dipinrajc With this method your not available to drag with mouse on the map.

[fillipefeitosa]

Any ideia how to drag map again with mouse @adrielstar ?

[fillipefeitosa]

Thanks friend, but that did not work. It replaced my var map with the div and map not loads

[enzojimenez]

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?

[mohafouad]

same problem with me :(

[SyedAkmal]

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;
}
}

[josuelmm]

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/

[amin-setayeshfar]

as said here, this would be the best way of doing it:
if (map != undefined) { map.remove(); }

[MRVirus007]

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