Interactive map v0.0

[aplaice]

To those not aware, @helitopia has been doing amazing work, developing an interactive map
to enhance the "Country - Map" cards.

The interactive map allows you to select the given country/region, on the "front" side, and displays the correct one, with colour-coding telling you whether you answered right or wrong (currently green for right, red for wrong).

correct.mp4

incorrect.mp4

The implementation is fully local, with all the map data and javascript code on your device(s), and no external calls to any other services. This means that it can work off-line, respects your privacy, is secure (in the sense that nobody can replace the version you have with a malicious one) and is reliable (its continued functioning is not dependent on, say, any first- or third-party servers)! All the new data and code is just 1.3 MB (less than a typical photo), so it also doesn't take up much storage space on your system.

---

We would love it if you tried the new interactive map out, so that you could tell us what you think! (What you like/what annoys you/what would make the map better?) We'd also like to know if the system works on various systems (especially iOS ­— iPhone/iPad — to which we doesn't have easy access)!

Note that the current implementation is still a beta, with known issues, most due to current[^1] limitations in the underlying jsvectormap library[^2]. Most importantly, the interactive map currently does not work for all regions, especially small dependent territories and seas — the interactive map is displayed on the front side (to help visualisation), but on the back side, the static map is shown!

[^1] We intend to extend the library either upstream or via a fork to remove these limitations.

[^2] This is not intended as criticism of the library — it's very lightweight and convenient, just not yet fully adapted to our needs.

---

In the future, the deck with the interactive map is intended as an upgrade for the current extended deck (such that you can keep your review history). However, for now, purely for testing purposes, we've created a test deck, which can be imported in parallel to the "normal" extended/standard AUG decks. Reviewing in this deck will not affect your "normal" AUG deck. You can also safely delete this "Ultimate Geography experimental interactive" deck, after testing, without losing your notes/cards/reviews in the "normal" deck.

(Alternatively you can just import into a separate Anki profile.)

If you want a deck with just the interactive "Country - Map" cards, you can create a filtered deck, with this search: "deck:Ultimate Geography experimental interactive" "card:Country - Map". (If you create it, we recommend emptying this filtered deck before deleting the actual "Ultimate Geography experimental interactive" deck.)

The import procedure is the same as for the "normal" decks:

https://github.com/anki-geo/ultimate-geography/blob/master/README.md#getting-started

except that you need to use the zip file below!

Ultimate_Geography_v0.0_EN_EXPERIMENTAL.zip

(We can also provide zip files for other languages if these are desired!)

(If you do want to upgrade, the relevant zip files are here. If you're upgrading from the Extended deck, then you just need to import the deck, as normal, and approve the several pop-up messages. A general guide for managing the pop-ups when switching deck type is available here. Note that undoing the upgrade — switching back from the Interactive deck to the Extended deck — should also be a smooth process, as described in the aforementioned guide.)

An introduction to the way the experiment deck and interactive maps work is here.

---

Thanks again to @helitopia for his fantastic idea and his meticulous implementation!

[josealberto4444]

With respect to colours of correct and incorrect answers, currently it doesn't seem intuitive for me. When the solution is incorrect, I would expect the solution I tapped to be filled with the incorrect colour/pattern and the correct solution to be always marked with the correct colour. I only realized now, when answering.

[helitopia]

That is exactly what we discussed early on!

Idea (# 7 - Green/Red answer)

...
Although ideally in case of incorrect answer two regions should be highlighted - selected in red and correct in green. But, again, the library right now lacks the ability to highlight regions with different colors (see Note #5 section).

@axelboc @aplaice shall I add this to our agenda to investigate the possibility of (somewhere after "Selected region pattern highlight" item is resolved)?

[aplaice]

I think so, yes. We might want to apply both a pattern and a different colour to the second highlighted region, so placing it later on the list makes sense!

[josealberto4444]

That is exactly what we discussed early on!

Oops, sorry! I had read all that issue, but there is so much information that I forgot. =P

[helitopia]

Added to the comment:

Edit: Incorrect selected and correct regions highlight

[josealberto4444]

I think it would be a great improvement (more intuitive) if the animation didn't start from completely zoomed out, but from the position of the selection I made. Then it could be seen as "This is not the solution (marked with incorrect colour) and I'll take you to the correct solution). Is it too much work to store zooming and position from the front view of the card and then using it as the start point for the back view? I don't know much about the code of this project (or Anki, or javascript at all). 🥰

[helitopia]

This was also mentioned by @aplaice as a minor annoyance:

The zoom resets (i.e. you abruptly zoom out and then zoom in) when switching to the back card.

[josealberto4444]

For me it's not annoying, it's confusing, and I think it'd be for new users, too. Anyway, I'll take care not to repeat things already discussed. =)

[axelboc]

Anyway, I'll take care not to repeat things already discussed. =)

Don't worry about it, that's what a feedback thread is for! 😉 It's good to synthesize the points that were brought up in the PR but not yet addressed, as not everyone would have followed the initial development.

[helitopia]

Added to the comment:

Edit: Zoom animation abrupt reset fixt

[josealberto4444]

Testing on Ankimobile (24.08, I think) on an iPad (iPadOS 17.4.1), every region gets colored as incorrect, no matter what you select in the front card.

[helitopia]

Thanks for testing it on IOS.

To be honest, I am not even sure how to debug the issue without buying AnkiMobile to install it even on virtual machine. I might only create Apple account and hope someone from the community would be willing to share the app via Apple Family Sharing.

[ukanuk]

Maybe you could test with the Safari browser? I think that would show the same behavior as AnkiMobile, as I believe the same WebKit engine is used across both of those.

[helitopia]

Maybe you could test with the Safari browser? I think that would show the same behavior as AnkiMobile, as I believe the same WebKit engine is used across both of those.

What do you mean by "testing in Safari browser"? Opening and trying out interactive map in it?

Edit: I suspect the specifics ofsessionStorage are different in AnkiMobile and the region code of a country cannot be retrieved:

return commonConfig.regionCode === sessionStorage.getItem(commonConfig.selectedRegionSessionKey)
      ? commonColors.correctRegionHighlight
      : commonColors.incorrectRegionHighlight;

Thus commonConfig.regionCode === undefined and commonColors.incorrectRegionHighlight is displayed

[ukanuk]

Yes, I mean testing the cards with AnkiWeb in a Safari browser is likely similar in many ways to testing with AnkiMobile on iOS.

[axelboc]

I mentioned I wanted to play around with the animated zoom on the back card.

After setting up the jsvectormaps project locally (not trivial...), I was able to get the playground running and tweak the setFocus function to my liking so the computation basically follows a logarithmic scale:

const newScale = Math.min(this._width / (bbox.width), this._height / (bbox.height));
const adjustedScale = Math.min(newScale, Math.log(newScale * 10)); // `min` so we don't zoom too much on big countries
    
return this._setScale(adjustedScale, ...)

This ensures that we zoom "close" to large countries and "far" from small countries. I think it's a good compromise without going into complicated solutions like showing circles or zoom boxes.

The downside, of course, is that it requires forking the lib. That being said, maybe the maintainers would accept a new configuration option that would allow tweaking the scale before it is being applied:

  focusOn: {
    region: 'XK',
    animate: true,
    transformScale: (scale) => Math.min(scale, Math.log(scale * 10)),
  },

Full git diff

diff --git a/packages/jsvectormap/src/js/core/setFocus.js b/packages/jsvectormap/src/js/core/setFocus.js
index 9abe6de..52ffe18 100644
--- a/packages/jsvectormap/src/js/core/setFocus.js
+++ b/packages/jsvectormap/src/js/core/setFocus.js
@@ -30,8 +30,11 @@ export default function setFocus(config = {}) {
       }
     })
 
+    const newScale = Math.min(this._width / (bbox.width), this._height / (bbox.height));
+    const adjustedScale = Math.min(newScale, Math.log(newScale * 10));
+    
     return this._setScale(
-      Math.min(this._width / bbox.width, this._height / bbox.height),
+      adjustedScale,
       -(bbox.x + bbox.width / 2),
       -(bbox.y + bbox.height / 2),
       true,
diff --git a/packages/playground/main.js b/packages/playground/main.js
index 553cb18..e0a7fda 100644
--- a/packages/playground/main.js
+++ b/packages/playground/main.js
@@ -1,5 +1,5 @@
 import jsVectorMap from 'jsvectormap'
-import 'jsvectormap/dist/maps/world-merc'
+import 'jsvectormap-maps/world-merc'
 import 'jsvectormap/dist/jsvectormap.css'
 
 const markers = [
@@ -23,19 +23,11 @@ const map = new jsVectorMap({
     initial: { fill: '#d1d5db' }
   },
 
-  // Labels
-  labels: {
-    markers: {
-      render: function(marker) {
-        return marker.name
-      },
-    },
+  focusOn: {
+    region: 'XK',
+    animate: true
   },
 
-  // Marker and label style
-  markers: markers,
-  markerStyle: { initial: { fill: '#66F' } },
-
   // Event handling
   onLoaded: function(map) {
     console.log(map)
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 09c6130..78dcc52 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "library:dev": "pnpm run --filter=jsvectormap dev",
     "playground:dev": "vite",
-    "dev": "npm-run-all2 -p 'playground:dev' 'library:dev'",
+    "dev": "pnpm run \/:dev$\/",
     "build": "vite build",
     "preview": "vite preview"
   },
@@ -16,6 +16,6 @@
   },
   "dependencies": {
     "jsvectormap": "workspace:*",
-    "jsvectormap-maps": "*"
+    "jsvectormap-maps": "workspace:*"
   }
 }