My 1st SocialCoder project | What I learned

Recently, I volunteered on SocialCoder to code a one page website for ONCRA.

The requirement of the website is to

1. read some KML file (like Google Earth 🌍),
2. then fetch and crunch some data,
3. then show results in a table.

Outcome

The Website and its GitHub Repo

What I learned

1. One Page Website != Let's use Plain HTML JavaScript
2. How to check if point is inside polygon
3. How to calculate polygons intersection
4. The Earth is not flat 🤯

#1: One Page Website != Let's use Plain HTML JavaScript

When I first spoke with the client, the requirement sounded like a very simple one page website, so I thought I can just code it in plain HTML.

But as I coded the key components of the website, I realise I have components that needs to be update visually as data were fetched, like this table:

Yeah that was doable in plain JavaScript HTML, but it meant I was updating those table values manually:

... // fetching data
yearElement.innerHTML = `${year} <div class="spinner"></div>`

... // data fetched
yearElement.innerHTML = `${year} ✅`
valueElement.innerText = getAGBValue(data, polygon);

But I doubt future me will remember this kind of side effect on the data fetching script 🧠

So eventually I took the plunge and rewrote the website in React. The table rows are now

<td>{year} {statusIcon}</td>

where the statusIcon depends on a state rowsStatus.

So as data were fetched, the rowsStatus state would be updated and React would just update those table values. The whole thing is much easier to follow 😄

#2: To check if a point is inside a polygon, use Ray Casting algorithm

The "data crunching" part of this project involves determining if a lat-lon grid is inside the kml file polygon. I discovered this gem of a video, which shows me how to determine if a point is inside a polygon

#3: To calculate polygons intersection, use Weiler-Atherton algorithm

As part of the "data crunching", I need to compute "how many percent" of a lat-lon grid is inside the kml polygon, and apply that percentage to the AGB data value of the grid.

To calculate the intersectional polygon(s)
we can use the Weiler–Atherton clipping algorithm to achieve
https://www.geeksforgeeks.org/weiler-atherton-polygon-clipping-algorithm/

To calculate the area of the intersectional polygon(s), we can use the Shoelace formula
https://en.wikipedia.org/wiki/Shoelace_formula

#4: The Earth is Not Flat🌍

Because the dataset has a longitude range of -180 to 180 deg, so if a user were to upload a polygon from longitude 179.99 to -179.99 by going through 180 (or -180 because the Earth is not flat), the dataset would fail to retrieve.

So I had to take that special case into account and make 2 separate calls to the dataset:

1. request for longitude range 179.99 to 180
2. another request for longitude range -180 to -179.99

then combine the retrieved data together, add 360 degrees to the longitude value and proceed as usual 👍

Conclusion

Here's the website link and its GitHub Repo

This has been a great opportunity for me to practice using React 😄

The website is simple enough that it didn't have many nested components 🪆, so I've only been using useState. Although now thinking about it, I probably should've used useContext to avoid having to pass around some frequently used states 🤔

I'm still in the process of learning React, so any feedback appreciated 🙏🙏