Train Map

Mapping every (major) train trip I've taken on a map

🌍Map visualization

🗺️(Alternative) Map on uMap
💾Raw geojson data

Development

This project has a development branch, named dev. For major projects that might take longer, a new branch may be created, although this is rare.
To get the project running, just clone the repository locally and run the following commands:

1. obtain a maptiler access token and create a .env.local file in the root directory with the following content:

VITE_MAPTILER_API_KEY=your_access_token_here

(if you don't have a mapbox access token, you can get one here. if you're publishing with github pages you should add the token to the repository action secrets with the same name as the variable above.)

2. install dependencies

# for npm users
npm i
# or for yarn users
yarn

3. run the development server

# for npm users
npm dev
# or for yarn users
yarn dev

Publishing

I've followed vitejs's guide on publishing to github pages and the repository already includes a pages deploy configuration. You must add your MapTiler API key with the same name as described above in step 1 of the development steps to your secrets as described in this guide. You might also wanna edit the base URL to match the desired base URL. You can do this in the vite.config.ts file

Information

This project is released under the MIT License. The map style used was made for this project and is served by MapTiler

Various open source projects are used. Here is a short description of what they do:

• maplibre-gl-js: Open source library for displaying the map. Fork of maplibre-gl, made the migration from maplibre very easy.
• react-map-gl: Wrapper around maplibre-gl providing a react API for the library. Also made the migration from mapbox to maplibre very easy.
• react-router: React library for easy page routing. Made the URL parameters possible and easy to manage.
• tailwindcss: Handy CSS framework for easy styling.
• vite: Last but not least. Toolchain for frontend app building. Makes react more manageable
• react: Library for building the interactive website. cheers facebook.
• typescript: Adds types to javascript. cheers microsoft.

And others such as eslint, eslint-plugin-react-refresh, typescript-eslint and the DefinitelyTyped project.