leaflet

Experiment with web mapping using Leaflet

Web app: where Kai (or anyone else) can go jogging these days (but, in Paris, not after 10 am or before 7 pm).

lat/lon should be displayable and/or updated by hovering, clicking on the map
be responsive, with map taking whole page, no weird scrolling
handle #hash parameters same as regular URL parameters?
- would allow no-reload, more SPA-like
- why am I rolling my own SPA?... laziness?...
Handle FOUC, more like FODT or FONJT (default, non JS)
GPS tracks should be
- optionally displayed
- distinguishable
- clickable to show date and distance and time info
- transparent for heatmap effect
- enterable by pasting in GeoJSON or a Strava etc. URL
- ...imported automatically from Strava or Garmin or other
try to keep from bloating to another Acme Maps...
- I mean keep in mind this nice app which does not need reinventing
  https://mapper.acme.com/?ll=48.87917,2.38472&z=11&t=M
but copy some of its nice features:
- allow (or require? avoid TMTOWTDI) ll=x,y param instead of tedious lat=x&lon=y 5 keys longer
- add z zoom param and t type of map param
- should update URL params like lat, lon, zoom
handle no-Javascript case:
- at least, show an image of what it would look like
- at best, generate the right image server-side

We'll need to use GeoJSON.

I can export from Strava to GPX

and convert from GPX to GeoJSON

also available as a command-line tool

Tip to display JSON legibly:

python -m json.tool arun.json | less

Github actually shows GeoJSON as a map by default, nice:

This looks worth checking out, a tool to export Strava runs from command-line via the API

And this is a nice Jupyter notebook demonstrating what you can do to analyze the Strava data

This is a nice site that allows testing out a GeoJSON file by just pasting it in

I guess GeoJSON is not ideal for tracking, since it's more for geographical features, not tracking movement.

But I guess it's good enough.

This is a nice super-simple approach to having a heatmap effect: just use opacity and line thickness.

Here's the current super-manual procedure to add a run to the map:

$ mv /mnt/c/Users/Kai/Downloads/*.gpx data/arun.gpx
$ togeojson < data/arun.gpx | python -m json.tool > data/arun.json

UPDATED manual method!

Download the GPX file from Strava to /mnt/c/Users/Kai/Downloads/
npm run build
emacs runs.js /tmp/arun.json
copy the contents of arun.json as the last element of the runs array in runs.js

UPDATED again:

An old but good tip for quickly selecting certain form elements for styling: