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>

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)

Cargando…

Formación de calidad impartida por profesionales