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

Building Truebil Auction platform using Firebase & Django

Key Takeaways from the Engineering Manager’s How-To Guide

Building Confidence in the System’s Ability to Respond to Turbulent and Unexpected Conditions

The Eudora™ Email Client Source Code

Verification and Validation In Sprints

Docker Tips: about <none> images

Six Tech Buzzwords and What They Actually Mean

Traefik cluster as Ingress Controller for Kubernetes

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

NodeJS VS AngularJS: Battle of JS Platforms in 2022

A beginner’s guide to participating in Hackathons

How to use React and Tone.js to make a simple web audio application

Modular Synth

Node.js — What You Need To Know and Why You Should Use It