Earth Sandwich is a web application that simplifies the challenge of creating the perfect global sandwich by helping you locate the exact opposite side of the Earth from your location. It's a fun and educational tool inspired by Ze Frank's global sandwich challenge.
A version of the app is live on Netlify here.
-
Effortless Geolocation: Earth Sandwich utilizes geocoding and autocomplete features, allowing you to input any address, and it will calculate the precise latitude and longitude coordinates for both you and your "sandwich" location.
-
Interactive Map: We've incorporated the Leaflet mapping library to create an interactive map that displays your location and the antipodal point with ease.
-
Optimized for Node: The application has been optimized to work with Node.js using Vite, making it easy to run and deploy on your own server.
Use the following commands to get started:
npm install
npm run dev
-
vite: A build tool that leverages JavaScript ES modules to deliver fast, optimized web applications.
-
leaflet: A popular JavaScript library for interactive maps, used for displaying the Earth Sandwich locations.
-
express: A minimal and flexible Node.js web application framework for building web applications and APIs.
-
@geoapify/geocoder-autocomplete: Provides geocoding and autocomplete functionality for location searches.
-
@geoapify/leaflet-address-search-plugin: A plugin for Leaflet that enables address searches and location selection on the map.
Roadmap includes:
- Integrate geocoding for address lookups, eliminating the need for manual latitude and longitude inputs.
- Allow location selection by selecting a point on the map
- 3d graphical display using 3js.
This personal project allowed me to experiment with a variety of systems and build a web app from the ground up using Node.js.
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
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 it's not fluke, running the calculation backwards
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 a process of taking a text-input such as an address and returning geographic co-ordinates.
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:
flowchart LR
A[Input location] --> B(GeoApifiy API call)--> C(Return JSON) --> D(Antipode calculation) --> E[Update maps]
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 Upon further reading and experimentation I found that Vite could process the Leaflet module. With this now working I could get an API key and integrate the geoapifiy modules.
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.
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.
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.