Leanpub: Publish Early, Publish Often

Tile servers that can be used with Leaflet

A tile server is a source of the tiles that leaflet.js uses to present a map. Because there are many unique requirements for maps there are a large number of variations of tile servers that apply different formatting and styling to the geographic information.

In this chapter we will present the different services available and the different requirements for use in terms of the URL template, terms of use and attribution where appropriate.

URL Template

The URL template is the format required when specifying the link to the tiles on the server. Typically this will be in the form of a server name (which may have sub-domains) followed by the zoom level and then x/y values for the tiles. For example, the following is the URL template for the standard OSM server.

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

The http://{s}.tile.openstreetmap.org is the server name with the {s} part representing a variation in possible sub-domains. {z} is the zoom level and {x}/{y} is the tile location.

Usage Policy

Because there is an overhead involved in generating and providing tiles to make maps with, it is expected (and entirely reasonable) that providers will have a usage policy to avoid placing an undue strain on their equipment and bandwidth.

Attribution

Attribution is about providing credit where credit is due and acknowledging the copyright of the originator of a work. It is significant effort to style and produce map tiles and that should be recognised and noted appropriately. Typically this would be in the form of a note in the bottom right hand corner of the map being presented. Some of the attribution requirements might sound a little formal, but they need to be that way so that their message is clear in a legal sense. To ordinary people, we need to recognise that we are using a work created by someone else and that we make sure we recognise that appropriately :-).

Open Street Map OSM Mapnik

This is the standard tile server in use for Open Street Map.

URL Template

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Usage policy

The best place to view the detail on the usage policy for Open Street Maps tiles is from their tile usage policy wiki page. The main concern with usage is the load placed on their resources which are finite considering their position as a volunteer run service. So be gentle and when in doubt, check out the wiki.

Attribution

Open Street Map provides open data, licensed under the Open Data Commons Open Database License (ODbL). The cartography in their map tiles is licensed under the Creative Commons Attribution-ShareAlike 2.0 license (CC BY-SA). They require that you use the credit “ © OpenStreetMap contributors” and that the cartography is licensed as CC BY-SA. You may do this by linking to the copyright page at http://www.openstreetmap.org/copyright.

Usage example

        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);

OSM Mapnik tile server map

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

http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png

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.

Attribution

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>';
L.tileLayer(
    'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', {
    attribution: '&copy; '+mapLink+' Contributors & '+ocmlink,
    maxZoom: 18,
    }).addTo(map);

Open Cycle Map tile server map

Outdoors

The ‘Outdoors’ set of map tiles is distributed by the good folks at Thunderforest who brought you OpenCycleMap. The tiles are aimed towards outdoor enthusiasts - for hiking, skiing and other activities. They are based on data from the OpenStreetMap project.

URL Template

http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png

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.

Attribution

Usage example

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
outlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
L.tileLayer(
    'http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {
        attribution: '&copy; '+mapLink+' Contributors & '+outlink,
        maxZoom: 18,
    }).addTo(map);

Outdoors tile server map

Transport

The ‘Transport’ set of map tiles is distributed by the good folks at Thunderforest who brought you OpenCycleMap. The tiles are designed to show a high level of detail of available public transport. They are based on data from the OpenStreetMap project.

URL Template

http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png

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.

Attribution

Usage example

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
translink = '<a href="http://thunderforest.com/">Thunderforest</a>';
L.tileLayer(
    'http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', {
        attribution: '&copy; '+mapLink+' Contributors & '+translink,
        maxZoom: 18,
    }).addTo(map);

Transport tile server map

Landscape

The ‘Landscape’ set of map tiles is distributed by the good folks at Thunderforest who brought you OpenCycleMap. The tiles have a global style focussed on information about the natural world - ideal for rural context. They are based on data from the OpenStreetMap project.

URL Template

http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png

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.

Attribution

Usage example

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
landlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
L.tileLayer(
    'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png', {
        attribution: '&copy; '+mapLink+' Contributors & '+landlink,
        maxZoom: 18,
    }).addTo(map);

Landscape tile server map

MapQuest Open Aerial

The ‘MapQuest Open Aerial’ tiles are a collection of aerial imagery that covers the globe at varying levels of detail depending on location. The imagery originated from NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency.

The tiles are distributed by the good folks at MapQuest who also distribute a set of OSM tiles called MapQuest-OSM. Global coverage is provided at zoom levels 0-11. Zoom Levels 12+ are provided only in the United States (lower 48).

URL Template

http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png

Usage policy

There are some generalised direction (and lots of other good stuff) on the MapQuest-OSM Tiles + MapQuest Open Aerial Tiles page. They are all very reasonable and sensible and are concerned with making sure that the load on the service is not unduly onerous. There is also a link to their official ‘Terms of use’ page which is a more formal wording of their common sense instructions.

Attribution

If using the MapQuest Open Aerial Tiles, attribution is required to read; “Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency” (which is quite long and on the example picture used later in the section results in a serious word-wrapping). Additionally they ask that “Tiles Courtesy of MapQuest” be placed on the map along with their logo and a link from the ‘MapQuest’ portion that goes to ‘http://www.mapquest.com/’.

Usage example

This usage example is slightly more complex in that it involves a slightly different approach to including the subdomains. Leaflet will normally operate with subdomains of the form a, b and c, but in this example we find otile1, otile2, otile3 and otile4. To accommodate this the otile portion is included in the URL and the variable parts of the subdomain are declared in a separate option called subdomains.

mapquestLink = '<a href="http://www.mapquest.com//">MapQuest</a>';
mapquestPic = '<img src="http://developer.mapquest.com/content/osm/mq_logo.png\
">';
L.tileLayer(
    'http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
    attribution: 'Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agric\
ulture, Farm Service Agency. Tiles courtesy of '+mapquestLink+mapquestPic,
    maxZoom: 18,
    subdomains: '1234',
    }).addTo(map);

MapQuest Open Aerial map

MapQuest-OSM

The ‘MapQuest-OSM’ tiles are a MapQuest styled variation on the OSM dataset.

The tiles are distributed by the good folks at MapQuest who also distribute a set of OSM tiles called MapQuest Open Aerial with satellite imagery.

URL Template

http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png

Usage policy

Attribution

If using the MapQuest-OSM tiles, appropriate copyright attribution is required to OpenStreetMap. Additionally they ask that “Tiles Courtesy of MapQuest” be placed on the map along with their logo and a link from the ‘MapQuest’ portion that goes to ‘http://www.mapquest.com/’.

Usage example

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
mapquestLink = '<a href="http://www.mapquest.com//">MapQuest</a>';
mapquestPic = '<img src="http://developer.mapquest.com/content/osm/mq_logo.png\
">';
L.tileLayer(
    'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
    attribution: '&copy; '+mapLink+'. Tiles courtesy of '+mapquestLink+mapques\
tPic,
    maxZoom: 18,
    subdomains: '1234',
    }).addTo(map);

MapQuest-OSM map