Country - Map (Experimental deck) UX improvements

[joshfrench]

Some enhancements to the map UX:

• Experience is particularly bad on a touchpad due to jsVectorMap's event handling. Rather than zoom by a fixed multiplier for each scroll event received -- which can be many on a trackpad compared to a mouse -- normalize the delta based on input mode. (This might be fixed upstream in newer versions of jsVectorMap?)

• Card backs start on the zoomed-out world view before zooming to the correct country, which makes it hard to correlate with where you actually clicked. Before flipping, set the back map view to match the front to preserve visual context.

zoom-to-country.mp4

• One small bug around flipping a card with mouse vs. keyboard made it possible to inherit the wrong state card state, leading to correct countries being highlighted in red.

End result:
✅ Successful procrastination
❌ Did not learn any countries

[aplaice]

Thanks very much for the fixes and changes!

I haven't yet tested the new behaviour (or compared it to the old one), but reading through the code it generally seems sensible.

---

This might be fixed upstream in newer versions of jsVectorMap?

Possibly, but that shouldn't be a blocker for improving this for ourselves here. (Maybe add a TODO to the comment near the zoomOnScroll: false to check on jsvectormap update?)

Card backs start on the zoomed-out world view before zooming to the correct country, which makes it hard to correlate with where you actually clicked. Before flipping, set the back map view to match the front to preserve visual context.

Yeah, I remember this being a known shortcoming when the interactive map was first implemented. Your fixing this is very much appreciated! :)

---

I'm slightly confused by the change to getRegionColor. We're in control of the regionCode (it's not input by the user during review (and if they modify the Region code field in the note itself they can mess things up however much they want :)), so I don't understand why we need to normalise it (trim + upper)? (Also why the expected && {equality check}? If expected is null then there will no region to highlight, so the colour is pretty much moot.)

---

(Note: I don't use the interactive maps myself and am not too familiar with the code, only having looked through it when it was merged.)

---

@helitopia if you have time any feedback would be appreciated!

[joshfrench]

I'm slightly confused by the change to getRegionColor

Removed this and I haven't been able to replicate whatever I was seeing. I was more focused on the zoom fix so I didn't really dig into whatever was happening there. If it was related to stale card state, the new session cleanup in initFront/initBack should take care of it anyway.

[helitopia]

Hi guys!

LGTM

Just a quick reminder to you that experimental deck remains a POC since jsvectormap library is highly limited in suiting this project needs (making the lib to handle such corner cases as England/Ireland/etc. split or making it work for water bodies is extremely hard and against its purpose)

The latest state of things was me (edit) migrating to newer version of jsvectormap with some bug fixes, realizing its limitations, writing appropriate library myself, then hitting a wall of performance issues, then researching on how to seam MapLibre GL JS into the library.

Unfortunately I stopped the research for indefinite amount of time due to higher-priority items. More context is in the following issue - 638. (edit 2) You may start reading from here to save some time.

@joshfrench feel free to research and contribute to the actual implementation instead of band-aiding the POC (which is also okay).

[aplaice]

Thanks! Testing this looks great! The gradual zoom with a touchpad, in particular, is a huge improvement.