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.
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
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
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
- Mapbox GL JS - Map client
- Next.js - SSR for React
Please feel free to add pull requests
- Timothy Krechel - Initial work - timothy.de
See also the list of [contributors]
This project is licensed under the MIT License.
- u/DarkLordCZ - For posting the Season 5 map in high res
- u/MarkN22 - For providing calculations for Georeferencing the map