leaflet map shows up grey

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);

JavaScript
​x
 
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;
}

JavaScript
 
#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>

JavaScript
 
<!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

Answer

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.

Advertisement

Answer