Leaflet es una librería de JavaScript que se usa para visualizar mapas.

Leaflet está diseñado teniendo en cuenta la simplicidad, el rendimiento y la facilidad de uso. Funciona de manera eficiente en todas las principales plataformas móviles y de escritorio, se puede ampliar con muchos complementos, tiene una API hermosa, fácil de usar y bien documentada y un código fuente simple y legible al que es un placer contribuir.

¿Qué debemos tener instalado para usar Leaflet y JavaScript?

Para instalar Leaflet en nuestro ordenador debemos tener instalado NodeJs y su gestor de paquetes npm, en el siguiente enlace lo podemos descargar.

Funcionamiento JavaScript y Leaflet

Lo primero que tenemos que hacer cuando tengamos instalado nodejs es crear una carpeta donde vamos a almacenar el proyecto, una vez que tengamos la carpeta creada dentro de la carpeta vamos a crear estos archivos:

• index.html – Este es el archivo principal del proyecto
• app.js – En este archivo escribiremos el código JavaScript
• style.css – Este archivo contiene la hoja de estilos del proyecto

Una vez creados los archivos abrimos la carpeta en nuestro editor de código favorito, en este caso es Visual Studio Code.

En el archivo index.html tenemos que escribir el siguiente código:

<!DOCTYPE html>
<html>
<head>
    <title>Mi primer mapa con Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
        rel="stylesheet"
        href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""
    />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fleaflet%401.7.1%2Fdist%2Fleaflet.js%22%0A%20%20%20%20integrity%3D%22sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA%3D%3D%22%0A%20%20%20%20crossorigin%3D%22%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
       <h1 id="texto">Mi primer mapa con Leaflet</h1>
        <div id="map"></div>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22app.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
    </body>
</html>

Con este código estamos creando la estructura básica de un archivo HTML añadiendo al final dos líneas de código para que podamos visualizar el mapa con JavaScript

Una vez tengamos este código añadido a nuestro index.html vamos a seguir estilizando el mapa con nuestro archivo style.css en el que vamos a añadir el siguiente código.

#texto {
    font-family: "Arial";
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
}

#map {
    align-items: center;
    width: 90%;
    height: 80%;
    position: absolute;
    margin-top: 20px;
    }

Ahora añadiremos el código JavaScript a nuestro fichero app.js

var map = L.map('map').setView([51.505, -0.09], 13);

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

En la primera línea estamos iniciando el mapa para que se ve en el div que pusimos antes en nuestro código HTML y poniendo las coordenadas donde queremos ver el mapa con el numero de Zoom que lo queremos ver. Y en la segunda línea estamos llamando a la api de Open Street Map para que añada lo que hemos querido a nuestro <div id=map></div>.

¿Cómo podemos añadir puntos a nuestro mapa?

Para poder añadir puntos a nuestro debemos irnos a nuestro fichero app.js y añadir la siguiente linea en la que pondremos las coordenadas de donde queremos añadir en el mapa, las siguientes lienas siver para poner un popup cuando pichemos en el mapa se vea como en la imagen.

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('¡Marcador añadido!')
    .openPopup();

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

Cargando...

Formación de calidad impartida por profesionales