Mapstery

Mapstery is inspired by my long history of spending hours on end staring at maps and playing geography games on the internet.

Play Mapstery here.

Built with

• React
• Vite
• Google Maps JavaScript API
• @googlemaps/react-wrapper
• GeoNames CountryCode API provides the reverse geocoding logic
• flagpedia.net provides the flag images

Development

Prerequisites

To run Mapstery locally, you'll need to provide two things:

1. The username of a GeoNames account that has been activated to use their 'web services'
2. A Google Maps API Key

Create a file called .env.local at the root directory of the project and add your variables as follows:

VITE_GOOGLE_API_KEY=[your_api_key]
VITE_GEONAMES_USERNAME=[your_username]

Run Mapstery

Mapstery requires Node.js Hydrogen (18.x). If you use Node Version Manager, you can ensure you're using the correct version with

nvm use

Install all dependencies with

npm install

Start a Mapstery dev server - the variables configured in .env.local will be applied automatically:

npm start

Mapstery will run at localhost:3000. You're good to go!

License

Mozilla Public License MPL 2.0