Leaflet Map not fully loaded when i open inspect element it will load fully

Question

Below is the function which call on onclick event

function drawMapFromWms(latt,longt){    

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

     document.getElementById('hrymap').innerHTML = "<div id='map'></div>";
      map = L.map('map').setView([29.0,76.776695], 8);   


                 L.tileLayer.wms("http://example.com", {
             layers:'india3',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

          L.tileLayer.wms("http://example.com", {
             layers:'hrcm_roads',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

     var marker = L.marker([latt,longt]).addTo(map);

     $("#detail_content").css({'display':'block'});


  }

Here is the modal div which map div created

<div id="detail_content" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('detail_content').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="modal-info">
          <div id="hrymap">
    </div>
        </div>
      </div>
    </div>
  </div>
</div>

And finally function is call

Problem is when i click the button the map is loaded partially like below image

and after inspect element it will loaded fully like below image.

Possible duplicate of [Why isn't my map completely showing?](https://stackoverflow.com/questions/41742326/why-isnt-my-map-completely-showing) — peeebeee, Jan 02 '19 at 15:34

score 1 · Answer 1 · answered Jan 01 '19 at 09:58

1

As it is created on the fly, your map may not be aware of the size of its container.

Try

map.invalidateSize();

answered Jan 01 '19 at 09:58

YaFred

9,698
3
28
40

Can you reorganize your code so that your map element is created when the page loads ? this will work (https://yafred.github.io/leaflet-tests/20161209-map-in-a-dialog/) – YaFred Jan 01 '19 at 13:03
not working in this method also. dialog loaded perfetcly but map height width is not loaded fully – sumit kundan Jan 02 '19 at 05:14

score 1 · Answer 2 · answered Jan 02 '19 at 11:14

1

setTimeout(function(){ map.invalidateSize(true)}, 300);

answered Jan 02 '19 at 11:14

sumit kundan

163
2
11

StackSlave · Answer 3 · 2019-01-02T08:29:19.470

You are not initializing the map correctly. You never set the center. Pass a map options argument as your second argument. Should be like:

var map = L.map('map', {center:[29.0, 76.776695], zoom:8});

Here's the docs.

After reading your comment, I believe that it's because the CSS associated with the HTML class attribute is overriding your less specific CSS. Personally, I would just use more specific CSS, like:

div.modal-info>div#hrymap>div#map.leaflet-container{
  width:868px; height:650px;
}

instead of

#map{
  width:868px; height:650px;
}

By the way

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

and

document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

are both assignment. Why do the first one? And why not $('#hrymap').html("<div id='map'></div>")? When using jQuery, just use it.

If the CSS way doesn't work, try:

$("<div id='map'></div>").appendTo('#hrymap').css({width:'868px', height:'650px'});

Keep in mind that when using using .appendTo(), following jQuery methods will effect the jQuery selector before .appendTo(), while jQuery methods following append() would effect the append().

Of course, once again, you should create the HTML structure as much as you can, without using JavaScript. Only do things on the fly when you have to.

i did same but its not working still same problem. Map loaded fully when i open the inspect element — sumit kundan, Jan 01 '19 at 10:21
In my case map is loaded on boostrap modal may b that is creating a problem — sumit kundan, Jan 01 '19 at 10:23
when i tried to add appendTo then its give me an error identifier starts immediately after numeric literal — sumit kundan, Jan 01 '19 at 11:17
I forgot the quotes. If you are putting that in a function that is getting called on a user event you may want to use `$('#hrymap').html('')` first, so you're not appending multiples of the same div, because `.appendTo` and `.append` are like `+=`. — StackSlave, Jan 02 '19 at 08:32

Leaflet Map not fully loaded when i open inspect element it will load fully

3 Answers3