Leaflet: Diffusion de vignettes de dépliants via HTTPS / SSL

Leaflet ne fournit pas ses propres tuiles : quelle source utilisez-vous pour les tuiles ?

Par exemple : si vous utilisez 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);

Vous pouvez modifier cela pour utiliser HTTPS en ajoutant un s à la chaîne de tuile :

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

Merci pour la réponse rapide. J'utilisais auparavant :

 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);

J'ai essayé ce qui suit :

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

dans mon application et n'a pas pu charger les tuiles à partir du serveur de tuiles osm. J'ai reçu un:

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

erreur dans Chrome. L'application dans laquelle j'exécute ceci a son propre certificat SSL. Comment puis-je charger des tuiles dans ma propre application HTTPS ?

Merci!

Ce n'est pas un problème pour Leaflet. Il charge simplement les images par une URL. La sécurité et les certificats sont une logique serveur/application.

Leur support m'a envoyé un e-mail aujourd'hui et m'a dit : "Oui, utilisez https avec tile.openstreetmap.org - nous n'avons pas de certificat pour le domaine abrégé." Fonctionne pour moi maintenant!

Est-ce que ça marche toujours pour vous ? J'utilise https://tile.openstreetmap.org et reçois un avertissement de connexion non sécurisée

J'avais aussi ce problème Sammaye:

Changer de osm à openstreetmap dans l'url, et ajouter https://a.tile a fait l'affaire pour moi.

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

L'erreur que j'ai eu avant ressemblait à ceci:

J'ai finalement utilisé un autre fournisseur (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);
            });

Les couches ESRI fonctionnent avec https https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

Je l'ai résolu grâce à @F1LT3R

j'ai eu

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

et j'ai eu le problème SSL et je l'ai changé en

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

Et.. Voila!

Merci

Impressionnant! Heureux d'avoir pu aider.

Le mar. 10 novembre 2015 à 03h51, Ayoze Barrera [email protected]
a écrit:

Je l'ai résolu grâce à @F1LT3R https://github.com/F1LT3R

j'ai eu

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

et j'ai eu le problème SSL et je l'ai changé en

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

Et.. Voila!

Merci

—
Répondez directement à cet e-mail ou consultez-le sur GitHub
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -155360520.

Merci pour l'indication sur le serveur https. En fait, je pensais qu'OSM ne prendrait pas du tout en charge HTTPS.

Je suis passé à 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' au lieu de 'http://{s}.tile.osm.org/{ z}/{x}/{y}.png'. Mais le https est très très lent par rapport au non sécurisé. Les tuiles se chargent beaucoup plus rapidement dans une non sécurisée.

Est-ce que quelqu'un d'autre a le même problème?

Salut @pango89 , ravi d'apprendre que vous trouvez Leaflet utile !

Cependant, ce suivi des problèmes est utilisé pour signaler des bogues et discuter des nouvelles fonctionnalités de la bibliothèque Leaflet elle-même.
Pour toute question sur l'utilisation de Leaflet, veuillez utiliser Stack Overflow ou GIS Stack Exchange .
D'autres endroits pourraient également convenir, en particulier compte tenu du fait que votre problème concerne un serveur Tile spécifique (qui est totalement externe à Leaflet).

Si vous êtes _vraiment_ sûr qu'il s'agit d'un bogue dans Leaflet, veuillez ouvrir un nouveau problème, plutôt que de commenter un ancien sujet fermé.

Salut @ghybs ,
Merci beaucoup pour votre réponse.
Désolé pour le post au mauvais endroit.
Je publierai ma requête sur GIS Stack Exchange.

Merci 👍

J'ai fini par utiliser cette URL à la place,
au cas où quelqu'un d'autre le voudrait :

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

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

J'ai essayé toutes les solutions ici concernant le code L.tileLayer, mais qu'est-ce qui l'a fait pour moi: dans le fichier d'index de mon site, le leaflet.css et le leaflet.js étaient appelés à partir d'un site http - les changer en https s'est cassé même mon site http et n'a pas réparé mon site https. J'ai donc copié le code des fichiers css et js et les ai enregistrés sous leaflet.js et leaflet.css sur mon propre serveur. Par conséquent, la référence à ceux-ci dans ma page d'index est locale et maintenant tout fonctionne correctement.