how to prepare geojson
get .fit files off garmin, use gpsbabel to convert: gpsbabel -i garmin_fit -o geojson <in name> <out name> and edit manually to label rest stops vs whatever. (gpsbabel does not run on my server, you have to do this locally -- side note, eugh gpsbabel is horribly packaged)
use jq to slurp together multiple geojsons into a single one. cat **/*.json | jq -s . > all.json. or: find . -type f -name "*.json" | xargs -n 1 cat | jq -s . > all.json this recurses down the directories so that higher level indexes show the total of all the routes beneath them!
use sed to prepend/postpend the syntax to make this javascript consumable: sed -i.old -e '1s/^/const route = /' all.json and the final semicolon: sed -i.old -e '$s/$/;/' all.json and finally rename mv all.json all.js.
copy into a directory with an index page like this one, which eats an all.js containing a variable called route and puts it on the map all nice like.
how to prepare photos
use imagemagick and mogrify to make the photos small webps: mogrify --format webp --resize 400x-1 originals/*. one day i would like to have a nicer camera and then i have an excuse to dither the images too! like all the cool kids...
Put the photos into html with ls *.webp
| awk '{ printf "<img src=\"\%s\" title=\"%s\"/>\n", $n, $n }' > imgs.html
and then vim ex-mode r it into index.php (could do all of the above with a r! ls *.webp...).
i use the title attribute to label images with their titles on hover.
then i put the webpage next to the editor and go through it photo by photo.
- i rotate the portrait ones by adding a
style="transform: rotate(90deg)"(or 270) html attribute - i look at all the photos and delete the bad ones
- i add alt text to each of the photos
- i write narrative about the remaining good photos
write the rest of the webpage...
todos:
- can i factor out the below script into a common file?
- annotate route with photos and click to go to that part of the page?
- elevation graphs
- summary statistics