Menu
I am trying to show leaflet on my website and it just will not show, I am following the simple tutorial from http://leafletjs.com/examples/quick-start.html and the tiles do not load just get a gray map, this is what I have on my page
<head>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<style type="text/css">
#map {
height: 180px;
width: 500px;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/API-key/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
maxZoom: 18
}).addTo(map);
</script>
</body>
Thats it the map does not show only a gray area has anybody gotten this to work? I am using internet explorer 10 but the map does not show o firefox or chrome either.
956
Sure. You have to take an API key from a tile service.
var map = L.map('map').setView([36.7667, 13.5833], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/74b831354f3554faa108ac65e3/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
var marker = L.marker([36.752866, 13.556323]).addTo(map);
Please notice 74b831354f3554faa108ac65e3. It's not going to work for you.
You can use this service to get a API KEY
EDIT 27 APR 2014: CloudMade is not free anymore. You can use: MapQuest, MapSurfer.NET or openstreetmap.de
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
