Fallout: New Vegas - Interactive Map

https://srt4rulez.github.io/fallout-new-vegas-interactive-map

An interactive map of the Mojave Wasteland in Fallout: New Vegas.

Features

• Contains all skill books and snow globes.
• Mark items as found to keep track of your progress. Your progress is saved in your browser.
• Each item type is color-coded to easily identify them.
• Toggle the visibility of found items.
• Toggle the visibility of a single item type.
• Every item has a corresponding link to an article on https://fallout.fandom.com/ for more info.

Other Interactive Maps

• gamemapscout

How does it work?

We use a library called Leaflet to create an interactive map, similar to Google Maps. Instead of a map of the real world, we load up an image of the Mojave Wasteland. This allows us to zoom, pan and interact with the map. It also allows us to add "markers" that when clicked, opens popups with custom content.

All the markers are stored in markers.json. Each marker has an ID, type, sub type (optional), title, description, url (optional), image (optional) and latitude and longitude values.

When setting a marker as "found", we update something called Local Storage in the browser. This is data that is saved in the browser and can survive refreshes. It's specific to the domain. This allows us to save your progress without having to store it in an external database. Your progress is only saved in your current browser though. If you visit the application on another browser, you won't see your previous data.

Debugging Latitude and Longitude

Open the developer tools in your browser (usually F12), go to the console tab, and type in "window.debug = true" and press enter to enable debug mode. Clicking on the map will now log the latitude and longitude to the console.

Development

To work on this repository, install Docker, then run the following command in the project root:

./run-docker-development.sh

This will start up a docker container that has everything we need to develop.

Simply install dependencies with yarn, then start the development server with create-react-app:

yarn install
yarn start

Go to http://localhost:3000/ in your browser on your machine to view the site.

Checkout https://github.com/facebook/create-react-app for more info.