Access Stamen tiles via https

Question

To get rid of "Mixed content" warnings I'm trying to access stamen map tiles via https. For http the used url is:

http://{s}.sm.mapstack.stamen.com/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png

It's working fine with leaflet. After reading the notes on maps.stamen.com the protcol independet endpoint is http(s)://stamen-tiles-{s}.a.ssl.fastly.net/

I replaced the url by https://stamen-tiles-{s}.a.ssl.fastly.net/(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/{z}/{x}/{y}.png But this solution won't work. I got only file not found errors After poking around https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png succeded but isn't the wanted sytle.

Any ideas how to solve this problem?

Answer 1

I just gave it a try with a protocol-less URL ( //stamen-tiles-{S}a.ssl.fastly.net/ ) like this:

var SUBDOMAINS = "a. b. c. d.".split(" "),
    MAKE_PROVIDER = function(layer, type, minZoom, maxZoom) {
        return {
            "url":          ["//stamen-tiles-{S}a.ssl.fastly.net/", layer, "/{Z}/{X}/{Y}.", type].join(""),
            "type":         type,
            "subdomains":   SUBDOMAINS.slice(),
            "minZoom":      minZoom,
            "maxZoom":      maxZoom,
            "attribution":  [
                'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, ',
                'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ',
                'Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, ',
                'under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
            ].join("")
        };
    },

This works and the tiles are delivered with https protocol:

https://jsfiddle.net/expedio/noasLexx/