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.

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

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]

If you use Node Version Manager, you can ensure you're using a compatible version of Node and NPM 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!

Mozilla Public License MPL 2.0