We message each other every day but don't know the sheer distances that these messages have to travel. As our world becomes more interconnected, we wanted a way to appreciate the journeys all of our communications go through around the globe.

We also wanted to democratize the ability to fact check news by going directly to the source: the people of the country in concern. This would allow us to tackle the problem of fake news while also jumpstarting constructive conversations between serendipitous pen pals worldwide.

What it does

Glonex is a visualization of the globe and the messages going around it. You can search the globe for a city or area you are interested in contacting, and send a message there. Your message joins the flight of paper airplanes orbiting the Earth until it touches down in its target destination where other users can pick up your letter, read it, and then send one back.

We tackled our news objective by adding the ability to see news in other areas of the world at a click, and then ask questions to the inhabitants right afterward.

You can also donate to our mission using the Checkbook API to keep the site running.

How we built it

We used Svelte, a performant JavaScript framework that operates as a compiler with a memoized DOM rather than a Virtual DOM (like React/Vue/Angular) to increase performance and drastically decrease js bundle size. This was a necessary concern because we knew we would be using the Esri ArcGIS API with a visualization of the globe (which is and it would become quite slow if the Javascript framework that we used took up too much memory). We then worked on getting the Esri ArcGIS SceneView for the globe working, we used a custom basemap from NASA that showed the cities of the world at night to create a pleasing aesthetic.

We wrote code to calculate a geodesic around the Earth that spans between the user's current location and where they click, but then interpolates the elevation over time to create an arc around the world.

Then we worked on the Firebase Firestore integration where you can send a message to any geopoint on click. Then we had to create the paper airplanes for each message based on their timestamp created and timestamp for when they should arrive at their destination. Clientside we interpolate between the start and end locations to create the positions of each airplane, and then every timestep: move them toward their destinations by changing the geometry of each graphic in their GraphicsLayer.

In order to get the news at a specific location, we created an algorithm to scrape Google News for a search query related to that specific location. We developed this using Node.js & Express.js and hosted this as a separate web service. The front end calls our news api whenever the user clicks on a location on the globe. The api then finds all news articles relevant to the location and serves it back to the front end.

Challenges we ran into

The hardest parts of the frontend of this project include creating the arcs that span the earth whenever you click a new position. We had to do a lot of math to figure out that we could trim a part of a geodesic (great circle) of the earth, and then construct a 3d polyline that interpolated each vertex's elevation by its distance to the target destination to form an arc shape.

Another challenge was the creative use of the Esri ArcGIS API for creating the moving paper airplanes. The GraphicsLayers aren't supposed to be moving, but we needed them to for this project, and we accomplished that efficiently by, on creation time (when sending to firestore), calculating the heading of each paper airplane, and then on each frame, adding that heading to its geometry (position) each frame multiplied by the speed calculated from the difference of its start and arrival times. With that code we were able to create the airplanes orbiting Earth.

Another challenge we faced was running the news search. Most existing news apis we found only have the option to report news by country. In order to get a more detailed view of local news by city, we ended up scraping google news search for our articles. Our implementation uses puppeteer (opening up Chromium), so we could not run this in the browser along with our other front-end code. We got around this by creating a separate web service hosted elsewhere, so that our front-end could call the api without having to worry about browser-compatibility.

Accomplishments that we're proud of

  • We are able to search and see the news all around the world just by clicking on any part of the globe and being able to send messages and chat with other people in that area of the world.
  • We have the frontend of the globe running perfectly with the different brightness levels in any part of the world, and the message's plane all around the globe.
  • We could figure out the Math to create the arcs that span the earth whenever you click a new position, creating the moving paper airplanes, and many of the front-end features.

What we learned

  • Svelte and how to implement all of the APIs that we used (Esri ArcGIS API and Checkbook API) using Svelte.
  • Integrate all of our back-ends and databases using Firebase
  • Using Math to figure out the front-end part of this web-app.
  • Being able to web scrap the news and make our front-ends could call the news API to search the news all over the globe

What's next for Glonex

We definitely would continue working on this project since we believe that this is a very useful thing if a web application like this exists in this world. Not only that, we could develop more into the mobile app version so the user can use it easier.

Built With

Share this project: