In this tutorial, you’ll learn how to use leaflet in Angular web applications. From the official documentation,
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.
This tutorial assumes the reader to have a basic understanding of Angular web application development. You’ll start by creating an Angular web app and learn how to use Leaflet in Angular.
Creating An Angular Web App
Once you have the angular-cli installed, start by creating an Angular web app.
// create angular web app
ng new angular-leaflet
Navigate to the project folder and start the server.
// start server
npm start
You will have the application running at http://localhost:4200.
Use Leaflet In Angular
Download Leaflet from the official home page. Extract the leaflet package and copy the folder to the src/assets.
Include the leaflet script and CSS style to the src/angular.json file. Here is how it looks:
"styles": [
"src/styles.css",
"src/assets/leaflet/leaflet.css"
],
"scripts": [
"src/assets/leaflet/leaflet.js"
] ]
When you include the leaflet script inside the Angular project, it gets loaded and exported into a a L variable. So to use Leaflet inside the Angular component, you need to declare the variable inside AppComponent.
// declare variable
declare let L;
Now use Leaflet to create a map using the following piece of code from the official documentation.
import { Component, OnInit } from '@angular/core';
declare let L;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() {
}
ngOnInit() {
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
}
Add a div HTML element to the app.component.html file.
Add the following style to the app.component.css file.
div{
height: 1000px;
width: 100%;
}
Save the above changes and you will have the leaflet map rendered in the web browser.
How to Use Leaflet In Angular
Use Leaflet Plugin In Angular
Leaflet library provides a number of plugins for use in Leaflet maps. Let’s have a look at how to include the leaflet plugin in Angular web application.
You’ll try to integrate the Leaflet Routing Machine plugin into our existing Angular application.
Download the plugin using NPM.
// install plugin
npm install --save leaflet-routing-machine
Once the plugin has been installed include the plugin style in the angular.json styles.
"styles": [
"src/styles.css",
"src/assets/leaflet/leaflet.css",
"./node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.css"
]
Import the script in the AppComponent in app.component.ts file.
// import plugin
import '../../node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.js'
Add the routing code to draw the route using the plugin. Here is how the app.component.ts file looks:
import { Component, OnInit } from '@angular/core';
declare let L;
import '../../node_modules/leaflet-routing-machine/dist/leaflet-routing-machine.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor() {
}
ngOnInit() {
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
]
}).addTo(map);
}
}
Save the above changes and you will have the plugin working in the leaflet map.
Wrapping It Up
In this tutorial, you learnt how to use Leaflet in Angular web application. You also learnt how to use plugins provided by leaflet in an Angular application.
Source code from this tutorial is available on GitHub.
Do let us know your thoughts or suggestions in the comments below.