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.

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

2 Answers 2

Reset to default
3

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

Improve this answer
1
  • 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. Commented Jul 4, 2015 at 10:32
1

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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.