Blummit maps
https://server.alifeee.co.uk/blummit-2025/
Maps showing interactive Routes from a fundraiser hitchhike from Sheffield to Kraków, from Friday 4th April 2025.
Location data collected using https://owntracks.org/, exported using OwnTracks Recorder, and mapped using https://www.mapbox.com/.
export geojson
export geojson from OwnTracks with something like this for each day
I'm probably storing these geojson files somewhere like ~/syncthing/4-archive/2025/blummit-2025/
# on OwnTracks server
from="2026-04-15"
to="2026-04-25"
people="alfie esme ethan elly kat kitty piotr eli nyama miguel clarice"
for person in $people; do
ocat --user "${person}" --device phone --format geojson \
--from "${from}T00:00" --to "${to}T00:00" | jq '{"'"${person}"'": .}'
done | jq --slurp '. | add' > "all.geojson"
then, do some aftermarket modifications of the geojson files
# locally
# download file
scp alifeee@owntracks:~/.../all_original.geojson .
# anonymise points (lat/lon/radius)
python3 scripts/anonymise.py \
-i all_original.geojson -o all.geojson \
-r 51.28742 -1.28422 0.015 \
-r 54.24521 -2.15615 0.01
build index.html
# template stuff - replace with meaningful text
title="Blummit 2025"
description="Routes from a fundraiser hitchhike from Sheffield to Kraków, from Friday 4th April 2025."
url="https://server.alifeee.net/blummit-2025/"
og_image="https://server.alifeee.net/blummit-2025/blummit-routes.png"
sed -i "s+{{title}}+${title}+; s+{{description}}+${description}+; s+{{url}}+${url}+; s+{{og_image}}+${og_image}+" \
index.html
…which puts several .geojson files into one JSON file to be loaded.
nginx config
this data should be kept pretty private as it is very precise location data. as such, we can re-use the permission file from OwnTracks:
location /blummit-2025/ {
alias /var/www/blummit-2025/;
try_files $uri $uri/ =404;
auth_basic "blummit";
auth_basic_user_file /usr/local/owntracks/userdata/htpasswd;
}
MapBox examples
- https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/
- https://docs.mapbox.com/mapbox-gl-js/example/animate-marker/
- https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-line/
- https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
- https://docs.mapbox.com/mapbox-gl-js/example/set-popup/
- https://www.mapbox.com/blog/building-cinematic-route-animations-with-mapboxgl
todo
- trigger animation (splash?) when position updates (to be obvious when zoomed out)
- fade markers based on timestamp age
- make markers into faces instead of coloured blobs
- add splash loading screen

