Using Bing Maps to remove Shapes With Angular in a Spring Boot Application
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.
Join the DZone community and get the full member experience.Join For Free
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:
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
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.
The modal dialog to confirm the deletion of the polygon is handled with the
In line 2-5, the polygon for the entity is filtered out of the
companySite and the existence is checked.
In line 6-10, the modal dialog of Angular Material is opened. The content of the modal is in the PolygonDeleteDialogComponent and the data property gets the
In lines 11-13, the modal dialog result is subscribed and filtered for the delete result.
In lines 15-20, the CompanySiteService is used to delete the polygon and then reload the
In lines 21-24, the reloaded
CompanySite is updated in the reactive form.
In line 23, possible pins are removed from the map.
In line 24, the map is updated with the
The Polygon Delete Modal
The PolygonDeleteDialog component has the content for the Angular Material modal panel:
In lines 1-3, the enum for the dialog results is defined.
In lines 4-7, the interface for the dialog metadata is defined.
In lines 9-14, the
PolygonDeleteDialogComponent is defined.
In line 15, the dialog results are provided as property.
In line 16, the
isTestData property is initialized.
In lines 18-2,1
data properties are set and the
isTestData property is set.
In lines 23-25, the
cancelClick method is created to close the dialog on the cancel click.
The PolygonDeleteDialog template shows the content of the modal:
In lines 1-4, the dialog title is displayed according to the
In lines 5-11, the dialog content is displayed according to the
In lines 13-14, the cancel button is displayed with
cdkFocusInitial and the modal is closed with the
In lines 15-17, the delete button is displayed with
isTestData to check that no test data is deleted and the modal is closed with the
DialogResults.delete result value.
The Spring Boot Backend
The REST endpoint is in the CompanySiteController:
In lines 1-9, the
CompanySiteController is defined.
In lines 11-14, the REST endpoint
getCompanySiteById is defined with the Path Variable
id as id.
In lines 15-19, the
CompanySiteService is used to get the
companySite by id and return it. If it is not found it throws an exception.
In lines 23-27, the REST endpoint
deletePolygon is defined with the Path Variable '
id' and Path Variable
In lines 30-31, the
CompanySiteService is used to delete the polygon of the
The CompanySiteService reads the
CompanySite and deletes the Polygon:
In lines 1-17, the CompanySiteService is defined.
In lines 19-23, the method
findBySiteId retrieves the
CompanySite with the CompanySiteRepository and uses map to order the Locations.
In lines 25-30, the
deletePolygon method is defined and the
CompanySite is retrieved with the repository by id and false is returned if the
CompanySite is not found.
In lines 31-36, the Polygon to delete is filtered from the
CompanySite and it is checked that there is no test data (id < 1000). If the polygon is not found false is returned.
In line 37, the Polygon is removed from the
In lines 38-49, the references between the entities are removed and the entities to delete are added to the sets to remove.
In lines 50-52, the sets
ringsToDelete are removed and the polygon is removed.
Developing this project was easier than expected. The TypeScript support of Bing Maps helped a lot. Angular with Material provides a framework that enables fast development. Spring Boot with Jpa and Liquibase is a very good backend framework that saves time. A big thank you to all the teams that provide such tools.
Opinions expressed by DZone contributors are their own.