How to add drawing to your leaflet map

With Geoman.io 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 Geoman.io 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 Geoman.io

Add ngx-leaflet and Geoman.io 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';
4
5@Component({
6  selector: 'app-map',
7  template: '<div id="map"></div>',
8  styleUrls: ['./map.component.css']
9})
10export class MapComponent {
11
12  onMapReady(map: L.Map) {
13    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
14    
15    // Activate the drawing functionality of Geoman.io
16    map.pm.addControls();
17  }
18}

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}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
4      maxZoom: 19,
5      attribution: 'OpenStreetMap'
6    })
7  ],
8  zoom: 13,
9  center: L.latLng(51.505, -0.09)
10};

Step 6: Adjust the styling

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

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