How To Use Leaflet In Angular

How To Use Leaflet In Angular Web Apps

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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    }

}

Add a div HTML element to the app.component.html file.

<div id="map">
  
</div>

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
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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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.

Leaflet Plugin In Angular
Leaflet Plugin In Angular

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.