Description: This app shows a semi-random overhead image of a map, using MapQuest Static API. The user then enters a guess for the location of the image and then can see the right answer. Made with Gatsby in July, 2020, and deployed with Netlify here: https://road-to-nowhere.netlify.app/
- Download the repo.
- Run
npm install
in the root of the project. - If you haven't already, install the Gatsby CLI on your machine.
npm install -g gatsby-cli
. - Create
.env.development
and.env.production
files in the root directory. In each of these files, simply add:
GATSBY_MAPQUEST_KEY=<YOUR_API_KEY_HERE>
See the next section for info on the key and API usage.
- In the project, run
gatsby develop
, which will run a local instance of the project at http://localhost:8000.
This project uses the MapQuest API, to generate the images of the maps. To get the API key, you'll need to register with MapQuest, which is free. MapQuest has a good, free tier for their API services.
Another option is to use the Google Maps Static API, which provides an almost identical service. This API loads faster than MapQuest, however Google's version shows ownership on the image, which usually gives away the location. So road maps are better for this task. To use this, simply change the map URL in the pages/index.js
file to match Google's information.
This app is currently deployed to Netlify here: https://road-to-nowhere.netlify.app/
A to do list:
- Think of a better name for the project? This works though...
- Improve the gameplay UX
- Use the Google Autocomplete for entering guesses for location?
- Keep track of a score
- Change unlimited play to a set of questions
- Show a 'distance off from correct' score?
- More styles? Colors? At least update the site icon!!
- Allow users to change settings they play with:
- Zoom level
- Road or Sat view
- Details included (Can't really add too many)
- Which datasets to include (Several in the project, but easy to add more with list of coordinates). Also, currently using US locations only, since guesses are made based on states. How to change to guess cities, states, countries, etc.?