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://api.thunderforest.com/cycle/${z}/${x}/${y}.png?apikey=<insert-your-apikey-here>']
                                );
map.addLayer(l);