CODEWITHSUNDEEP
javascriptuser-interfaceleafletmapsinspect
sumit kundan
sumit kundan

Reputation: 173

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

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 enter image description here

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

Upvotes: 1

Views: 2917

Answers (4)

Mostafa Abdifar
Mostafa Abdifar

Reputation: 11

I use leaflet in my angular project to fix this issue, you can observe changes to the container's visibility using a MutationObserver and call invalidateSize() to recalculate the map's dimensions:

 showMap: boolean = false; 

 const observer = new MutationObserver(() => {
 if (this.showMap) {
    setTimeout(() => this.map.invalidateSize(), 0);
    }
  });

 const container = document.querySelector('.map-container');
 if (container) {
  observer.observe(container, { attributes: true });
 }

Upvotes: 1

sumit kundan
sumit kundan

Reputation: 173

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

Upvotes: 1

StackSlave
StackSlave

Reputation: 10627

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.

Upvotes: 0

YaFred
YaFred

Reputation: 10008

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

Try 

map.invalidateSize();

Upvotes: 1

Related Questions