Leaflet map url is forbidden

5
votes

I'm trying to create a jquery mobile phonegap app and I want to use leaflet maps embedded in it. I'm doing a pretty basic proof-of-concept at the moment, but I'm not having much luck. Every time I try to load the map, the .png of the map doesn't load and the console tells me its Forbidden. I think I'm probably setting up the map URL wrong, but the documentation is a little fuzzy on the CloudMade website. Any help you can provide would be greatly appreciated.

Code:

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/MY_APP_KEY/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
map.addLayer(cloudmade);

map.locateAndSetView(16);

map.on('locationfound', onLocationFound);

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    var marker = new L.Marker(e.latlng);
    map.addLayer(marker);
    marker.bindPopup("You are within " + radius + " meters from this point").openPopup();

    var circle = new L.Circle(e.latlng, radius);
    map.addLayer(circle);
}

map.on('locationerror', onLocationError);

function onLocationError(e) {
    alert(e.message);
}

When I try to load the image, I get the following error: GET http://a.tile.cloudmade.com/MY_APP_KEY/997/256/0/0/0.png 403 (Forbidden). Obviously I'm replacing MY_APP_KEY with my key that I got from CloudMade, but other than that, I'm not sure where else to turn.

Thanks in advance for the help.

2
jquerymobilecloudmadeleaflet

2 Answers

5
votes

Providing the Cloudmade API key is mandatory but not sufficient. You also have to provide a token that you will have to request for each user and device. As described in Cloudmade Authorization API doc the token can be retrieved by a simple POST :

POST http://auth.cloudmade.com/token/APIKEY?userid=UserID&deviceid=DeviceID

This will give you a token that you have to append to the tiles url to authenticate on cloudmade servers :

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/MY_APP_KEY/997/256/{z}/{x}/{y}.png?token=TOKEN'

For a quick proof of concept however, you can directly use their own API key which do not need authentication token :

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/997/256/{z}/{x}/{y].png
1
votes

Looks like the geolocation method isn't working and so it tries to load image 0, 0, 0 because you have not defined any co-ordinates.

Can you try to set some default options (i.e.) in your top line like so:

var options ={
  center: new L.LatLng(37.7, -122.2),
  zoom: 10
};

var map = new L.Map('map', options);

This should at least default the map to San Francisco so you can determine whether the tiles are loading appropriately.

JSFiddle: http://jsfiddle.net/peBZp/

It's possible that leaflet has an issue with geolocation and phonegap. You can try following the docs at: http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html and just set the options variable above with the lat/long returned by that function instead of using leaflet's built in method.

Hope that helps.