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

Introduction

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.
One of the eleven critical drainage junctions. Solutions would be placed inside of the catch basin.

Background

Using Google Maps to display red and green markers.
Clicking ‘Save States’ will enable a (somewhat) non-intrusive popup on all devices.

Changing Marker Colors

Clicking a button changes the marker with the same number to the opposite color.
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

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

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

Socket.io

Reception and What’s Next?

Takeaways

--

--

--

Mechanical Engineer, Software Developer, Recent College Graduate

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Differential Serving — Serve legacy code to old browsers and ES6 code to modern browsers

Differential Serving — old code to legacy and es6 code to modern browsers

“Good luck with Citrix, you’re going to need it!”

Citrix logo on a the side of a Red Bull Formula Car. Citrix have been sponsoring Red Bell for many years now

10 Important Skills That Engineering Managers at Tech Companies Need

Team Contributors — Because There’s No “I” in Team

Construction workers building a foundation

Decision Fatigue as a Developer

How we built a distributed, self-funded, family-friendly, profitable startup

Jenkins- a tool used for CI/CD

Secure Your App with Cognito

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
Richard Chung

Richard Chung

Mechanical Engineer, Software Developer, Recent College Graduate

More from Medium

Running the KrakenD API Gateway on Heroku

MVCC In MySQL 5.7

Make your development easier with version controlling and NoSQL

System Integration: Why is it crucial for warehouse automation?