in Frontend/src/app/maps/bing-maps.service.ts [213:257]
drawCircularGeofence(subject: Subject<Point>, initialCenter: Point, initialRadius: number, radius: Observable<number>) {
this.load().then(() => {
const tempGeofence = new Geofence();
tempGeofence.fenceCenter = initialCenter || new Point();
tempGeofence.radiusInMeters = initialRadius || 1;
tempGeofence.areaType = AreaType.Circular;
this.resetMap();
this.geofencesLayer.setVisible(true);
this.geofencesLayer.clear();
// Draw initial geofence area value if it exists
if (initialCenter && initialCenter.latitude && initialCenter.longitude && initialRadius) {
this.showGeofencePolygon(tempGeofence, this.geofenceGreenBlue, this.genericColors[0]);
}
// If new center set, update temp geofence and redraw
this.drawHandlerId = Microsoft.Maps.Events.addHandler(this.map, 'click', e => {
const event = e as Microsoft.Maps.IMouseEventArgs;
tempGeofence.fenceCenter.latitude = event.location.latitude;
tempGeofence.fenceCenter.longitude = event.location.longitude;
this.geofencesLayer.clear();
this.showGeofencePolygon(
tempGeofence, this.geofencePink, this.genericColors[4], '/assets/images/circular-geofence-center-pink.svg');
subject.next(tempGeofence.fenceCenter);
});
// If radius changed, update temp geofence and redraw if center is specified
// Stop subscribing to updates if the drawHandler is changed
const currentDrawHandlerId = this.drawHandlerId;
radius
.pipe(takeWhile(() => currentDrawHandlerId === this.drawHandlerId))
.subscribe(r => {
tempGeofence.radiusInMeters = r;
if (tempGeofence.fenceCenter && tempGeofence.fenceCenter.latitude && tempGeofence.fenceCenter.longitude) {
this.geofencesLayer.clear();
this.showGeofencePolygon(
tempGeofence, this.geofencePink, this.genericColors[4], '/assets/images/circular-geofence-center-pink.svg');
}
});
});
}