Road Surface Estimator

10-05-2018



Imgur



The Road Surface Estimator (RSE) is a web application implemented in Angular 5, NodeJS, and the Google Maps JavaScript SDK. The purpose of the application is to calculate the estimated total surface area of all roads in a 1 square kilometre area.

This application is my first web application, and it is done as part of the Computer Science Project (my final year project) at Monash University, Australia.

Links:



Software Architecture

  • Angular 5 for front end client.
  • Express.JS server to run the application logic (processing the image to find the surface area).
  • Heroku Platform use for hosting the application.
  • Cloudflare to set sub domain to the heroku application address.


Design

Before doing this project I had no experience in developing web applications. After some digging around the web, I found the MEAN application stack which consists of:

I have chosen to implement the front end in Angular and the back end in Express.JS and Node.JS, because I think that the MEAN stack is an established stack, and that there're lots of resources on the web to work with.

I didn't include a database in the application because there were no data to store.



Development

I start off working on the front end first. I sketched a layout for the UI, and implemented it in Angular. The layout is done using Material UI.

Everything went fine until I had to start using the Google Maps JavaScript SDK. I found that the Google's SDK doesn't work well with Angular, and I found an Angular library which wraps the Google Maps SDK and works better. The library was chosen instead of the defaul SDK. The library provides all the functionalities of the default SDK, and the default SDK documentations can also be use for extra documentation other than the library docs.

After the layout of the UI and the Google Maps functionalities have been implemented I moved on to implementing the back end. I didn't have much trouble working with the back end, since it's just Node.JS, and I've played around a little bit with NodeJS and JavaScript before.

Before going into more detail on the back end I'll describe the application work flow first. The work flow is basically:

  • having the user select a location on the Google Maps,
  • a static image of the map is created where only the roads in a 1 kilometre square are showing (coloured black, while everything else is white),
  • the static road image of the map is then send to the back end Express.JS server,
  • the server receives the image and process the image by counting all the black coloured pixels on the image,
  • the total road pixel counts are then use in a formula to calculate the total surface area of the road.

A little tinkering with the static Google Maps image was needed, because the generated image includes the Google Maps logo on the bottom right corner. I needed to remove it out before the pixel counting so that it won't interfere with the accuratecy of the result. To remove the logo I made a calculation, where when generating the static image the border height of the image is increase by x pixels, so that the logo is outside of the 1 kilometre square area border.



Deployment

The web application is deployed on the Heroku Platform. I have chosen to deploy on Heroku because it have a free tier for hobby projects. However, this free tier comes with a limitation, where after 30 minutes of inactivity of the application, the application instance goes into a sleep mode. Once in a sleep mode, it will takes a little bit of time (normally around 10 seconds) to become active and response to requests.

I found the deployment stage to be the hardest of all the stages. I had no prior experience in deploying any application before, and this was a new territory for me. After spending a ridiculous amount of time reading the Heroku documentations on deployment and web tutorials, I was able to deploy it to Heroku. However, I found that once the web application is loaded, a refresh to any of the application's non base route (/) will breaks the app and return a blank page saying Root. At this point I didn't have enough experience and understanding to be able to fix this issue, so I left it.



Conclusion

I very much enjoyed designing and building this web application. It was my first break into the world of web application development. I learnt a great deal from the project, and I reused many of the technologies I've used here in my other works.