Leaflet map shows grey areas even the layer is added

Question

My leaflet map shows grey tiles. I added the layer also. This is how it shows

<div class="col-md-5">
   <div id="mainMap" style="height: 400px"></div>
</div>

const mainMap = new L.map("mainMap", {
    doubleClickZoom: false,
    zoomControl: false,
}).setView([34.543896, 64.160652], 6);
const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 6,
        attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    });
    mainMap.addLayer(osm);

Load the map after the page is loaded, or called `map.invalidateSize();` after it's loaded. — Frank, Nov 09 '20 at 05:04
Have you tried this: https://stackoverflow.com/questions/21405189/leaflet-map-shows-up-grey — nAviD, Nov 09 '20 at 05:34
Does this answer your question? [leaflet map shows up grey](https://stackoverflow.com/questions/21405189/leaflet-map-shows-up-grey) — IvanSanchez, Nov 09 '20 at 15:36

score 0 · Answer 1 · answered Nov 10 '20 at 10:03

Remember to include CSS files:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""
/>

This should work for you.

Leaflet map shows grey areas even the layer is added

1 Answers1