Interactive Fortnite Map

A performant approach for creating a map application displaying Fortnite BR challenges, using next.js and Mapbox GL JS. A demo can be found here.

Prerequisites

You need to run your own tile server. I recommend using TileServer GL by downloading the .mbtiles from here and running the following command inside of the directory with the downloaded mbtiles

docker run --rm -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl

Installing

Clone the repo and install dependencies via

npm install

Run a development build and start a dev server at http://localhost:3000 via

npm run dev

Before running a production build, you might need to update env.js accordingly, e.g.

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'process.env.TILESERVER_URL': prod ? 'http://localhost:8080/data/season5/{z}/{x}/{y}.png' : 'http://localhost:8080/data/season5/{z}/{x}/{y}.png',π
  'process.env.SPRITE_URL': prod ? 'http://localhost:3000/static/sprites/sprites' : 'http://localhost:3000/static/sprites/sprites',
}

Create a production build and start a server at http://localhost:3000 via

npm run build
npm start

Export static HTML/CSS/JS page via

npm run export

Upon adding new .svg sprites to the project in /sprites, you should run the following command to create the necessary sprite files

npm run sprites

Deployment

To deploy, the recommended way is to build the Docker container via the following command:

docker build -t fortnite-map .

once the build is done, run the container via:

docker run --rm -itd --name fortnite-map -p 80:3000 fortnite-map

The server then accepts requests on port 80. Alternatively, if you are using a reverse proxy setup like I do, you can also tweak the docker-compose.yml to your needs and deploy via

docker-compose -f docker-compose.yml up -d

Built With

Mapbox GL JS - Map client
Next.js - SSR for React

Contributing

Please feel free to add pull requests

Authors

Timothy Krechel - Initial work - timothy.de

License

This project is licensed under the MIT License.

Special Thanks

u/DarkLordCZ - For posting the Season 5 map in high res
u/MarkN22 - For providing calculations for Georeferencing the map

tysweezy / fortnite-map