Leaflet map url is forbidden

Question

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.

score 5 · Answer 1 · answered Nov 30 '13 at 04:51

5

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

answered Nov 30 '13 at 04:51

Fabien Quatravaux

3,737
2
27
33

I ran into the same issue, and your answer helped. I crafted a one-off POST request, got the token, and hard coded it into my application (www.twincitiesbikemap.com). However, how can I do this with jQuery? I can't get $.post to work because of Access-Control-Allow-Origin (though I set my page to *), and I can't use jsonp since it needs to be a POST. Can this be done with javascript/jQuery? – Ehryk Mar 10 '14 at 08:46
I think you should not retrieve the token on the client-side. You should make the POST request from your own server (using PHP or whatever language you like) and then pass the token to your client-side application. By the way, having different tokens is only useful when you want to monitor the API usage for different users or devices. If you don't need that (e.g. when your users are anonymous), hardcoding the token is just fine. – Fabien Quatravaux Mar 10 '14 at 13:33
I'm using ASP.NET hosting, but only to serve the web pages - they're just static .html files. Since I'm not 'officially' using any server side code, other than using IIS as a web server, I would have to write some just to do a post request. Is there any way to do it client-side, despite the fact it should probably not be done that way? – Ehryk Mar 10 '14 at 17:34

score 1 · Answer 2 · answered Jul 18 '12 at 15:33

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.

just did a quick copy and paste (literally glanced over this code) and a map of SF appeared just fine. — hellatan, Jul 25 '13 at 12:45

Leaflet map url is forbidden

2 Answers2

Linked