Maps where distance represents travel time instead of physical distance. Try them here. For a detailed explanation of how these work, see the YouTube video.
new-york-loop.mov
backend/- Python backend. It uses the Google Maps API to create grids of points along with travel time information.frontend/src/assets/- contains the static map images and the grid JSONs created inbackend/frontend/- TypeScript + React frontend. It takes the data from the backend and actually bends and shows the maps. The newest frontend is automatically deployed here using Vercel.cavalry/- just some personal backups of Cavalry animation files that I used in the YouTube video. Safe to ignore.
The backend can be installed using Poetry:
cd backend
poetry installThe frontend can be installed using npm:
cd frontend
npm installcd frontend
npm run devUse the backend/export.py script. For example, to create the public transport map for NYC, I used this command:
python backend/export.py \
--output-name newyork_transit \
--center '40.75829440050091' '-73.91915960717802' \
--zoom 12 \
--grid-size 19 \
--travel-mode TRANSITThis is an interactive command that will preview the map in several stages. It'll also prompt you before spending money on the Google Maps API.
It places the created maps into frontend/src/assets where the frontend can find them.
To make the new map available from the frontend dropdown menu, you'll need to add an entry in cityData.ts.
See existing entries for examples.
If you find some places that look good as spacetime maps, please submit a pull request! I'd be happy to add more maps.
I made the favicon based on this icon from Freepik user Anggara. I then used a modified version of this CodePen that I had used for a bug report before.
"Click and hold" icon: https://www.iconpacks.net/free-icon/click-2387.html