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

I created a GitHub repository that contains an index.html file that one can just open in a browser. Choose from the different tile sources, and then view the code to find the URL of the source you want. As I find more sources, I will update the project.