Using Bing Maps to remove shapes on a map that are included in an Angular-based front-end, using Spring Boot to provide and store the data.

This is the third article of the series. The first  article is about integrating Bing Maps with Angular and Spring Boot with Jpa. The second  article is about adding a new shape to the map and storing it in the Spring Boot backend.

This article is about removing properties of a map with a modal panel to confirm and delete it in the database. The project  AngularAndSpringWithMaps is used as an example. To remove a property the property has to be clicked on.

The Angular Front-End

In the  company-site.componten.ts file, click handlers are added to the Bing Map:

TypeScript

private addPolygon(polygon: Polygon): void {

    //console.log(this.map.getCenter());

    const polygonRings = polygon.rings.map(myRing =>

        myRing.locations.map(myLocation => new Microsoft.Maps

              .Location(myLocation.latitude, myLocation.longitude)));

    const mapPolygon = new Microsoft.Maps.Polygon(polygonRings);

    mapPolygon.metadata = {

        companySiteId: (this.componentForm

            .controls[this.COMPANY_SITE].value as CompanySite).id,

            polygonId: polygon.id } as PolygonMetaData;

    Microsoft.Maps.Events.addHandler(mapPolygon, 'dblclick', 

            (e) => this.onPolygonDblClick(e));  

        this.map.entities.push(mapPolygon);

}

private onPolygonDblClick(e: Microsoft.Maps.IMouseEventArgs |

                          Microsoft.Maps.IPrimitiveChangedEventArgs): void {

    if ((e as Microsoft.Maps.IMouseEventArgs).targetType === 'polygon'

        && (e as Microsoft.Maps.IMouseEventArgs).eventName === 'dblclick') {

        const myPolygon = 

        ((e as Microsoft.Maps.IMouseEventArgs).target) 

            as Microsoft.Maps.Polygon;

        this.openDeleteDialog(myPolygon.metadata as PolygonMetaData);

    }

}

In line 1, the addPolygon method is defined which is called when a property is added.

In lines 3-6, the polygon is converted in a Bing Maps polygon with rings.

In lines 7-10, metadata is added to the Bing Maps polygon. The companySite id and polygon id are needed to delete the entities in the database.

In lines 11-14, the onPolygonDblClick method is added as an event handler for the polygon on Bing Maps for a dblclick event.

In line 15, the polygon is added to the map.

In lines 16-17, the onPolygonDblClick handler is defined with the event of the map.

In lines 18-19, the events are filtered for dblclick events on a ‘polygon’.

In lines 20-22, the map polygon is retrieved of the event.

In line 23, the openDeleteDialog method is called with the polygon metadata to confirm the delete of the polygon.

#java #spring boot #angular #jpa #typescript