Leaflet: Streaming Leaflet Tiles over HTTPS / SSL

Leaflet doesn't provide its own tiles: what source are you using for tiles?

For instance: if you're using OpenStreetMap:

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

You can change this to use HTTPS by adding an s to the tile string:

L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Thank you for the swift response. I was previously using:

 var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
     attr ='Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data {attribution.OpenStreetMap}',
     service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});
     map.addLayer(service);

I tried the following:

 L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

in my application and was unable to load tiles from the osm tile server. I received a:

 GET https://{s}.tile.osm.org/{x}/{y}/{z}.png net::ERR_INSECURE_RESPONSE 

error in Chrome. The application I am running this in has its own SSL certificate. How would I load in tiles into my own HTTPS application?

Thank you!

This is not a Leaflet concern. It just loads images by an url. Security and certificates are server / application logic.

Their support emailed me today and said, "Yes, use https with tile.openstreetmap.org - we don't have a certificate for the abbreviated domain." Works for me now!

Does it still work for you? I use https://tile.openstreetmap.org and get an insecure connection warning

I was also having this issue Sammaye:

Changing from osm to openstreetmap in the url, and adding https://a.tile did the trick for me.

https://a.tile.openstreetmap.org/{z}/{x}/{y}.png

The error I got before looked like this:

I used a different provider in the end (mapquest):

            $('#MapModal').on('shown.bs.modal', function (e) {

                var data = $(e.relatedTarget).data();
                var map = L.map('modalMap').setView([data.lat, data.long], 9);

                L.tileLayer('https://otile2-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
                    maxZoom: 18,
                    attribution: 'Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, ' +
                        '<a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, ' +
                        'Imagery &copy; <a href=\"http://mapquest.com\">Mapquest</a>',
                    id: 'examples.map-i875mjb7'
                }).addTo(map);
            });

ESRI layers work with https https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

I solved it thanks to @F1LT3R

I had

http://{s}.tile.osm.org/{z}/{x}/{y}.png

and I had the SSL problem and I changed it to

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

and done!

thankyou

Awesome! Glad I could help.

On Tue, Nov 10, 2015 at 3:51 AM, Ayoze Barrera [email protected]
wrote:

I solved it thanks to @F1LT3R https://github.com/F1LT3R

I had

http://{s}.tile.osm.org/{z}/{x}/{y}.png http://tile.osm.org/%7Bz%7D/%7Bx%7D/%7By%7D.png

and I had the SSL problem and I changed it to

https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png http://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png

and done!

thankyou

—
Reply to this email directly or view it on GitHub
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment-155360520.

Thanks for the hint about the https server. I actually thought OSM wouldn't support HTTPS at all.

I switched to 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' instead of 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'. But the https one is very very slow as compared to the non secure one. The tiles are loading much much faster in non secure one.

Does any one else has the same problem?

Hi @pango89, great to hear that you find Leaflet useful!

However, this issue tracker is used for reporting bugs and discussing new features of Leaflet library itself.
For questions on using Leaflet, please use Stack Overflow or GIS Stack Exchange.
Other places might also be suitable, especially given the fact that your issue is about a specific Tile Server (that is totally external to Leaflet).

If you are _really_ sure that this is a bug in Leaflet, please open a new issue, rather than commenting on an old and closed thread.

Hi @ghybs ,
Thank you so much for your reply.
Sorry about the post at wrong place.
I will post my query on GIS Stack Exchange.

Thanks 👍

I ended up using this url instead,
in case anyone else wants it:

L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Basically 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' to '//{s}.tile.osm.org/{z}/{x}/{y}.png'

I tried all the solutions here pertaining to the L.tileLayer code, but what did it for me: in the index file of my site, the leaflet.css and leaflet.js were being called from an http site - changing those to https broke even my http site and didn't fix my https site. So i copied the code for both the css and js files and saved them as leaflet.js and leaflet.css in my own server and therefore the reference to them in my index page is local and now everything works correctly.