bluehalo/ngx-leaflet-draw

ngx-leaflet-draw set polygon points during initialization

Mirosvo92 opened this issue · 7 comments

Hello!) I need help with use leaflet-draw. Tell me, please, I use Angular 6, I want to set points on the polygon during component initialization that the user can change.

Hello!) I am sorry for my question, I have found answer, thank you for your work)

Closing cause it sounds like the issue is resolved. Thanks!

@Mirosvo92

Can you please link to where you found the solution? Thanks.

@Mirosvo92

Can you please link to where you found the solution? Thanks.

I used this settings in component:
` @input() pointsCoor: any[];
map: L.Map;
lay: L.Layer[] = [];
editableLayers = new L.FeatureGroup();
coord: any[];
//
drawOptions = {
position: 'topright',
draw: false,
edit: {featureGroup: this.editableLayers, remove: false}
};

onMapReady(map: L.Map) {
....
}

onDrawReady(drawControl: L.Control.Draw) {
this.map.on(L.Draw.Event.EDITED, (e) => {
...
});
}

in view<div id="map" style="width: 100%; height: 400px;"
leaflet
leafletDraw
[leafletOptions]="options"
[leafletDrawOptions]="drawOptions"
(leafletMapReady)="onMapReady($event)"
[leafletLayers]="lay"
[(leafletCenter)]="center"
(leafletDrawReady)="onDrawReady($event)">

`

@Mirosvo92

Can you please link to where you found the solution? Thanks.

and I have found some example
https://github.com/TheMaximumDrive/dosaX
you can use it

onDrawReady(drawControl: L.Control.Draw) {
this.map.on(L.Draw.Event.EDITED, (e) => {
...
});
}

Hello, Could you add more detail please? I am in trouble for edit polygon and get the update coordinates. My difference is L.polygon. I have added cootdinates and options into that. The polygon has show up on the map but can not edited.

   var polygonJson =L.polygon (select,{
         fillColor: result.color, 
         fillOpacity: 0.5,  
         color: result.color, 
         fill: true,
      })
     
     this.drawnItems.addLayer(polygonJson)

And the html;

<div  
    style="height: 100vh;"
    leaflet
    leafletDraw 
    [leafletOptions]="options"
    [leafletDrawOptions]="drawOptions"
    (leafletDrawCreated)="onDrawCreated($event)">
    <div [leafletLayer]="drawnItems"></div>
</div>

My question is hot [leafletDrawOptions]="drawOptions" edit L.polygon?