3

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 '16 at 13:25
  • Yes solution worked doing like this:. $("#closeMap").click(function(){ map.invalidateSize(); $("#map").hide(); $("#closeMap").hide(); }); $("#closeMap").hide(); – poshan May 4 '16 at 2:25
3

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 '15 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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