Monday, June 3, 2024
161
rated 0 times [  168] [ 7]  / answers: 1 / hits: 42897  / 11 Years ago, tue, january 28, 2014, 12:00:00

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 © [...]',
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


More From » openstreetmap

 Answers
7

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.


[#72896] Monday, January 27, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
alysas

Total Points: 616
Total Questions: 111
Total Answers: 124

Location: Slovenia
Member since Wed, Apr 6, 2022
2 Years ago
alysas questions
Sun, Jul 19, 20, 00:00, 4 Years ago
Tue, Jun 23, 20, 00:00, 4 Years ago
Mon, Mar 30, 20, 00:00, 4 Years ago
;