Multilayer maps in Angular with Leaflet and OpenStreetMap and geolocating users.

Given the success of the previous article about installation in Angular with Leaflet and OpenStreetMap (https://1938.com.es/ejemplo-maps-angular) , I have decided to create a new application that extends the functionalities.

The objective of this tutorial is that you can use different types of OpenStreetMap maps in a single Leaflet widget and geolocate users on the same map. In this way you will be able to provide more personalized information to your users and improve the services of your application in Angular.

Next I leave you an example that you can find in the following repository https://github.com/al118345/Leaflet_angular_ejemplo_multicapa_localizacion. Warning, the test is based on multilayer information obtained from http://www.ign.es/ (National Geographic Institute of Spain) and, therefore, it can only be used to consult information that affects the region of Spain.

Result example

Position on the map

Before starting, we install Leaflet

This project starts from the example at https://1938.com.es/ejemplo-maps-angular, that is, we have modified the code to add both geolocation and the OpenStreetMap map and the possibility of interacting with different maps.

To begin, install the dependencies:

And add in the angular.json file the following information:

Request geolocation from a user.

To request geolocation from a user, we must add the following code in the component that needs it.

This implementation can be added in the desired component and request geolocation or even use it associated with a service and be invoked by several components that request it.

Its function is to check whether the browser allows geolocations to be performed, in the negative case, the user is asked to activate this functionality.

Geolocation permission in Safari browser.

Once allowed, the user's position is obtained and shown on the map. In the negative case a default initial position is shown.

Multilayer maps

The first point is to add the following code in your component

This code adds the following button on the map:

It is true that in the example above it does not appear, it is because this project has many adaptations and it has changed a little the design of Leaflet. The usual thing is the design shown in the previous image.

Once pressed the following menu appears:

Depending on the selected view a different layer of the map is shown. In the example case, we have used Spanish maps to show the most seismic areas of recent years and the most flood-prone areas.

Code

Next you have the main fragments of the example so that you can reproduce the multilayer map in your own project. First the dependencies are installed, then the geolocation logic is added and finally the layer control is configured with the different WMS sources.

Example file: terminal

Example file: angular.json

Example file: component.ts

This block is in charge of requesting the user's location, updating the map coordinates and placing the marker in the selected position.

Example file: component.ts

Here the base map and the set of overlapping layers are defined to show relief, flood-prone areas, faults and seismic risk within the layer selector.

You can download the code in the following repository: https://github.com/al118345/Leaflet_angular_ejemplo_multicapa_localizacion and the following video https://www.youtube.com/watch?v=MvH4tu51WeY: