Integrate EasyButton, Geoman with ngx-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.

1. Install geoman npm i @geoman-io/leaflet-geoman-free. refer geoman github page

2. Import geoman css in styles.scss @import '../node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';

3. 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';