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
First published: 16th August 2018