Los mapas son increíblemente útiles para mostrar ubicaciones en un sitio web. Los casos de uso de los mapas incluyen mostrar la ubicación de la dirección de una oficina, que es una mejor opción que mostrar una imagen o una dirección de texto. También se puede utilizar para marcar puntos de interés en un lugar turístico para que el visitante pueda planificar mirando todas las áreas cercanas.
Leaflet.js es una biblioteca de JavaScript que hace que sea extremadamente fácil mostrar mapas en una página web e interactuar con ella. Esta guía intentará brindar una introducción simple al uso de Leaflet.js para mostrar el mapa y mostrar el área requerida en el mapa.
porción HTML
Comenzaremos declarando el HTML necesario para mostrar el mapa. El uso de leaflet.js requiere que importemos un archivo CSS para el estilo del mapa y el archivo JavaScript para la funcionalidad del mapa. La última versión de ambos se puede encontrar en «https://leafletjs.com/download.html»
Comenzaremos definiendo el área donde se debe mostrar el mapa. Primero creamos un div con una identificación de «mapa» para que el script pueda acceder a él. Luego definiremos la altura y el ancho del objeto del mapa. De lo contrario, el mapa no se mostraría. Podemos especificar cualquier dimensión requerida aquí.
<!DOCTYPE html> <html> <head> <title>Leaflet.js Guide</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Get the leaflet CSS file --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity= "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" /> </head> <body> <h1>My Leafletjs Map</h1> <!-- Specify the map and it's dimensions --> <div id="map" style="width: 960px; height: 500px"></div> <!-- Get the leaflet JavaScript file --> <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity= "sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script> </body> </html>
Versión móvil
El mapa se puede mostrar en pantalla completa en un dispositivo móvil, como una aplicación web. Esto es posible haciendo que el elemento del cuerpo y el div que contiene el mapa ocupen completamente tanto el alto como el ancho de la pantalla. Esto se puede hacer dando estos dos valores como 100% o 100 unidades de visualización.
Parte de JavaScript
Aquí escribiremos la parte de JavaScript de la implementación.
- Comenzaremos inicializando el mapa con el método map(). El id que tenemos que declarar antes se le da a este método como parámetro. Este mapa inicializado se almacena en una variable, que puede usarse más tarde para agregar más funcionalidades.
// Initialize the leaflet mapconst map = L.map('map');
- Ejecutar el código ahora mostraría un área vacía con los controles del mapa. Esto significa que nuestro complemento se ha inicializado con éxito. La razón por la que no vemos ninguna información del mapa es que tenemos que especificar la información del mosaico.
- No es posible cargar todo el mapa del mundo a la vez. Por lo tanto, se divide en múltiples mosaicos. Solo se actualizan los mosaicos en la vista actual del usuario. Esto ahorra ancho de banda y hace que todo el proceso de carga de mapas sea más rápido.
- Esto se hace a través de una API que sigue proporcionando y actualizando las imágenes de los mosaicos para los parámetros dados. Usaremos la API de OpenStreetMap para obtener nuestros mapas de mosaicos para el mapa.
- El método L.tileLayer() acepta una URL a la API y obtiene automáticamente el mapa de mosaicos requerido para la posición actual del usuario.
- El uso de OpenStreetMap requiere que uno los atribuya por su trabajo, por lo tanto, seremos atribuidos por ellos en el parámetro de atribución del método. Esta capa de teselas se agregará al mapa usando el método addTo() al final.
- El último paso que hay que hacer antes de configurar el mapa es configurar una vista, es decir, el área del mundo que se debe mostrar. Esto se hace usando el método setView(). Este método toma un par de latitud y longitud y un valor de zoom. El valor de zoom determina qué tan cerca está la vista de la superficie. Al aumentar este valor, la vista se acerca más al suelo.
- Fijemos la vista a la de la Torre Eiffel que tiene las coordenadas 48.8584 y 2.2945. El valor del zoom se establece en 16 para una vista decente.
// Get the tile layer from OpenStreetMaps// Specify the maximum zoom of the mapmaxZoom: 19,// Set the attribution for OpenStreetMaps}).addTo(map);// Set the view of the map// with the latitude, longitude and the zoom valuemap.setView([48.8584, 2.2945], 16); - Al reabrir la página web, finalmente veremos un mapa que tiene toda la información de la ubicación actual y la Torre Eiffel en el centro del mapa.
Mostrar la ubicación actual del usuario
El folleto también puede mostrar la vista en función de la ubicación actual mediante el método de localización(). Toma un objeto que tiene la propiedad setView establecida en verdadero y un valor maxZoom establecido en un valor máximo. Este comando solicitará la ubicación del usuario y establecerá automáticamente la vista en esa ubicación.
// Ask for current location and navigate to that area
map.locate({setView: true, maxZoom: 16});
Mostrando marcadores en el mapa
El folleto se puede utilizar para marcar puntos en el mapa. Esto se hace usando el método marcador(). Acepta las coordenadas donde se mostraría el marcador.
// Show a market at the position of the Eiffel Tower
let eiffelMarker = L.marker([48.8584, 2.2945]).addTo(map);
// Bind popup to the marker with a popup
eiffelMarker.bindPopup("Eiffel Tower").openPopup();
También podemos agregar una ventana emergente al marcador que mostraría el nombre del marcador usando el método bindPopup(). Esta ventana emergente se puede abrir de forma predeterminada con el método openPopup().
Por lo tanto, creamos con éxito un mapa utilizando la biblioteca Leaflet.js y aprendimos a ver una posición específica del mundo.
Salida final:
Código completo:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet.js Guide</title>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Get the leaflet CSS file -->
<link rel="stylesheet" href=
"https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
</head>
<body>
<h1>My Leafletjs Map</h1>
<!-- Specify the map and it's dimensions -->
<div id="map" style="width: 960px; height: 500px"></div>
<!-- Get the leaflet JavaScript file -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<script>
// Initialize the map
const map = L.map('map')
// Get the tile layer from OpenStreetMaps
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// Specify the maximum zoom of the map
maxZoom: 19,
// Set the attribution for OpenStreetMaps
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Set the view of the map
// with the latitude, longitude and the zoom value
map.setView([48.8584, 2.2945], 16);
// Set the map view to the user's location
// Uncomment below to set map according to user location
// map.locate({setView: true, maxZoom: 16});
// Show a market at the position of the Eiffel Tower
let eiffelMarker = L.marker([48.8584, 2.2945]).addTo(map);
// Bind popup to the marker with a popup
eiffelMarker.bindPopup("Eiffel Tower").openPopup();
</script>
</body>
</html>
Producción: