Integrate EasyButton, Geoman with ngx-leaflet - leaflet

Question

I am using raw leaflet.js in my Angular Application which depends on some leaflet plugins like EasyButton, Geoman, Distortable Image. ngx-leaflet looks cool and simple. So I've decided to migrate to ngx-leaflet. But I am sure if it is possible to integrate these plugins with the library. If so provide some guidance.

Answer 1

Answering my own question.
Here are the steps I followed to get geoman working with ngx-leaflet.
Install geoman npm i #geoman-io/leaflet-geoman-free. refer geoman github page
Import geoman css in styles.scss #import '../node_modules/#geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
Import geoman in the component import '#geoman-io/leaflet-geoman-free';
Done.
then use it like this
this.map.pm.addControls({
position: 'topleft',
drawCircle: false,
drawCircleMarker: false,
drawPolyline: true,
drawRectangle: false,
drawPolygon: true,
editMode: false,
dragMode: false,
cutPolygon: false,
removalMode: false,
drawMarker: false
});

Answer 2

I am trying this integration, but I cannot find any typifications for Geoman.
In my project, I use #asymmetrik/ngx-leaflet and follow the documentation to access the map reference.
I wrote a component and within the call onMapReady, map.pm stops the construction of my application.
I get this error: The property 'pm' does not exist in type 'Map'.
import { Component, OnInit } from '#angular/core';
import * as L from 'leaflet';
import '#geoman-io/leaflet-geoman-free';
#Component({
selector: 'app-main-map',
templateUrl: './main-map.component.html',
styleUrls: ['./main-map.component.css']
})
export class MainMapComponent implements OnInit {
aMarker = L.marker([ -23.95, -46.38 ], {
icon: L.icon({
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
});
constructor() { }
ngOnInit(): void {
}
onMapReady(map: L.Map) {
this.aMarker.addTo(map);
map.pm.addControls({
position: 'topleft',
drawCircle: false,
drawCircleMarker: false,
drawPolyline: true,
drawRectangle: false,
drawPolygon: true,
editMode: false,
dragMode: false,
cutPolygon: false,
removalMode: false,
drawMarker: false
});
}
}
I know it's not the best, but the temporary solution is to use bracket notation. It works on my Angular 10 project.
// The same code as above, but with bracket notation.
onMapReady(map: L.Map) {
this.aMarker.addTo(map);
map["pm"]["addControls"]({
position: 'topleft',
drawCircle: true,
drawCircleMarker: true,
drawPolyline: true,
drawRectangle: true,
drawPolygon: true,
editMode: true,
dragMode: true,
cutPolygon: true,
removalMode: true,
drawMarker: true
});
}
While I can't find a better solution or time to create typings for Geoman, I use it like this.
I hope it is useful to anyone.

Answer 3

This worked for me in Angular 8 project:
npm i #geoman-io/leaflet-geoman-free
In your component
import '#geoman-io/leaflet-geoman-free';
import 'style-loader!#geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';