OpenLayers

Here’s some straightforward JavaScript code for adding these maps to an OpenLayers-powered site.

Over the years the layer definitions in OpenLayers have, thankfully, become easier and easier. The following code needs a minimum of OpenLayers v2.8 or greater.

var map = new OpenLayers.Map("map");
var l = new OpenLayers.Layer.OSM("OpenCycleMap",
                                 ['https://tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey=<insert-your-apikey-here>']
                                );
map.addLayer(l);

Or, with parallel tile loading:

var map = new OpenLayers.Map("map");
var l = new OpenLayers.Layer.OSM("OpenCycleMap",
                                 ['https://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey=<insert-your-apikey-here>',
                                  'https://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey=<insert-your-apikey-here>',
                                  'https://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey=<insert-your-apikey-here>'
                                 ]
                                );
map.addLayer(l);