Mapas multicapa en Angular con Leaflet y OpenStreetMap y geolocalizar usuarios.

Visto el éxito del anterior artículo sobre la instalación en Angular con Leaflet y OpenStreetMap (https://1938.com.es/ejemplo-maps-angular) , he decidido crear una nueva aplicación que amplíe las funcionalidades.

El objetivo de este tutorial es que puedas usar diferentes tipos de mapas de OpenStreetMap en un único widget de Leaflet y geolocalizar a los usuarios en el mismo mapa. De esta forma podrás otorgar información más personalizada a tus usuarios y mejorar los servicios de tu aplicación en angular.

A continuación os dejo un ejemplo que podéis encontrar en el siguiente repositorio https://github.com/al118345/Leaflet_angular_ejemplo_multicapa_localizacion. Aviso, el test está basado en información multicapa obtenida de http://www.ign.es/ (Instituto Geográfico Nacional de España) y, por lo tanto, solamente se puede utilizar para consultar información que afecte a la región de España.

Nota actual de producción: geolocalización, HTTPS y servicios de teselas

La geolocalización del navegador solo funciona en contextos seguros y requiere permiso explícito del usuario. También puede estar limitada por la cabecera Permissions-Policy, así que una aplicación Angular en producción debe tratar estados de permiso denegado, ubicación no disponible o timeout con una alternativa clara. Para teselas y capas WMS, mantén atribución visible, respeta las políticas de uso y no trates los servidores públicos de OpenStreetMap como infraestructura ilimitada.

Ejemplo resultado

Posición en el mapa

Antes de empezar, instalamos Leaflet

Este proyecto parte del ejemplo de https://1938.com.es/ejemplo-maps-angular, es decir, hemos modificado el código para añadir tanto la geolocalización como el mapa de OpenStreetMap y la posibilidad de interactuar con diferentes mapas.

Para empezar, instalar las dependencias:

Y añadir en el fichero angular.json la siguiente información:

Solicitar la geolocalización a un usuario.

Para solicitar la geolocalización a un usuario, debemos añadir el siguiente código en el componente que lo necesite.

Esta implementación se puede añadir en el componente que se desee y solicitar la geolocalización o incluso utilizarlo asociado a un servicio y ser invocado por varios componentes que lo soliciten.

Su función es comprobar si el navegador permite realizar geolocalizaciones, en caso negativo, se solicita al usuario que active esta funcionalidad.

Permiso de geolocalización en navegador safari.

Una vez permitido, se obtiene la posición del usuario y se muestra en el mapa. En caso negativo se muestra una posición inicial por defecto.

Mapas multicapa

El primer punto es añadir el siguiente código en vuestro componente

Este código añade el siguiente botón en el mapa:

Es cierto que en el ejemplo de arriba no aparece, es porque este proyecto tiene muchas adaptaciones y ha cambiado un poco el diseño de Leaflet. Lo habitual es el diseño mostrado en la imagen anterior.

Una vez presionado aparece el siguiente menú:

Dependiendo la vista seleccionada se muestra una capa diferente del mapa. En el caso de ejemplo, hemos utilizado mapas españoles para mostrar las zonas más sísmicas de estos últimos años y las zonas más inundables.

Código

A continuación tienes los fragmentos principales del ejemplo para poder reproducir el mapa multicapa en tu propio proyecto. Primero se instalan las dependencias, después se añade la lógica de geolocalización y finalmente se configura el control de capas con las distintas fuentes WMS.

Fichero del ejemplo: terminal

Fichero del ejemplo: angular.json

Fichero del ejemplo: component.ts

Este bloque se encarga de solicitar la ubicación del usuario, actualizar las coordenadas del mapa y colocar el marcador en la posición seleccionada.

Fichero del ejemplo: component.ts

Aquí se define el mapa base y el conjunto de capas superpuestas para mostrar relieve, zonas inundables, fallas y riesgo sísmico dentro del selector de capas.

Os podéis descargar el código en el siguiente repositorio: https://github.com/al118345/Leaflet_angular_ejemplo_multicapa_localizacion y el siguiente video https://www.youtube.com/watch?v=MvH4tu51WeY: