Earth Sandwich

The idea

A web application that lets you create an earth sandwich by letting you locate the exact opposite side of the Earth from a given location. It's a fun and educational tool inspired by Ze Frank's global sandwich challenge.

Development Journey

Breaking down the inital problem

To start this project I first broke down at a very high level how the system should behave

• Take an input
• Math?
• Return output value
• Display this for the user to see

Making the math work

Starting with the basics I looked into how you find the antipode the direct opposite of a given location. This is a well understood engineering problem and there was lots of examples to use.

I consulted several online calculators including Omni Calculator to know what the correct return value from the function should be.

Input

(using my home town of Milton Keynes, UK)

• Latitude: 52.04
• Longitude: -0.76

Expected Return

• Latitude: -52.04
• Longitude: 179.24

To check the maths is behaving correctly I also ran the calculation backwards

Adding a map to make it visual

Lat and Long values aren't very useful or exicting for most people. I could only understand where it was refering to when I looked it up. To make this a better user experience I needed to remove that step. Enter Leaflet, a popular JavaScript library that provides interactive maps. Following the quick start I made a one page file combining the HTML, CSS and JS to establish viablity and get a proof of concept quickly.

Whilst this works, it relies on users to be able to enter a valid lat/long. This is a pain for users for 3 main reasons.

• Knowing you lat/long requires you to look it up or have a GPS readout handy
• Entering 1 digit wrong can send you to a vastly different location
• There are several conventions for writing lat/long e.g. -52.04 is often written as 52.04 S. This adds extra complexity when parsing the inputs

The solution to this is

geocoding

Making it human accessible with geocoding

In theory this step was simple, find a geocoding service, access it and put it into the system. However at this stage the whole project was one combined html/css/js file as Leaflets documentation did not alude any other way to work with it.
Before starting I needed to plan the expected operations:

I found geoapifiy, a location platform that offered a geocoding api, with robust documentation and a node module to boot. In order to use this I would need to refactor my current code into a Node project.

Attempt 1 - Just Node

To get started I installed the Leaflet NPM module, however every attempt using node lead to import and window errors from Leaflet. Essentially Leaflet tries to run before the page is rendered and I could not find a way around this.

Attempt 2 - Node + Vite

To get started I installed the Leaflet NPM module, however every attempt using node lead to import and window errors from Leaflet. Essentially Leaflet tries to run before the page is rendered and I could not find a way around this.

Earth Sandwich

As it stands right now, the user can enter a location, use the autocomplete picker for ease and then watch as the map updates in a smooth fashion. The extra animation step makes it far more immersive then a simple reload.

Lessons learnt

I came into this project as a novice of node and wanted to push myself to make something, interactive, fun and educational.

• How to interact with Leaflet.

  This experience will help me as I explore and seek to work with more third party resources.

• Debugging node module errors.

  Not as obvious as the errors I encoutered ranged from my code sending unexpected inputs to functions in the modules or modules not communicating with each other. The more I break things the better I will get at solving these problems.

• How to set up vite for devlopment and using it to build production code.

  My first time interacting with build tools, I know these are used widely for more complex devlopment projects so it is a skill I need to be comfortable with.

• Deploying projects to the web.

  To make them a real entity for people to interact with. Finding ways to take the code from local to online took longer than I estimated even thought the end deployment via netilfy was in itself simple. Code needs to be shipped and used to be useful.

• The importance of reading documentation and thorough planning.

  Any real sticking points I had during this typically came from misunderstanding a piece of documentation or planning at too high a level.

Future plans

To take this project to it's final form I will need to recreate this using 3js as to get the full interactive and experience it needs to be shown on a 3d globe. Seeing two maps side by side whilst accurate doesn't communicate very effectively the postional reality to users.