OpenLayers 3 - Using Different OSM Tiles

I think the default tiles from our Getting Started with OpenLayers 3 tutorial are pretty ugly. Luckily, you can easily switch to using other tile sets. This tutorial will show how to switch to other OpenStreetMap (OSM) sources which requires minimal effort, and no requirement to change our coordinate system or view projection.

To change the tileset, find the code that looks like:

new ol.layer.Tile({
    source: new ol.source.OSM()
})

Then pick a url source below and place it in the OSM constructor like so:

new ol.layer.Tile({
    source: new ol.source.OSM({
        "url" : "http://tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"
    })
})

Tile Sources

Below are a list of tile sources I managed to get working, and listed in my order of general preference. You can preview them here.

Klokantech 3d

A 3d map!

https://maps-cdn.salesboard.biz/styles/klokantech-3d-gl-style/{z}/{x}/{y}.png

Wikimedia maps:

A general colour map.

https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png

CartoDB Light ("Positron")

This is not quite black and white, but prettier for it. Good for sticking color star ratings over the top of.

http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png

Transport map

A good map for showing transport links with railways lines and roads clearly visible.

http://tile2.opencyclemap.org/transport/{z}/{x}/{y}.png

Thunderforest Outdoorsy

A general colour map.

http://{a-c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png

Stamen Toner - high contrast black and white.

http://{a-c}.tile.stamen.com/toner/{z}/{x}/{y}.png

Alternatively, instead of using a url, you can use:

source: new ol.source.Stamen({
    layer: 'toner'
})

Default

The default tileset you will get if you don't specify anything.

http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png

Thunderforest Landscape

http://{a-c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png

CartoDB Dark ("Dark Matter")

This is the opposite of the Light map. This is may be good for those who need to spend many hours at a time looking at the map and prevent eye strain.

http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png

Stamen Watercolor

This set of tiles is very pretty, however it's pretty useless as there are absolutely no labels for anything. You could be looking at your own town and not realize it.

http://{a-c}.tile.stamen.com/watercolor/{z}/{x}/{y}.png