Programster's Blog

Tutorials focusing on Linux, programming, and open-source

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" : "{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!{z}/{x}/{y}.png

Wikimedia maps:

A general colour map.{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.


Transport map

A good map for showing transport links with railways lines and roads clearly visible.{z}/{x}/{y}.png

Thunderforest Outdoorsy

A general colour map.


Stamen Toner - high contrast black and white.


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

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


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


Thunderforest Landscape


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.


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.

Last updated: 16th August 2018
First published: 16th August 2018