Visual Tracker of 11 Critical Drainage Junctions in Mae Chan, Thailand

This summer, I built a web app that helps a municipality in Thailand keep track of the status of their assets while on the field. It was my first introduction to Full stack development so the code isn’t too complicated, but I wanted to share the impact that it has/could have on the community and hopefully inspire others (with or without background in CS) to go out and build something! You can find the web-app here: http://ec2-3-85-9-60.compute-1.amazonaws.com:3000/

Introduction

Thailand is a southeast Asian country that undergoes a monsoon season, which is categorized by perceivable changes in precipitation and wind due to asymmetric heating of the land and sea. The Mae Chan municipality, located in Northern Thailand, has identified flooding as one of the major threats towards their community due to outdated sewage infrastructure and urbanization. The effects of flooding are especially exemplified during the monsoon season, causing catastrophic consequences to property and inhibiting access to the marketplace, one source of major commerce in Mae Chan.

While the water level is low during the dry season, during monsoon season the water can quickly exceed the height of the barrier and flood onto the street.

While the fundamental infrastructure may not be renovated due to cost constraints, the municipality has made great strides in protecting their community. By conducting their own internal research and partnering with other universities/organizations like BLUElab Thailand, Mae Chan has managed to develop custom solutions based off of needs statements that work within their own constraints. Needs statements are statements that justify the “need” for conducting the project, and my student organization BLUElab Thailand has identified “the ability to open and close 11 critical drainage junctions” as one of these statements. The ability to open and close drainage junctions will grant the municipality the ability to control where the water within storm drains will flow by shutting off entry to certain areas, such as the market place.

One of the eleven critical drainage junctions. Solutions would be placed inside of the catch basin.

The purpose of this web application is to provide a visual platform on Google Maps for users to monitor the status of the 11 critical drainage junctions. Each drainage junction can be toggled on or off, and changes to a junction’s current state are immediately saved to a database. Furthermore, the application operates in real time, meaning that all users concurrently on the app can see edits made from one another instantly.

Background

One of the technologies implemented in this app is the Google Maps API: https://developers.google.com/maps/documentation/

I use the API to display pin markers at the latitude and longitude of the 11 critical drainage points. The color of the pin marker also changes when the user clicks a button (more on the implementation of these two things in the following section).

Using Google Maps to display red and green markers.

I also chose to use MongoDB as my database to store the information about latitude and longitude for each junction, as well as the state of each junction (open or closed).

This app was developed using Node.js, which according to their website is:

a Javascript runtime built on Chrome’s V8 Javascript engine. As an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications.

One implication of using Node.js is that the app can independently make data requests for every user, rather than having to queue up requests.

Finally, I also use Socket.io to notify all users when a change has been made to the map.

Clicking ‘Save States’ will enable a (somewhat) non-intrusive popup on all devices.

Some Bootstrap and CSS were also used to change button styles.

Changing Marker Colors

Markers can switch between red and green color through button press.

Clicking a button changes the marker with the same number to the opposite color.

This is done by deleting the old marker and replacing it with the opposite color. Doing so also updates the database.

Placed each button in a form that runs the deleteMarker onclick. Is there a way to dynamically generate all the buttons depending on how many records are in the database? Probably; but for another time.
deleteMarker takes an integer argument which is used to identify the particular marker in the array. Afterwards, the marker is replaced depending on it’s color by calling addMarker.
addMarker takes a string argument which is used to identify the color to create the marker. Blue markers on the map do not change color and represent landmarks. Red markers represent closed junctions; green markers represent open junctions. Mixed jQuery and Javascript which I think is gross (?) but works.

MongoDB

This was my first time using a database that wasn’t SQLite, which I first learned in high school (yikes). For those interested, my setup is below.

Image taken from Compass, the GUI for MongoDB. I have one collection LatLong, with 2 Documents inside.
Separate arrays for latitude and longitude. Blurred items just in case.
Array for the state of each junction: false = closed; true = open.

Node.js

This project was also my first introduction to Node.js — before this, I was still coding in PHP and HTML forms so I was really excited to try new things. Some of the highlights are featured below.

get and post handled in node.js; perhaps a little messy in places but a decent first try I would say.

From lines 50–62 (get), I’m storing the latitude, longitude, and initial states in local variables to be accessed throughout the code.

From lines 64–101 (post), I’m changing the states in my local copy of the initial states before uploading to MongoDB. Recall from two sections ago that each toggle button was placed in an HTML form with type ‘submit’. This triggers lines 64–101 to run. Line 109 refreshes the page.

Socket.io

Socket.io was implemented to alert all users currently residing on the app of potential changes created by another user. Currently, clicking the ‘Save States’ button will trigger a (somewhat) non-intrusive popup that lasts for 5 seconds. This lightly colored pop-up informs users of the exact time of the change, and advises the user to refresh the page to apply updates.

Ideally, when a user makes a change, the change should automatically be rolled out to every device connected without the user having to press the ‘Save States’ button, or refreshing the page. This is definitely an improvement that I look forward to experimenting with in the future.

Reception and What’s Next?

This summer, I also had the opportunity to present the project to the city council at Mae Chan. Overall, I would say that the project was received well and I look forward to continue our collaboration to improve the functionality of this application. Eventually, the municipality wants to incorporate this app in the realization of their “Smart City” — a city that is increasingly integrated with technology — so I am excited for the potential prospects of this project.

As we move into the future, I plan to reorganize my code to: (1) operate more efficiently, (2) revise oversights that may have occurred from rushing to meet deadlines, or (3) for clarity. I also want to explore combining a mechatronic component to the project; specifically, I want to try incorporating a Raspberry Pi that controls the opening/closing of the junction.

Takeaways

From undertaking this project, I took my first step into Full stack development. When I took a web development class for the first time during my Junior year of high school, Full stack development was already emerging yet we still learned antiquated techniques. I’ve also incorporated using a non-SQL database like MongoDB into my inventory. I’m so glad to have immersed myself into learning the basics and I anticipate learning more as time progresses.

I will say how surprised I was at how much I was able to do with so little. Starting the project felt intimidating, but I’m impressed with the range of capabilities I achieved with just surface level knowledge. This project can be so much more than it already is, and I feel motivated to continue its expansion.

I hope this project has been an interesting read or inspired you to take up your own Full stack project!

Mechanical Engineer, Software Developer, Recent College Graduate

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store