En esta nueva entrada vamos a mostrar cómo cargar las tres capas base que ofrece Stamen utilizando Leaflet. En otra entrada anterior ya explicamos cómo utilizar estas capas base (Terrain, Toner y Watercolor) utilizando OpenLayers. El ejemplo es similar al de esta entrada, aunque hay algunas diferencias en el código. Para más información sobre Stamen visitar su página web.
Lo primero es disponer de un mapa inicial en HTML. El ejemplo que os presento es el de un mapa básico a escala mundial. En el código es necesario introducir los enlaces CDN (tanto el CSS como el JS) para cargar la API.
<DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fleaflet%401.3.1%2Fdist%2Fleaflet.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20html%2C%20body%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20margin%3A%200%0A%20%20%20%20%7D%0A%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Stamen Leaflet</title>
</head>
<body>
<div id="mapa"></div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20var%20mapa%20%3D%20L.map(%22mapa%22).setView(%5B0%2C%200%5D%2C%202)%3B%0A%20%20%20%20var%20escala%20%3D%20L.control.scale(%7B%0A%20%20%20%20%20%20%20%20metric%3A%20true%2C%0A%20%20%20%20%20%20%20%20imperial%3A%20false%0A%20%20%20%20%7D)%3B%0A%20%20%20%20escala.addTo(mapa)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
El siguiente paso es cargar las capas base. A diferencia de OpenLayers, para cargar estas capas base no hace falta el uso de “new” para instanciar un nuevo objeto, por lo que utilizamos directamente la clase encargada de cargar las capas: L.tileLayer. Esta clase necesita como parámetro obligatorio una URL template (“URL plantilla”), la cual contiene una serie de claves (x, y, z) que serán sustituidas por el parámetro necesario. Como parámetro opcional añadimos el parámetro “attribution”. Introducimos las variables de las capas, con las URL correspondientes, que se pueden consultar en la Web de Stamen.
var Terrain = L.tileLayer("https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",{
attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
});
var Toner = L.tileLayer("https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",{
attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
});
var Watercolor = L.tileLayer("https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",{
attribution: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA."
});
Para añadir la capa que queramos al mapa, utilizamos el método addTo().
<br data-mce-bogus="1">
Si queremos añadir un control al mapa para poder cambiar entre las diferentes capas el proceso es más sencillo que con OpenLayers, pues Leaflet dispone de un control nativo. Mediante un objeto JSON solo hay que indicar el nombre que le queremos dar a las capas seguido de la referencia a las variables que contienen las capas.
var capasBase = {
"Capa Terrain": Terrain,
"Capa Toner": Toner,
"Capa Watercolor": Watercolor
};
Después, basta con usar la clase L.control.layers, a la cual se le pasa como argumento las tres capas base. Por último, añadimos el control al mapa con el método addTo().
var selectorCapas = L.control.layers(capasBase);
selectorCapas.addTo(mapa);
El resultado es nuestro visor con un “swich layer” muy sencillo de usar, que permite intercambiar entre las tres capas base de Stamen.
Para finalizar, os comparto el código completo.
<DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fleaflet%401.3.1%2Fdist%2Fleaflet.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20html%2C%20body%20%7B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20margin%3A%200%0A%20%20%20%20%7D%0A%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<title>Stamen Leaflet</title>
</head>
<body>
<div id="mapa"></div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20var%20Terrain%20%3D%20L.tileLayer(%22https%3A%2F%2Fstamen-tiles.a.ssl.fastly.net%2Fterrain%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.jpg%22%2C%7B%0A%20%20%20%20%20%20%20%20attribution%3A%20%22Map%20tiles%20by%20Stamen%20Design%2C%20under%20CC%20BY%203.0.%20Data%20by%20OpenStreetMap%2C%20under%20ODbL.%22%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20Toner%20%3D%20L.tileLayer(%22https%3A%2F%2Fstamen-tiles.a.ssl.fastly.net%2Ftoner%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.png%22%2C%7B%0A%20%20%20%20%20%20%20%20attribution%3A%20%22Map%20tiles%20by%20Stamen%20Design%2C%20under%20CC%20BY%203.0.%20Data%20by%20OpenStreetMap%2C%20under%20ODbL.%22%0A%20%20%20%20%7D)%3B%0A%20%20%20%20var%20Watercolor%20%3D%20L.tileLayer(%22https%3A%2F%2Fstamen-tiles.a.ssl.fastly.net%2Fwatercolor%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.jpg%22%2C%7B%0A%20%20%20%20%20%20%20%20attribution%3A%20%22Map%20tiles%20by%20Stamen%20Design%2C%20under%20CC%20BY%203.0.%20Data%20by%20OpenStreetMap%2C%20under%20CC%20BY%20SA.%22%0A%20%20%20%20%7D)%3B%0A%0A%20%20%20%20var%20mapa%20%3D%20L.map(%22mapa%22).setView(%5B0%2C%200%5D%2C%202)%3B%0A%0A%20%20%20%20Terrain.addTo(mapa)%3B%0A%20%20%20%20var%20escala%20%3D%20L.control.scale(%7B%0A%20%20%20%20%20%20%20%20metric%3A%20true%2C%0A%20%20%20%20%20%20%20%20imperial%3A%20false%0A%20%20%20%20%7D)%3B%0A%20%20%20%20escala.addTo(mapa)%3B%0A%20%20%20%20Terrain.addTo(mapa)%3B%0A%0A%20%20%20%20var%20capasBase%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22Capa%20Terrain%22%3A%20Terrain%2C%0A%20%20%20%20%20%20%20%20%22Capa%20Toner%22%3A%20Toner%2C%0A%20%20%20%20%20%20%20%20%22Capa%20Watercolor%22%3A%20Watercolor%0A%20%20%20%20%7D%3B%0A%0A%20%20%20%20var%20selectorCapas%20%3D%20L.control.layers(capasBase)%3B%0A%20%20%20%20selectorCapas.addTo(mapa)%3B%0A%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
(3 votos, promedio: 5,00 de 5)
Cargando...
Formación de calidad impartida por profesionales
Soy usuario QGIS y utilice el Stamen terrain labels, para identificar el nombre de algunas calles, en conjunto con Google Satélite, pero al momento de enviar el mapa al compositor y exportar solo aparece el google satélite, y los nombres de las calles se borran, eso se puede solucionar?
Saludos.
Buenos días Patricio,
¿Cómo has importado el Stamen Terrain Labels? Yo por ejemplo acabo de hacer una prueba de impresión a partir de la importación con el plugin QuickMapServices (te dejo este enlace por si no lo conoces: https://www.cursosgis.com/quick-map-services-un-plugin-de-uso-sencillo-para-utilizar-mapas-base-en-qgis/) y las etiquetas se imprimen, aunque sí que es cierto que no se ven con el tamaño de la previsualización en QGIS (este tamaño no se puede cambiar al venir estas etiquetas ya pre-renderizadas).
Yo probaría a imprimir solamente con la capa de Stamen, a ver si me aparece alguna etiqueta, aunque sea muy pequeña. Si aparece, imprimiría de nuevo con el Google Satellite de fondo a ver si esas etiquetas siguen apareciendo. Si al poner el Google Satellite dejan de verse, es posible que por tamaño o número de capas sobrepases el límite y el servicio web no se imprima correctamente.
Espero haber sido de ayuda.
Un saludo,
Manuel