OpenStreetMap Animate is a Svelte web app that plays back multiple users' GPX tracks on a map, synced to their OpenStreetMap edits in a video-style format. It's perfect for reviewing an edit session or visualizing a competition between users editing with StreetComplete.
User edits are loaded straight from the OpenStreetMap API. No backend necessary.
demo.mp4
Prerequisites: Node.js and knowledge of basic npm usage
- Clone the repository or download it as a zip
- Install the required Node packages by running
npm installin the directory
Note
This project uses Mapbox for map rendering. A free Mapbox account is fully sufficient for development and regular personal usage, but Mapbox enforces their usage limits.
- Register an account on Mapbox, which is used for the map
- Under Admin -> Tokens, create a token (leave the default values)
- Copy the created token (a long string of semi-random letters starting with
pk.) - Return to the OpenStreetMapAnimate directory, and open the
src/config.tsfile - Replace the
[Please set your Mapbox.com access token here]with your token and save the file
You can either run the app straight away using npm run dev, or you can build it first using npm run build and then run the output in your preferred manner.
Navigate to the website. If you ran the app using npm run dev, the URL should be displayed in the terminal. If everything worked correctly, you should now see a world map.
Continue by adding a user by clicking on the first button in the bottom-right corner of the screen. You will be guided through the simple process. To view the user's editing session on the map, you will require their GPX file (a location recording) of the session. If you don't already have a preferred app for doing this, I recommend using GPSLogger set to a high logging interval. You will be additionally asked to input their OpenStreetMap username for the account on which the map edits were submitted.
Congratulations! If everything worked out, you should now be able to replay the session with video playback controls. See the demo video above for how that should look like. You can also add multiple users, which is perfect for visualizing a competition between multiple people.