CODEWITHSUNDEEP
leaflet
user6877257
user6877257

Reputation: 45

Leaflet map does not show up properly. Partially grey.

I have tried my best to take solutions here from diverse answers but my problem remains. The map does not show up properly. A grey frame is taking almost 3/4 of the frame. How the map shows up 

<div id="map"></div>

<script>

 var map = L.map('map',{scrollWheelZoom: false});
 map.setView(<%= @location.latlng %>, 16);
 marker = L.marker(<%= @location.latlng %>).addTo(map);
 L.tileLayer('http://a.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: 'Your attribution statement',
                      maxZoom: 20,
                      subdomains: '',
                      }).addTo(map)
$(document).ready(function(){
    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
</script>

Upvotes: 3

Views: 4163

Answers (1)

ghybs
ghybs

Reputation: 53360

See Data-toggle tab does not download Leaflet map.

You probably need a longer delay before calling map.invalidateSize(). Ideally listen to the event that opens your map container to its correct size.

Upvotes: 4

Related Questions