Using Stamen tiles in OpenLayers map over HTTPS

Question

I'm using Stamen's "toner-lite" tiles in an OpenLayers map like so:

var bkgLayer = new ol.layer.Tile({
    source: new ol.source.Stamen({
        layer: "toner-lite"
    })
});

var map = new ol.Map({
    controls: [zoomInCtrl, scaleLineCtrl, fullScreenCtrl],
    renderer: 'webgl',
    target: 'mapViewport'
});

map.addLayer(bkgLayer);

Everything works fine when the website is running under HTTP. However, if I run the site under HTTPS, an unsuccessful attempt is made to retrieve the tiles from a URL such as

https://c.tile.stamen.com/toner-lite/5/24/14.png

I found the following information on Stamen's website

If you'd like to display these map tiles on a website that requires HTTPS, use our tile SSL endpoint by replacing http://tile.stamen.com with https://stamen-tiles.a.ssl.fastly.net . Multiple subdomains can be also be used: https://stamen-tiles- {S}.a.ssl.fastly.net

JavaScript can be loaded from https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js .

And indeed, if I try a URL such as

https://stamen-tiles.a.ssl.fastly.net/toner-lite/5/24/14.png

in a browser, the tile is successfully retrieved. But how do I change my JavaScript code such that OpenLayers will use this endpoint when retrieving Stamen tiles?

Answer 1

From docs , use url parameter.

Default value can be found in source code , custom value should be formatted accordingly.

var url = goog.isDef(options.url) ? options.url :
    protocol + '//{a-d}.tile.stamen.com/' + options.layer + '/{z}/{x}/{y}.' +
    layerConfig.extension;

This should work for you:

new ol.source.Stamen({
    layer: "toner-lite",
    url: "https://stamen-tiles-{a-d}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"
})