SSL Not working. Http content also loading in the script.

[deepakpyseries]

SSL not working. I have used below script. https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js But mixed content loading in the page as below. Due to this error the page is showing an insecure warning.

Loading mixed (insecure) display content “http://a.tile.stamen.com/toner/16/18746/25066.png” on a secure page Loading mixed (insecure) display content “http://d.tile.stamen.com/toner/16/18745/25066.png” on a secure page Loading mixed (insecure) display content “http://d.tile.stamen.com/toner/16/18746/25065.png” on a secure page Loading mixed (insecure) display content “http://b.tile.stamen.com/toner/16/18746/25067.png” on a secure page Loading mixed (insecure) display content “http://b.tile.stamen.com/toner/16/18747/25066.png” on a secure page Loading mixed (insecure) display content “http://c.tile.stamen.com/toner/16/18745/25065.png” on a secure page Loading mixed (insecure) display content “http://a.tile.stamen.com/toner/16/18745/25067.png” on a secure page Loading mixed (insecure) display content “http://a.tile.stamen.com/toner/16/18747/25065.png” on a secure page Loading mixed (insecure) display content “http://c.tile.stamen.com/toner/16/18747/25067.png” on a secure page

[pmacMaps]

Not sure how you're trying to load the tiles, but in the stamen-tile.js file, I changed line 10 to "//stamen-tiles-{S}a.ssl.fastly.net/". I am able to load the tiles using Leaflet.js using HTTPS.

"url":          ["//stamen-tiles-{S}a.ssl.fastly.net/", layer, "/{Z}/{X}/{Y}.", type].join(""),

101 - does this help your issue?

[ingoogni]

I'm running into the same issue. Here's the JS what I have in my html file:

   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>

   <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

    <script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>

    <script type="text/javascript">
      function initialize() {
        var target = L.latLng('52.21435','6.89400');
        var map = new L.Map(map_moaneschien, {
            center: target,
            zoom: 14
        });
        map.addLayer(new L.StamenTileLayer("toner", {
            detectRetina: true
        }));
        L.marker(target).addTo(map);
        map.scrollWheelZoom.disable();
        map.on('focus', () => { map.scrollWheelZoom.enable(); });
        map.on('blur', () => { map.scrollWheelZoom.disable(); });
      }
    </script>

[strtz]

<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js"></script>

download this file and host it locally, then edit it and change on line 10 "url": ["http://{S}tile.stamen.com/", layer, "/{Z}/{X}/{Y}.", type].join(""), to "url": ["https://stamen-tiles-{S}a.ssl.fastly.net/", layer, "/{Z}/{X}/{Y}.", type].join(""),

ran into the same issue and this was the only solution i found, the above(removing http) didnt work, it still tried to load tiles from http

[Jmuccigr]

Thanks for this, @strtz. Hopefully this gets fixed.

I think the docs have an error, because they include a '.' between the {S} and the a in the secure URL whereas you don't, and yours works. 😄