SSL Not working. Http content also loading in the script.
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
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?
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/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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>
<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
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. 😄