refresh leaflet map map container is already initialized

Question

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

User · Answer

For refresh leaflet map you can use this code  this map fitBounds this map getBounds

User · Answer

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       It works for me

User · Answer

Html    lt div id  weathermap  gt  lt  div gt    JavaScript   function buildMap lat lon         document getElementById  weathermap   innerHTML     lt div id  map  style  width  100   height  100    gt  lt  div gt        var osmUrl    http    s  tile openstreetmap org  z   x   y  png                       osmAttribution    Map data     lt a href  http   openstreetmap org  gt OpenStreetMap lt  a gt  contributors                                lt a href  http   creativecommons org licenses by-sa 2 0   gt CC-BY-SA lt  a gt        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     lt div id  map  style  width  100   height  100    gt  lt  div gt      to reload content of div where render map

User · Answer

We facing this issue today and we solved it  what we do    leaflet map load div is below    lt div id  map container  gt      lt div id  listing map  class  right listing  gt  lt  div gt   lt  div gt    When form input change or submit we follow this step below  after leaflet map container removed in my page and create new again        map container    html        append    lt div id  listing map  class  right listing  gt  lt  div gt        After this code my leaflet map is working fine with form filter to reload again   Thank you

User · Answer

the best way  map off    map remove      You should add map off    it also works faster  and does not cause problems with the events

User · Answer

If you don t globally store your map object reference  I recommend if  L DomUtil get  map-canvas       undefined        L DomUtil get  map-canvas    leaflet id   null       where  lt div id  quot map-canvas quot  gt  lt  div gt  is the object the map has been drawn into  This way you avoid recreating the html element  which would happen  were you to remove   it

User · Answer

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

User · Answer

I had same problem then i set  globally map variable e g  var map  null and then for display map i check   if map  null then map new L Map  idopenstreet   setView      By this solution your map will be initialize only first time after that map will be fill by L Map then it will not be null  so no error will be there like map container already initialize

User · Answer

if you want update map view  for example change map center  you don   t have to delete and then recreate the map  you can just update coordinate  const mapInit        gt     let map current   w L map  map      L tileLayer  http    s  tile osm org  z   x   y  png         attribution    amp copy   lt a href  http   osm org copyright  target   blank  gt OpenStreetMap lt  a gt  contributors      addTo map current      const setCoordinate    gps lat  gps long    gt      map setView  gps lat  gps long   13      initMap     setCoordinate 50 403723 30 623538    setTimeout      gt      setCoordinate 51 505  -0 09      3000

User · Answer

Only use this  map invalidateSize      https   github com Leaflet Leaflet issues 690

User · Answer

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

User · Answer

For refreshing map in same page you can use below code to create a map on the page if   map        this map   new L map  quot mapDiv quot             center   24 7136  46 6753           zoom  5          renderer  L canvas            attributionControl  true             then use below line to refresh the map  but make sure to use same latitude  longitude and zoom options map setView  24 7136  46 6753   5      Also  I had the same issue when switching between tabs in the same page using angular 2   and I was able to fix it by adding below code in Component constructor var container   L DomUtil get  mapDiv    if  container    null        container outerHTML    quot  quot      Clear map generated HTML        container  leaflet id   null   lt  lt  didn t work for me

User · Answer

I had the same problem on angular when switching page  I had to add this code before leaving the page to make it works        scope  on   locationChangeStart   function  event         if map    undefined              map remove          map   undefined       document getElementById  mapLayer   innerHTML                   Without document getElementById  mapLayer   innerHTML      the map was not displayed on the next page

User · Answer

When you just remove a map  it destroys the div id reference  so  after remove   you need to build again the div where the map will be displayed  in order to avoid the  Uncaught Error  Map container not found    if map    undefined    map    null       map remove           map   html             preMap   empty            lt div id   map   style   height  500px    gt  lt  div gt     appendTo   preMap

User · Answer

use the redrawAll   function rather than renderAll

User · Answer

well  after much seeking i realized it s well documented at http   leafletjs com examples layers-control html  i ve ended not repainting the map  but print it once and repaint the points on each new ajax call  so the problem was how to clean up the old points and print  only the new ones  i ve ended doing this   var point   L marker  new marker 0   new marker 1    addTo map  bindPopup  blah blah    points push point      points is a temporary array where i store the points for removing them afterwards   so  at each new ajax call  before painting the new points  i do the following   for  i 0 i lt points length i        map removeLayer points i      points       so far  so good  -

User · Answer

What you can try is to remove the map before initialising it or when you leave the page   if this map      this map remove

[javascript] refresh leaflet map: map container is already initialized

Examples related to javascript

Examples related to leaflet