Cómo añadir un botón para volver a la vista inicial de nuestro mapa de Leaflet

En esta entrada vamos a ver un ejemplo sencillo de cómo disponer de un botón dentro de nuestro mapa de Leaflet que nos devuelva a las coordenadas y zoom iniciales.

Lo primero de todo es como siempre disponer de un mapa básico dentro de un documento HTML. En el ejemplo el mapa está centrado en Islandia, con las coordenadas 65° N, 19°W y un zoom de 6 unidades.

/**
<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%20%20%20%20%20%20%20%20%20html%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%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>Entrada Zoom Home</title>
    </head>

    <body>
        <div id="mapa"></div>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20capaOSM%20%3D%20L.tileLayer('http%3A%2F%2Ftile.openstreetmap.org%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.png')%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20mapa%20%3D%20L.map(%22mapa%22%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20%5B65%2C%20-19%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20zoom%3A%206%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20capaOSM.addTo(mapa)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20escala%20%3D%20L.control.scale(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20metric%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20imperial%3A%20false%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20escala.addTo(mapa)%3B%0A%0A%20%20%20%20%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>
*/

Dentro de la definición de nuestra etiqueta <style> añadimos el id de nuestro botón y le damos las propiedades. Resumiendo, hemos colocado el botón justo debajo de los botones de “zoom +” y “zoom –“ que aparecen por defecto, con un icono de fondo de una casa (https://image.flaticon.com/icons/png/512/69/69524.png). La imagen de la casa la hemos guardado en la misma carpeta donde se encuentra el documento HTML, con el nombre de “casa.png” Además, le hemos especificado que cuando pasemos el cursor por encima del botón se nos cambie el cursor.

        #zoom-home-boton {
            position: absolute;
            top: 80px;
            left: 11px;
            width: 8px;
            height: 8px;
            padding: 14px;
            background: url(./casa.png);
            background-position: center;
            background-size: contain;
            background-color: white;
            z-index: 400;
            cursor: pointer;
        }

Debajo del contenedor <div> de nuestro mapa añadimos el botón especificando el id “zoom-home-boton” para que tenga el estilo que acabamos de crear.

        <button id="zoom-home-boton"></button>

Si vamos a nuestro mapa ya nos debería aparecer el botón que hemos creado, aunque todavía si hacemos click en él vemos que aún no tiene ninguna funcionalidad.

Para añadirle funcionalidad tenemos que añadir a nuestro código un evento con el método .addEventListener(). Dentro de una variable que hemos denominado “home”, creamos el listener para que cuando hagamos click sobre el botón nuestro mapa se ajuste a la vista que definamos, en este caso a la vista inicial del mapa.

        var home = document.getElementById("ZoomHomeBoton");
            home.addEventListener("click", function () {
                mapa.setView([65, -19], 6)
        });

Como resultado tendremos el botón plenamente funcional que nos permite con tan solo un click retroceder a la vista inicial de nuestro mapa.

El código completo del ejercicio es el siguiente.

<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%20%20%20%20%20%20%20%20%20html%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23mapa%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23zoom-home-boton%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top%3A%2080px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20left%3A%2011px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%208px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20url(.%2Fcasa.png)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-position%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-size%3A%20contain%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20white%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%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>Entrada Zoom Home</title>
    </head>

    <body>
        <div id="mapa"></div>
        <button id="zoom-home-boton"></button>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20capaOSM%20%3D%20L.tileLayer('http%3A%2F%2Ftile.openstreetmap.org%2F%7Bz%7D%2F%7Bx%7D%2F%7By%7D.png')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20mapa%20%3D%20L.map(%22mapa%22%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20%5B65%2C%20-19%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20zoom%3A%206%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20capaOSM.addTo(mapa)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20escala%20%3D%20L.control.scale(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20metric%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20imperial%3A%20false%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20escala.addTo(mapa)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20home%20%3D%20document.getElementById(%22zoom-home-boton%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20home.addEventListener(%22click%22%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mapa.setView(%5B65%2C%20-19%5D%2C%206)%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%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>

A lo largo del curso online de aplicaciones Web GIS con OpenLayers y Leaflet y a través de una serie de ejercicios guiados, el alumno aprenderá cómo programar desde cero un visor de mapas y a nutrirlo con una amplia variedad de datos, tanto propios como los disponibles en la Web.

(2 votos, promedio: 5,00 de 5)