Leaflet: Transmisión de mosaicos de folletos a través de HTTPS / SSL

Leaflet no proporciona sus propios mosaicos: ¿qué fuente está utilizando para los mosaicos?

Por ejemplo: si está utilizando 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);

Puede cambiar esto para usar HTTPS agregando un s a la cadena de mosaico:

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

Gracias por la rápida respuesta. Anteriormente estaba usando:

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

Intenté lo siguiente:

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

en mi aplicación y no pude cargar mosaicos desde el servidor de mosaicos de osm. Recibi un:

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

error en Chrome. La aplicación en la que estoy ejecutando esto tiene su propio certificado SSL. ¿Cómo cargaría mosaicos en mi propia aplicación HTTPS?

¡Gracias!

Esto no es una preocupación del Folleto. Simplemente carga imágenes por una url. La seguridad y los certificados son lógica de servidor/aplicación.

Su soporte me envió un correo electrónico hoy y me dijo: "Sí, use https con tile.openstreetmap.org; no tenemos un certificado para el dominio abreviado". Funciona para mí ahora!

¿Todavía te funciona? Uso https://tile.openstreetmap.org y recibo una advertencia de conexión insegura

También estaba teniendo este problema Sammaye:

Cambiar de osm a openstreetmap en la URL y agregar https://a.tile fue el truco para mí.

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

El error que recibí antes se veía así:

Usé un proveedor diferente al final (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);
            });

Las capas de ESRI funcionan con https https://esri.github.io/esri-leaflet/examples/basemap-with-labels.html

Lo resolví gracias a @F1LT3R

tuve

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

y tuve el problema de SSL y lo cambié a

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

¡y hecho!

gracias

¡Increíble! Me alegro de poder ayudar.

El martes 10 de noviembre de 2015 a las 3:51 a.m., Ayoze Barrera [email protected]
escribió:

Lo resolví gracias a @F1LT3R https://github.com/F1LT3R

tuve

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

y tuve el problema de SSL y lo cambié a

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

¡y hecho!

gracias

—
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/Leaflet/Leaflet/issues/3186#issuecomment -155360520.

Gracias por la pista sobre el servidor https. De hecho, pensé que OSM no admitiría HTTPS en absoluto.

Cambié a 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' en lugar de 'http://{s}.tile.osm.org/{ z}/{x}/{y}.png'. Pero el https es muy lento en comparación con el no seguro. Los mosaicos se cargan mucho más rápido en uno no seguro.

¿Alguien más tiene el mismo problema?

Hola @pango89 , ¡qué bueno saber que el Folleto te resulta útil!

Sin embargo, este rastreador de problemas se usa para informar errores y discutir nuevas funciones de la propia biblioteca de folletos.
Si tiene preguntas sobre el uso de Leaflet, utilice Stack Overflow o GIS Stack Exchange .
Otros lugares también pueden ser adecuados, especialmente dado que su problema se trata de un servidor de mosaico específico (que es totalmente externo a Leaflet).

Si está _realmente_ seguro de que se trata de un error en el Folleto, abra un nuevo número, en lugar de comentar un hilo antiguo y cerrado.

Hola @ghybs ,
Muchas gracias por su respuesta.
Perdón por la publicación en el lugar equivocado.
Publicaré mi consulta en GIS Stack Exchange.

Gracias 👍

Terminé usando esta URL en su lugar,
por si alguien mas lo quiere:

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

Básicamente 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' a '//{s}.tile.osm.org/{z}/{x}/{y}.png'

Probé todas las soluciones aquí relacionadas con el código L.tileLayer, pero lo que hizo por mí: en el archivo de índice de mi sitio, el folleto.css y el folleto.js estaban siendo llamados desde un sitio http, cambiándolos a https rotos incluso mi sitio http y no arregló mi sitio https. Así que copié el código para los archivos css y js y los guardé como leaflet.js y leaflet.css en mi propio servidor y, por lo tanto, la referencia a ellos en mi página de índice es local y ahora todo funciona correctamente.