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.

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: