Search code examples
javascriptmapsleaflet

Why is the map layer in Leaflet.js not appearing?

I'm trying to create a map and thought Leaflet.js provided a simple method for a non-developer to illustrate some data I want to plot.

You can see the results here:

http://www.thisisstaffordshire.co.uk/images/localpeople/ugc-images/275796/binaries/WarGraves3.html

The data points land just as they need to, but the underlying map doesn't show. Why might this be?

I've got an API key but the map layer doesn't appear to load.

What have I done wrong?

Solution

  • The underlying map is drawn but the tiles are getting mixed up. (You can see this when you zoom out of the map.) You mixed up the tiling parameters of the CloudMade URL. You have:

    http://{s}.tile.cloudmade.com/{your-key}/997/256/{x}/{y}/{z}.png

    But it should be:

    http://{s}.tile.cloudmade.com/{your-key}/997/256/{z}/{x}/{y}.png

    This is important because the parameters specify the tile that is loaded by the URL. Z is the zoom level. X and Y the appropriate tile.