D3 Tips and Tricks v4

Monday, 10 February 2014

Using the Open Cycle Map tile server with leafet.js

The following post is a portion of the Leaflet Tips and Tricks book which is free to download. To use this post in context, consider it with the others in this blog or just download the the book as a pdf / epub or mobi .

Open Cycle Map

OpenCycleMap is a global map for cyclists, based on data from the OpenStreetMap project. At low zoom levels it is intended for overviews of national cycling networks; at higher zoom levels it should help with planning which streets to cycle on, where you can park your bike and so on. The maps are provided by Thunderforest who also provide other mapping options as well. Additional documentation on OpenCycle Map can be found on their documentation page.

URL Template


Usage policy

There are some simple guidelines on the Thunderforest terms and conditions page. The main concern with usage is the load placed on resources. So be gentle.


Thunderforest provides open data, under a Creative Commons licence, specifically CC-BY-SA 2.0. The full details are available on their terms and conditions page. Attribution must be given to both “Thunderforest” and “OpenStreetMap contributors”. Users of your map must have a working link to www.thunderforest.com.

Usage example

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
ocmlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
    'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {
    attribution: '&copy; '+mapLink+' Contributors & '+ocmlink,
    maxZoom: 18,
Open Cycle Map tile server map

More Examples

I will post separate examples of the usage of different tile servers as separate posts. Or you can find them all in Leaflet Tips and Tricks.

The description above (and heaps of other stuff) is in the Leaflet Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).


  1. wow! Awesome post. Most informative. Thx! , Super! Thanks especially for the Cycle Map!
    Thank you for this amazing post share.

  2. Thank you so much for this article! I am new to the biking community, and this post has given me much more consolidated insight than any other resource I've found. Russell

  3. Amazing share! I think you meant "Great Circle" routes. The great circle route is a straight line between two points that looks curved when drawn on a flat map.

    1. Err... Sorry, I'm not entirely sure what portion I got wrong. I totally agree with your great circle route description, where abouts did I write it?