Serve Google Maps using Spring Boot and MongoDB

Produce a custom map using Google Maps Javascript API — Part 3

Photo by KOBU Agency on Unsplash

Previous Read

Produce a custom map using Google Maps Javascript API

Automate the data processing using python with pandas

There are multiple issues

• Although there is individual page for the police force (to import different javascript from your webpage), the data point is too much such that the mobile device almost stuck loading and not having a good experience.
• The data point is pre-filtered using python that I mentioned in previous articles, I have no easy way to filter the crime type when I need it.

I decided to further enhance the page such that

• The data is dynamically feed such that it only gets the data point within your view and zoom level to reduce the traffic and also provide better user experience (less lag).
• I want to add a filter so that user can have their own filtering.

Let’s start

1. Database

It makes sense to use NoSQL rather than relational Database for storing the crime data. I use MongoDB for this project, please refer to https://docs.mongodb.com/manual/administration/install-community/ for step-by-step installation.

2. Import data to MongoDB

While last time we use python to read the csv and export to the file, we can enhance the python to insert data to MongoDB. We require additional library pymongo to do the work, use pip to install python library

pip install pymongo

There is 14 crime types in the data, I would like to have the individual field to store the type, also to have the bitwise information stored in the database so that I can use the mongo bitwise search functionality later to have faster query.

For example, ct_is_anti is 1 in case the crime type is Anti-social behaviour, note also that the crimetype_bitwise_humanreadable field, it is stored as ‘10000000000000’, the leftmost 1 indicate it is a anti-social behaviour, the crimetype_bitwise is just the integer value (base 10) of ‘10000000000000’, we will need this later for the application to query the data.

Here the python program

3. Application server

I decided to use spring boot to have fast prototype, I need the application to send the json data to the browser, I choose to use spring-boot-starter-web (Refer to https://spring.io/guides/gs/rest-service/ for details).

Update dependencies

dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.data:spring-data-mongodb'
implementation 'org.mongodb:mongo-java-driver:3.12.7'
...
}

Define a controller

It is expected that the request will have 5 parameters

• swlat — South West latitude of the bound
• swlng — South West longitude of the bound
• nelat — North East latitude of the bound
• nelng — North East longitude of the bound
• crimesub — The crime type user subscribed

Define the Data object

4. Update the javascript to get the data from our application server

The idea is that we listen to idle event, get the bounds latitude and longitude, together with the crime type info and send to our application server to get the location information.

Setup event listener, we don’t want to respond the event very frequently, we might add some delay to initiate the request to our server. Get the bounds information together with the crime type chosen by user and send to our application server.

Result

The data is limited to be 1000 at most and user is allowed to filter according to her need.

*update: the web now is revised, go to https://bestplaceuk.com/ to have a look