leaflet map shows up grey

Question

I'm starting leaflet.js with the quickstart but my map shows as grey... is there something I'm missing?

script.js:

var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.title.cloudmade.com/' + API_KEY + '/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; [...]',
        maxZoom: 18
}).addTo(leafletMap);

// marker
var marker = L.marker([51.5, -0.09]).addTo(leafletMap);

style.css:

#leafletMap {
height: 200px;
width: 200px;
}

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>

    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/leaflet.css'>
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="leaflet.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div id='leafletMap'></div>

<script src='js/libs/jquery-1.10.2.js'></script>
<script src='js/libs/bootstrap.js'></script>
<script src='js/libs/leaflet-src.js'></script>
<script src='js/config.js'></script>
<script src='js/script.js'></script>
</body>
</html>

Gives me:

enter image description here

score 61 · Accepted Answer · answered Jan 28 '14 at 14:41

61

You need to implement the next section of the Quick Start Guide: you've initialized the map, but haven't added any tile layers to it, hence gray. So read on to the section beginning with Next we’ll add a tile layer to add to our map.

answered Jan 28 '14 at 14:41

tmcw

11,536
3
36
45

1

Solution: it was a typo: `http://{s}.title.cloudmade.com/'` should be--> `http://{s}.tile.cloudmade.com/'` – Connor Leech Jan 29 '14 at 12:18
23

+1 for helping the leaflet tutorial, which needs to put the first 'demo' after the tile layer code. Its placement not only alongside but above `var map = L.map('map').setView([51.505, -0.09], 13);` gives the illusion that the map should be working at that point. – interpolack Jun 29 '15 at 15:49
2

You can add an example code to do this in the answer: `L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA'}).addTo(map);` – Mosh Feu Jul 02 '19 at 09:26

score 17 · Answer 2 · answered Jan 03 '21 at 22:35

17

try this when page load;

setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
}, 1000);

answered Jan 03 '21 at 22:35

Amazon

406
5
14

1

this actually helped me a lot. In most cases I believe it would be OK to omit the arbitrary delay, just putting it right after current thread execution. – hvsp May 19 '21 at 11:18
1

That solved it for me.. only a small tile is loaded from the api making 90% of the map gray, when i resize the window leaflet calls the api asking for more tiles, so this "hack" makes leaflet complete itself. Thanks!! – nunoh123 Nov 29 '21 at 00:24
Note the delay was necessary in my case. Works with a delay. Does not without it. – Frikster Apr 19 '22 at 05:58

elMarquis · Answer 3 · 2018-02-11T22:58:58.907

10

Another thing to watch.

If you check the network tab and the map tiles are loading ok, yet the map still remains grey, it can be due to CSS contamination from your surrounding page.

In my case it was:

img {
    max-height: 100%;
}

Fixed by overriding with:

.my-leaflet-map-container img {
    max-height: none;
}

edited Feb 11 '18 at 22:58

answered Dec 12 '17 at 01:26

elMarquis

7,450
4
38
42

This worked, thanks for the help really couldn't figure out why it was not working – Smac Jul 03 '20 at 13:14

Nate Anderson · Answer 4 · 2020-09-27T18:14:38.393

You must style your map-container to have a nonzero height. In my case I linked to my CSS file too late; at the bottom of my <body> tag.

So my map container; <div id="map"></div>, probably had a height of 0px at the time it loaded.

This means the map and its tiles tried to load into 0px height. I suspect this produces a small tile "buffer"; everything outside the buffer zone was grey.

To fix it, I referenced my CSS file in the <head>. Referencing the CSS file in <head> does both:

a good practice
allows the styles to apply before the map tried to load

UPDATE

Don't forget to link the Leaflet CSS file (if you haven't already). Otherwise your tiles may appear "mismatched"/staggered.

<link rel="stylesheet" 
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>

Another solution is to modify the style attribute of your map-container directly in HTML (i.e. CSS inline in HTML). I personally prefer my CSS to exist in a separate CSS file.

score 1 · Answer 5 · answered Feb 05 '18 at 06:02

For my ionic app this was resolved by setting trackResize: false in my map configuration. This was only happening on Android and called by a setTransform function in the Leaflet source code that's only called on Android.

Leaflet.map('map', { trackResize: false })

score 1 · Answer 6 · answered Aug 16 '18 at 03:07

Did you set a value for API_KEY in your code?

When I first ran the quickstart I was also confused why my map was grey, but I just realised I'd forgotten to retrieve an API access code (in my case, it was for Mapbox's service.)

Your URL line references API_KEY but you don't seem to be declaring it.

score 1 · Answer 7 · answered Mar 08 '21 at 12:53

You need to add a tile layer, here example form Open Street Maps

// initialize Leaflet
var map = L.map('map').setView({lon: 0, lat: 0}, 2);

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);

#map {height: 280px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />

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

score 0 · Answer 8 · answered Jul 13 '19 at 00:44

The notes by elMarquis are useful if you've a problem when embedding inside something else. In my case I was using Gravity Forms on Wordpress, and they have image styles that have a wide scope, and are also set to important.

I'm still chasing the ultimate fix, but this should get you started if you have discovered the same issue:

<style>
    #map { position: inherit; top:0; bottom:0; right:0; left:0; width:100%; height:300px;}
    .gform_wrapper ul li.gfield.gfield_html .leaflet-container img { max-width: none!important;}
  </style>

leaflet map shows up grey

8 Answers8

Linked