Using Bing Maps to add Shapes With Angular in a Spring Boot Application
Using Bing Maps to create 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
Create a New Property at a companySite
To create a new property the user can click on the map. The first click is the center of the property and the following click defines the shape of the property. The locations are shown on the map with icons in the CompanySiteComponent:
In line 3, the
onMapClick method is registered in
ngAfterViewInit with Bing Maps.
In line 10, we check that the event has a location property.
In lines 11-13, a new location is created.
In line 14, the new location is added to the
newLocation array of the component.
In lines 15-20, the new location is wrapped in a
PushPin and the
PushPin options are added.
Editing New Locations
So that we can edit the new locations, they are displayed in a Material list. They can be enabled and disabled to correct the borders. Disabled locations disappear on the map. The list and the buttons are on the CompanySite template:
In lines 2-3, the Material list is created and the
newLocationsChanged(...) method is added.
In lines 4-9, the Material list options are created from the
newLocations property of the
CompanySite component. The selected property of the locations in the
newLocation array is used for the checkbox.
newLocationsChanged method is on the CompanySite component:
In lines 2-8, the
newLocations array is updated with the selected values of the locations of the list, to add changed selections.
In line 9, the
updateMapPushPins method is called.
In lines 13-15, the arrays
mapPins are created.
In lines 16-24, the
mapPins array is filled with all the pins of the Bing Map.
In lines 25-26, we check if the
newLocations array is empty, then the all pins of the map are added to the
In lines 29-33, the
mapPin for the
currentLocation array entry is filtered out.
In lines 34-36, we check that
mapPin is up and running and deselected – we then add it to the
In lines 37-44, we check if
mapPin is non-existent and has been selected – then we create it with the
newLocation.location and add it to the
In line 47, the pins in the
pinsToRemove array are removed from the map.
In line 48, the pins in the
pinsToAdd array are added to the map.
The buttons for the new property are in the template:
In line 1, the div is shown if the
newLocations are not empty.
In lines 2-3, the button is added to add the
In lines 4-5, we add the button for removing
In lines 6-7, the button to reset the DB is added – the
resetInProgress property disables it if DB reset is in progress.
The methods are in the component:
In lines 1-5, we checked that the
companySite has already stored to the database.
In lines 6-7, the
companySite is set.
In lines 8-24, the new ring for Bing Maps is created and the new polygon for Bing Maps is created. The first
newLocation is the polygon center and only the selected
mapPins are added to the ring.
In line 25 ,the new polygon is added to the
In lines 26- 32, the
companySite is sent to the backend to be stored. It then gets returned and the
companySite is updated, the
mapPins are cleared, and the new
polygon(property) is displayed on the map.
In lines 35-40, the
clearMapPins method is called to empty the
newLocaltions array and updates the map with the
In lines 42-43, the
resetDb method is declared and the
resetInProgress property is set to true to prevent it from being called more than once (disable in the template).
In line 44, the
resetDb method is called on the
companySite service to reset the database.
In lines 45-49, the test
companySite is reloaded.
In lines 50-55, the test
companySite is set in the reactive form. The
mapPins are cleared. The map is updated with the test
companySite and the
resetInProgress property is set to false again.
This is the CompanySiteService that is used:
In lines 1-4, the
CompanySite service is defined. It is a local service for the map module.
In lines 6-9, the
upsertCompanySite method is defined to create/update
In lines 11-13, the
resetDb method is defined to reset the database to the test data. It returns only a boolean.
In lines 15-18, the
delete Polygon method is defined to delete a polygon in a
companySiteId and the
polygonId are URL parameters.
Storing the New Property
companySite REST endpoint is created in the backend with the CompanySiteController:
In lines 2-11, we define the controller for the REST endpoint for adding properties and reseting the properties.
In lines 13-16, the POST endpoint for the
companySite is created. The
companySite is put in the
In lines 17-19,
companyService is used to find an existing
CompanySite in the DB or returns a new
In lines 20-22, the
companyService is used to store the values of the
companySiteDto in the
companySite entity with the EntityToDtoMapper. The EntityToDtoMapper is a class that maps a DTO in an entity and entity to DTO.
In lines 23-25, the
ResponseEntity is created with the EntityToDtoMapper to map the
companySite entity to the
In lines 28-30, the reset endpoint for reseting the DB is created with a boolean as the result.
In lines 31-32, the
companySiteService is used to reset the DB and return the
companySite is stored/updated in the DB with the CompanySiteService:
In lines 1-17, the transactional
CompanySiteService is created with the dependencies that are needed. Spring injects the dependencies automatically in the constructor.
In lines 31-34, the
upsetCompanySite method is created to store the
companySite to the DB with a Spring JPA Repository. The
@OneToMany annotations of the entities have
cascade = CascadeType.ALL and
orphanRemoval = true. That makes sure that entities that are no longer in the entity tree are removed from the DB. To put the
Locations in a useful order the method
orderCompanySite is used to sort the returned entity.
In lines 20-29, the
orderCompanySite method is created. JPA returns the locations in a random order so the locations have to be sorted. To support that the Location entity has a
orderId property that is set during the mapping of the DTO to the entity in the EntityDtoMapper. The method iterates down to the ring entity where the
Locations to order are stored. It uses a stream to sort the
Location entities according to the
orderId property and puts the
Locations in a
LinkedHashSet to maintain the order in the Set.
In line 36, the
resetDb method is created.
In lines 37-60, something simple happens. The primary keys of the entities are created by a database sequence starting with 1000 and the test data primary keys are smaller than 1000. From the CompanySite Entity down all related entities with a primary key starting from 1000 are removed. The entities to remove are stored in lists.
In lines 61-64, the lists of the entities to remove can be deleted on the DB with JPA because the dependencies are removed.
The TypeScript support of Bing Maps makes working with the API much easier. Angular with the Material components enables fast development of features to edit and store the shapes on the map. Spring Boot with REST support and JPA enables easy development of the backend to store the shapes in the database.
In the next article, a property gets removed from the map with a modal panel to confirm the deletion.
Opinions expressed by DZone contributors are their own.