Geodata background
Tim, Kiya | 17.8.2023

How to add drawing to your leaflet map

Geodata > How to add drawing to your leaflet map

With and ngx-leaflet, you can create an interactive map in your Angular application and add drawing functionalities. This allows users to draw lines, polygons, and other geometries on the map. Here's a step-by-step guide on combining and ngx-leaflet:

Step 1: Set up the project

Make sure you have set up an Angular project. If not, install Angular CLI globally with: npm install -g @angular/cli.

Step 2: Install ngx-leaflet and

Add ngx-leaflet and to your project:

1npm install ngx-leaflet leaflet @geoman-io/leaflet-geoman-free

Step 3: Create a map component

Create a map component in which you incorporate the map and the drawing functionality. Here you can utilise the onMapReady event to activate the drawing functionality.

1import { Component, OnInit } from '@angular/core';
2import * as L from 'leaflet';
3import 'leaflet-geoman-free';
6  selector: 'app-map',
7  template: '<div id="map"></div>',
8  styleUrls: ['./map.component.css']
10export class MapComponent {
12  onMapReady(map: L.Map) {
13    L.tileLayer('https://{s}{z}/{x}/{y}.png').addTo(map);
15    // Activate the drawing functionality of
17  }

Step 4: Use the map component

Use the onMapReady event function in the HTML template of the map component:

1<div id="map" leaflet [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"></div>

Step 5: Configure map options

Adjust the map options according to your needs. Here you can set the appearance and initial view of your map:

1options = {
2  layers: [
3    L.tileLayer('https://{s}{z}/{x}/{y}.png', {
4      maxZoom: 19,
5      attribution: 'OpenStreetMap'
6    })
7  ],
8  zoom: 13,
9  center: L.latLng(51.505, -0.09)

Step 6: Adjust the styling

Design your map by customizing the CSS classes for the map component.

With this guide, you can utilise and ngx-leaflet to create an interactive drawing map in your Angular application. Don't forget to consult the ngx-leaflet and documentations for more detailed information and adjust your application according to your requirements.

  • How to set up the project?
  • How to install ngx-leaflet?
  • How to install
  • How to create a map component?
  • How to configure map options?
Tim Tilch
Tim (Softwareentwickler)

... ist als Softwareentwickler vorwiegend im Frontend unterwegs, vor allem mit TypeScript und Angular, aber auch mit RxJS und NGXS. Seine besondere Stärke sind die Konzeption und Umsetzung von ansprec... mehr anzeigen


... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund