Para esta ocación vamos a utilizar la biblioteca de javascript de leaflet, para realizar un visor cartográfico web básico.
Qué es leaflet
Leaflet es una biblioteca de JavaScript de código abierto que se utiliza para crear mapas interactivos y visualizaciones de datos geoespaciales en aplicaciones web. Es una de las bibliotecas más populares y utilizadas para mapas interactivos en la web, conocida por su simplicidad, ligereza y facilidad de uso. Leaflet proporciona una gama de funciones y herramientas que permiten a los desarrolladores integrar mapas interactivos en sus aplicaciones web de una manera sencilla y eficaz.
Por qué usamos leaflet
- Facilidad de uso: Leaflet ofrece una API intuitiva y fácil de usar que permite a los desarrolladores integrar rápidamente mapas interactivos en sus aplicaciones web.
- Personalización: Los desarrolladores pueden personalizar fácilmente la apariencia de los mapas y agregar marcadores, polígonos, polilíneas y otras capas para mostrar datos geoespaciales de forma visualmente atractiva.
- Compatibilidad multiplataforma: Leaflet es compatible con la mayoría de los navegadores web modernos y se puede utilizar en una variedad de plataformas y dispositivos, lo que lo convierte en una opción versátil para aplicaciones web.
- Amplia comunidad de usuarios y soporte: Leaflet cuenta con una comunidad activa de usuarios y desarrolladores que contribuyen con complementos, documentación y recursos útiles, lo que facilita el aprendizaje y la resolución de problemas.
- Compatibilidad con otras tecnologías: Leaflet se integra fácilmente con otras bibliotecas y tecnologías web, lo que permite a los desarrolladores combinarla con otras herramientas y frameworks para crear aplicaciones web más complejas y potentes.
- Licencia de código abierto: Leaflet se distribuye bajo la licencia de código abierto BSD-2, lo que significa que es gratuito para su uso, modificación y distribución, lo que fomenta su adopción y contribución por parte de la comunidad de desarrolladores.
Realizar el primer visor con leaflet
Para empezar, vamos a ir a la web oficial de leaflet, donde tenemos toda la documentación. Desde aquí podemos descargarnos la librería e ircorporarla a nuestro proyecto. Para esta ocasión, vamos a usar el recurso en línea.
Aquí tendríamos un ejemplo de un html completo para un visor web cartográfico hecho con leaflet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa con Leaflet</title>
<!-- Agrega el enlace al CSS de Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin=""/>
<!-- Establece el estilo del contenedor del mapa -->
<style>
#mapid { height: 400px; }
</style>
</head>
<body>
<!-- Crea un div con un ID específico para mostrar el mapa -->
<div id="mapid"></div>
<!-- Agrega el enlace al script de Leaflet -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin=""></script>
<script>
// Inicializa el mapa y establece la vista en una ubicación y zoom específicos
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// Agrega una capa base utilizando el proveedor de mapas de OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(mymap);
// Agrega un marcador al mapa en una ubicación específica
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup('¡Hola! Este es un marcador de ejemplo.')
.openPopup();
</script>
</body>
</html>
Con esto ya tendríamos un visor web básico. A partir de aquí, empiezan todas las posibilidades que queramos. En este curso vamos a centranos en como realizar consultas espaciales con PostGIS y mostrar un resultado en el mapa que acabamos de generar.
Y si quieres aprender más concretamente cobre desarrollar visores con leaflet y javascript, aquí encontrarás más cursos relacionados.
