drawCircularGeofence()

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');
                    }
                });
        });
    }