Leaflet: map invalidatesize not working

Question

I've been working on this all night: please don't tell me to go to google. I've read every duplicate question, all of the leaflet documentation that I can find, and just can't figure out why this isn't working. I had to change over to the new Mapquest tiles and everything is working fine except that I'm only getting one corner of my tiles to load. I know that the answer is map invalidate size. That's what worked before and that's what every article and question/answer I've read tonight says is the answer. I'm missing something obvious. Please help. Here's my script:

    <script>
$('#locModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget);
    var mapinfo = button.data('whatever');
    var pos = mapinfo.position;
    var lat = pos.substring(0,7);
    var ling = pos.substring (10,17);
    var map = L.map('mapdiv').setView([lat, ling], 6)
    var name = mapinfo.name;
    var contact = mapinfo.contact;
    var address = mapinfo.address;
    var city = mapinfo.city;
    var state = mapinfo.state;
    var zip = mapinfo.zip;
    var phone = mapinfo.phone;
    var p1 = phone.substring(0,3);
    var p2 = phone.substring(3,6);
    var p3 = phone.substring(6,10);

if (map != undefined) { map.remove(); }

window.setTimeout(function() { 
    map.invalidateSize();
}, 1000);    

 var basemap = L.map('mapdiv', {
    layers: MQ.mapLayer(),
    center: [ lat, ling ],
    zoom: 12,
     });

L.marker([lat, ling]).addTo(map);   

$("#mapModalHeader").html("<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button><h2>" + "Map to " + name + "</h2>");


$("#mapModalFooter").html("Mailing Address: " + contact + " " + address + " " + city + ", "  + state + " " + zip
    + " " + "(" + p1 + ") " + p2 + "-" + p3 );

 $('body').on('hidden.bs.modal', '.modal', function () {
   document.location.reload();
});  
 }); 
</script>

I've also tried the map invalidatesize like this:

(function() { 
    map.invalidateSize();
}, 1000);

A key function on my live website is broken and I could please use any help you can give me.

Answer 1

It is really confusing what you try to achieve…

First you initiate your map with var map = L.map('mapdiv').setView([lat, ling], 6) , then you destroy it with map.remove() , then you try to update its size after a 1 second timeout, and finally you initialize your map again but keep the reference in a different variable with var basemap = L.map('mapdiv'

So the first mistake is probably this strange succession of instructions.

Then, you could simplify your code:

• You can initialize your map as soon as the div map container ( #mapdiv in your case) is created as an HTML Element. No need for it to be shown or even to be attached to the DOM.
• You can use invalidateSize() as soon as the map container size has changed. In your case, directly within the callback of "shown.bs.modal" event (note the difference with the event you have used: "shown" vs "show" ).
• If you need to show a marker at a different position each time your modal is open, there is no need to destroy the map and re-create it from scratch just for that. Simply keep a global reference to your marker, remove it and add a new one at the new position instead.