Adding the map Leaflet component to an Angular application
Introduction
Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.
leaflet is an interactive maps component library that supports mobile devices.
Prerequisites
Before you start, you need to install and configure the tools:
Getting started
Create and configure the account on the Mapbox
1. Let’s create the account. Access the site https://www.mapbox.com/ and click on the button Sign up.
2. Fill in the fields Username, Email, Password, First name, Last name, click on the checkbox I agree to the Mapbox Terms of Service and Privacy Policy. and click on the button Get started.
3. Check the registered email.
4. Click on the link in the email sent.
5. Copy the token displayed in the Dashboard menu and, in my case, the token was displayed pk.eyJ1IjoiYnJhc2thbSIsImEiOiJja3NqcXBzbWoyZ3ZvMm5ybzA4N2dzaDR6In0.RUAYJFnNgOnnZAw
because this token will be configured in the Angular application.
6. Ready! Account created and token generated.
Create the Angular application
1. Let’s create the application with the Angular base structure using the @angular/cli
with the route file and the SCSS style format.
2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Configure the Mapbox token in the src/environments/environment.ts
and src/environments/environment.prod.ts
files as below.
4. Create the src/assets/images
folder and copy the marker-icon.png
and marker-shadow.png
files.
5. Install the leaflet
and @types/leaflet
libraries.
6. Configure the leaflet
library. Change the angular.json
file and add the leaflet.css
file as below.
7. Remove the contents of the AppComponent
class from the src/app/app.component.ts
file. Import the leaflet
service and create the getCurrentPosition
, loadMap
methods as below.
8. Remove the contents of the src/app/app.component.html
file. Add the map div
tag as below.
9. Add the style in the src/app/app.component.scss
file as below.
10. Run the application with the command below.
11. Ready! Access the URL http://localhost:4200/
and check if the application is working. See the application working on GitHub Pages and Stackblitz.
The application repository is available at https://github.com/rodrigokamada/angular-leaflet.
This tutorial was posted on my blog in Portuguese.