I have successfully integrated ngx-leaflet-draw into my angular6 project and am able to draw polygons on the map. However, I am struggling to retrieve the coordinates of the polygon locations. My goal is to show users within the polygon area by querying a database. Despite consulting the official documentation, I have not been able to find a solution.
Below is an excerpt from my app.component.ts file:
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);
}
}
Here is a snippet from my app.component.html file:
<div leaflet style="height: 400px;"
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletDrawReady)="sample($event)"
>
</div>
This is my first time using the Leaflet map library. Any assistance in finding a solution would be greatly appreciated.