I am using angular google map(AGM) npm package. following is code
<agm-map
(mapClick)="polyineMapClicked($event)"
[ngStyle]="{ height: '400px' }"
[zoom]="zoom"
[latitude]="lat"
[longitude]="lng"
>
<agm-polyline strokeColor="#247ba0" *ngIf="showLine" (polyPathChange)="updatePath($event)" (lineRightClick)="onLineRightClick($event)" [editable]="true">
<agm-polyline-point
*ngFor="let point of polylinePoints"
[latitude]="point.lat"
[longitude]="point.lng"
></agm-polyline-point>
</agm-polyline>
</agm-map>
above is HTML code. here I want to add multiple polyline. when I click on map, polyline is added and I get latitude and longitude which I have saved in polylinePoints. but after adding one polyline, I want to add second polyline, while adding second polyline it continues with 1st polyline. How to break 1st polyline and add 2nd polyline.
What I have tired : I have use lineRightClick. on right click of mouse, I have save data in masterPolyLines array and make empty polylinePoints array. polylinePoints array is used to display polyline. by this I get 1st polyine, but when I click on map 2nd polyline is continue with 1st polyline. following are function in ts file
onLineRightClick(ev){
console.log('event on right click',ev);
//this._polylineManager.addPolyline(ev);
console.log('this.polylinePoints',this.polylinePoints);
this.masterPolyLines.push({
id : 1,
routes : this.polylinePoints
});
this.polylinePoints = [];
console.log('masterPolyLines',this.masterPolyLines);
}
polyineMapClicked($event){
console.log('event',$event);
this.polylinePoints.push({
lat: $event.coords.lat,
lng: $event.coords.lng
});
this.showLine = true;
setTimeout(() => {
this.divClick.nativeElement.click();
}, 200);
//setTimeout(() => this.showLine = true);
console.log('polylinePoints',this.polylinePoints);
}
I want to break 1st polyline and add 2nd polyline and more.