Search code examples
leafletngx-leafletleaflet-geoman

Integrate EasyButton, Geoman with ngx-leaflet

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 not sure if it is possible to integrate these plugins with the library. If so provide some guidance.

Solution

  • 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
    });