I am loading a leaflet map rendering mapbox tiles, geojson layers (initially i dont show the map) and i also have tabular links which can be seen when the page loads, the links are list of places and when I click a certain location it opens the map and zooms to the coordinates associated with it. I used following to do so <div id = "map"></div> <div id = "closeMapDiv"> <button id = "closeMap">Close Map</button> </div> <script> $("#map").hide(); $("#closeMap").hide(); function showOnMap(a,b){ $("#map").show("slow"); $("#closeMap").show(); // var loc = L.latLng(b,a); // var z = 7; // map.setView(loc, z); } </script>

The function showOnMap is executed once we click the link, the result is something like this Can see tiles on the top left corner only. The tiles can be seen on the top left corner only.

The strange thing is when i open the browser's console or change the zoom level of browser the map comes in right place. I must have done something stupid, i am unable to find out please help me figure out. Here is the code.

  • Have you solved this problem?
    – lcguida
    May 2, 2016 at 13:25
  • Yes solution worked doing like this:. $("#closeMap").click(function(){ map.invalidateSize(); $("#map").hide(); $("#closeMap").hide(); }); $("#closeMap").hide();
    – poshan
    May 4, 2016 at 2:25

2 Answers 2


Try to call map.invalidateSize() after changing the map div's size/visibility: http://leafletjs.com/reference.html#map-set-methods

  • Thanks @christoph looks like it works in some way. But still it is working only on second load of map i.e. only after I click the same link twice or click another link. The first load is still showing same result.
    – poshan
    Jul 4, 2015 at 10:32

Just arraging the code so that the #map element gets styled before the JavaScript should solve the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.