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 (OpenStreetMap in Angular with Leaflet) , 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.

What makes this map different

This example goes beyond showing a single base map. It combines an OpenStreetMap layer with WMS overlays from public geographic services, so the user can compare relief, flood-risk layers, seismic information and recent earthquake data from the same Angular component.

The article is the continuation of OpenStreetMap in Angular with Leaflet. First read the base installation if you need the SSR-safe Leaflet setup; then use this page to understand how layer controls, geolocation and external map services are connected.

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 OpenStreetMap in Angular with Leaflet, 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:

SSR, privacy and production details

Leaflet depends on browser APIs, so the map should be initialized only when Angular is running in the browser. The explanatory text, headings and code remain available in the server-rendered HTML, while the interactive map is activated after hydration. That keeps the article useful for crawlers and avoids server-side crashes caused by window, geolocation or DOM-only libraries.

Geolocation also needs a product decision. Ask for the user's location only after a clear action, explain why the location is needed and keep a default map center for people who reject the permission. In this example, the default center is Madrid and the permission is requested from the button rather than automatically on page load.

For production, review each WMS provider, attribution text, cache policy and service availability. External map layers can be slow or temporarily unavailable, so the application should still show the base map and a useful message when an overlay fails.