How get the location coordinates of polygon in ngx-leaflet-draw?

Question

I integrated ngx-leaflet-draw for my angular6 project.I could draw polygon over the map.But I don't know how to get the polygon location coordinates.I want to show the users inside the polygon by performing database search.I went through the official documents but it didn't help me.

My app.component.ts file as below

import { Component } from '@angular/core';
import {tileLayer,latLng, marker, Marker} from 'leaflet';
import * as L from 'leaflet';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    title = 'map';

    options = {
        layers: [
          tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
        ],
        zoom: 15,
        center: latLng(8.524139,76.936638)
    };

      drawOptions = {
        position: 'topright',
    draw: {
        marker: {
            icon: L.icon({
                iconSize: [ 25, 41 ],
                iconAnchor: [ 13, 41 ],
                iconUrl: '../../assets/marker-icon.png',
                shadowUrl: '../../assets/marker-shadow.png'
            })
        },
        polyline: false,
        circle: {
            shapeOptions: {
                color: '#aaaaaa'
            }
        }
    }
};

ngOnInit(){


}

sample(e) {
    console.log(e);
}


}

and my app.component.html file as:

<div leaflet style="height: 400px;"
     leafletDraw
     [leafletOptions]="options"
     [leafletDrawOptions]="drawOptions"
     (leafletDrawReady)="sample($event)"
     >
</div>

Using leaflet map for the first time.

Please help me to find a solution.

kboul · Accepted Answer · 2019-02-13T09:35:22.297

2

You need to listen to the onMapReady event, get a reference to the map and do what you would do on plain Leaflet library:

template:

<div leaflet style="height: 400px;"
    leafletDraw
    [leafletOptions]="options"
    [leafletDrawOptions]="drawOptions"
    (leafletMapReady)="onMapReady($event)">
</div>

component:

onMapReady(map: Map) {
    map.on(L.Draw.Event.CREATED, function (e) {
        // const type = (e as L.DrawEvents.Created).layerType,
        // layer = (e as L.DrawEvents.Created).layer;
        const type = (e as any).layerType,
              layer = (e as any).layer


        if (type === 'polygon') {
            // here you got the polygon coordinates
            const polygonCoordinates = layer._latlngs;
            console.log(polygonCoordinates);
        }
    });
}

Demo

edited Feb 13 '19 at 09:35

answered Oct 04 '18 at 13:23

kboul

13,836
5
42
53

I got coordinates and following error ERROR in src/app/app.component.ts(47,17): error TS2314: Generic type 'Map' requires 2 type argument(s). src/app/app.component.ts(54,46): error TS2339: Property '_latlngs' does not exist on type 'Polyline | Polygon | Rectangle | CircleMarker |...'. Property '_latlngs' does not exist on type 'Polyline'. – Rahul K R Oct 04 '18 at 13:38
I know. It is an annoying thing by Typescript. I figured it out for layerType & layer but not for _latlngs until now – kboul Oct 04 '18 at 13:40
Now the typescript error has gone. But one error remains there ERROR in src/app/app.component.ts(47,17): error TS2314: Generic type 'Map' requires 2 type argument(s). – Rahul K R Oct 04 '18 at 13:53
I do not get this error in my demo. Maybe it comes from your implementation. I will share a github link to demonstrate it. – kboul Oct 04 '18 at 13:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181291/discussion-between-rahul-k-r-and-kboul). – Rahul K R Oct 04 '18 at 14:06

How get the location coordinates of polygon in ngx-leaflet-draw?

1 Answers1