loading leaflet map in ajax loaded page renders no tiles? - leaflet

Question

Hi I´m doing a phonegap app that loads my subpages with ajax and in one off them I´m trying to load a leaflet map.
It is not rendering the tiles?
I don´t know what I´m missing?
I load the leaflet css and js file in my index file and in my subpage that should display the map I have the following code:
<div id="themappage">
<div id="header" class="toolbar">
<h1>The Map</h1>
BACK
</div>
<div id="map"></div>
<script>
$(document).ready(function(){
var map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d/997#2x/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade'
}).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
});
</script>
</div>
Any input appreciated, thanks.
Update!
Just found out if I use http://{s}.tile.osm.org/{z}/{x}/{y}.png instead off http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d/997/256/{z}/{x}/{y}.png as the tile layer then it renders the tiles, why doesn´t the tiles from cloudemade render?

Answer 1

When I tried to load it, I got a 403 (Forbidden) error using that API-Key. Try to get another one (you did request your own right?). The reason that the OSM works is that it doesn't require an API-Key.
The API-Key is the part of the url that starts with 42dfb... and goes to the /. Replace that with a good key and you should be good to go.