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
.
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.
