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/
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 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.
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.
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).
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:
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.
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.
This is done by deleting the old marker and replacing it with the opposite color. Doing so also updates the database.
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.
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.
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 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.
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!