Leaflet

Leaflet is a fantastic JavaScript mapping library, targeted firmly at modern browsers.

Adding a Thunderforest tile layer in Leaflet is straightforward and doesn’t need many lines of code. Here is the code to describe a layer:

Adding a Thunderforest map layer

var tileUrl = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=<insert-your-apikey-here>',
layer = new L.TileLayer(tileUrl, {maxZoom: 18});

You can of course customise the URL depending on which of our different map styles you want to use.

Full example

Here, in slightly more detail, is an example of how to include a leaflet-based map into your page.

// initialize the map on the "map" div with a given center and zoom
var map = new L.Map('map', {
  center: new L.LatLng(51.46, -0.205),
  zoom: 15
});

// create a new tile layer
var tileUrl = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=<insert-your-apikey-here>',
layer = new L.TileLayer(tileUrl, {maxZoom: 18});

// add the layer to the map
map.addLayer(layer);

For more details on Leaflet, see http://leafletjs.com/

Retina Tiles

Leaflet can autodetect ‘retina’ or ‘hidpi’ screens, and load high-resolution map images automatically. To enable this, include the {r} placeholder in the URL. For example:

var tileUrl = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}{r}.png?apikey=<insert-your-apikey-here>',
layer = new L.TileLayer(tileUrl, {maxZoom: 18});

Leaflet will then replace the {r} placeholder with the correct scale modifier when making requests to our servers.