Consider embedding interactive map as <iframe> into "Country - Map" note type (Extended deck version)

First just wanted to say what a wonderful thing this repository is for people that want to raise awareness of the countries and their details in the world!

I have recently upgraded to extended deck version for the sole reason of presence of "Country - Map" note type. But, unfortunately opposite to what I expected, in this type of notes you can't really see the whole map and zoom in on the country as if you have "chosen" it. You only see a general globe.

This led me to looking for a solution and I found one! I edited note type to provide a link to the map with all names and other stuff removed - only land is visible. For example:

Here is the map link that I currently use: https://www.atlist.com/showcase/world-map-with-no-labels

And now I realize that it would be even better to embed this interactive map as iframe into this note type so that it would not even be necessary to open separate browser page for a map and switch to it.

Creating the issue to ask whether it is a good idea. If so I can try to create a PR with the change and we will see whether it is any good.

Thanks for bringing this up! It's a very interesting idea!

Just to make sure: the point is to embed an interactive, unlabelled (but with country borders) map on the front side of the "Country - Map" cards? (So that one just has to "choose" the country from a visible map, rather than visualising the map oneself.)

(Aside: this is also interesting because it helps narrow down the goal of the "Country - Map" cards, which is rather than unclear with the current design (that has long bothered me) — whether it's a) to be able to locate the country on a map, b) to be able visualise the country's borders, c) to be able to visualise the country's borders and its neighbours, d) something else. Here it'd be clear that it's just a.)

Unfortunately, there are many probably-hard-to-resolve issues (see below) that would make me very hesitant accepting such an iframe solution into the main extended deck. (If Anki had a convenient global opt-in/opt-out mechanism then many of these wouldn't hold, but unfortunately it doesn't.)

However, an alternative approach would be for this to go into a "variant deck" (e.g. we'd have ~ "experimental extended deck with interactive map" in addition to "standard" and "extended" (probably just for English and/or some small subset of languages to avoid an n×m proliferation of decks)), where the barrier to entry would be much lower (though the flipside would be that the deck would likely also have far fewer users) — i.e. in effect an internal soft fork (if that makes sense) — if that's something that you'd be interested in.

Issues with iframe solution

Bandwidth on mobile

Could work around this by having the iframe only load if one presses some button, but that makes it far more annoying/removes much of the advantage over the "open in browser" solution.
Security

In principle, Anki(Droid|Mobile) has the cards in a sandbox, but especially for older versions it might be easy to escape from, so loading content from a not-necessarily-trusted website is problematic, unless the user clearly opts in.

(Similarly for privacy — most people won't care, but some will very strongly.)

(Here unfortunately the "hide behind button" solution wouldn't be sufficient.)
Terms of Service

I'm not sure whether using such an iframe is in line with Atlist's and Google Map's ToS.
Licensing/free culture/software

Some of our contributors care very strongly about this deck being free culture, and using atlist.com would collide with this. Having this in a variant deck would IMO be OK-ish, though.

(There probably is some appropriately-licensed alternative, but if we're sticking to a variant deck, I'm not sure if it's worth the effort to find it/make sure that it's as convenient etc.)
Consistency with our maps

(Style-wise and borders-wise.) (Would be very-nice-to-have but not essential.)

Of these 1, 2 and 4 wouldn't hold for a variant deck (the user would be clearly opting in), 3 might still hold (but since it'd be an experimental variant, it'd arguably be less of a ToS violation?) and 5 isn't essential.

(Sorry for the wall of text — didn't have time to make it any shorter...)

If Anki had a convenient global opt-in/opt-out mechanism then many of these wouldn't hold, but unfortunately it doesn't.

Could you elaborate please? What do you mean by "opt-in/opt-out"?

However, an alternative approach would be for this to go into a "variant deck"

Just to be clear, the idea of the "variant deck" is to gauge users feedback and if everything works out great (and all the critical points are solved) then merge it into extended deck?
As long as additional deck variation is not burdensome to support I am all in 🙂

Just to make sure: the point is to embed an interactive, unlabelled (but with country borders) map on the front side of the "Country - Map" cards? (So that one just has to "choose" the country from a visible map, rather than visualising the map oneself.)

Exactly! Here is what I managed to get for temporary use:

As you see from the gif, the issue with embedding the link I attached is 1) Slow loading (relatively); 2) Unnecessary labels displayed

Additionally, I've performed a bit of research and the points 3 and 4 (ToS and Licensing) are actually problematic with the map, link to which I attached - according to their pricing model users are billed by views of their map, if I understand correctly. So, unless we want to bring someone in deep debt, we might not use this map. Moreover, the user might delete the map from the profile at any time, bringing the whole idea down

I see 2 alternatives to the aforementioned issue:

Usage of open-source map API with labeling (i.e. country names) removal.

I've researched this idea a bit and there are certain providers of maps like OpenStreetMap that allow to make use of their map with the requirement of crediting them

The only thing left to figure out is whether I will be able to apply some filters to display non-labelled map. There is JS library called Leaflet that is explicitly stated as mobile-friendly. Its intention is exactly to make use of open-source maps. If I manage to figure out how to make it work, even mobile users might benefit from this idea as there should not be performance issues. Note, that point 1 (Mobile bandwidth) remains

HTML Canvas

This idea came to me literally today as a complete turnover from the previous one of embedding labelless map cards.

Instead of providing interactive map and make user "choose" the country with already existing border, we might provide a picture of, say, borderless Europe in the canvas and the user is themselves responsible for highlighting the borders of required country and deciding on whether they did it correctly enough

The downsides I see is 1) Mobile under question; 2) The need to provide different canvases to different continents (probably even more, as there are some islands far from the continent); 3) User is not required to interactively look up the country (might impact the memory effect?)

As a general conclusion

First off, the initial idea is not valid enough (at least in its purest form, as is) and needs to be improved by either (but not restricting to) of the alternatives stated (though as a hacky way it still works and I think I might continue using it until there is better solution)

Revisiting your points assuming first idea is to be implemented (OS map API usage):

Bandwidth on mobile - needs to be worked around. A button on every card as you stated is annoying, right. If there were a way to tick a setting option, whether to show map link or to automatically show interactive map for all the cards - would be great. ~~The only way I see now is via plugin somehow.~~ AFAIK Plugins are not supported in AnkiDroid yet. As for AnkiMobile - I have no clue, not an Apple user
Security - may be less of an issue as we work with open-source software. Gets eliminated completely assuming introduction of variant deck
Terms of Service - as stated earlier, using the map is not an issue as long as we credit the creators
Licensing/free culture/software - using OS software eliminates the point altogether
Consistency with our maps - API allows for certain tweaks, so in terms of color there might be actually something to adjust. Borders - I think not.

(Sorry for the wall of text as well, just trying to help improve something I admire)

Thanks very much for your detailed, thought-out reply!

Could you elaborate please? What do you mean by "opt-in/opt-out"?

I mean more-or-less what you wrote here:

to tick a setting option, whether to show map link or to automatically show interactive map for all the cards - would be great.

at the very least as an overall per-user option (to apply everywhere for the given user).

(Preferably there'd be easy access to a toggle (so that users can quickly switch between having it displayed/not displayed), and ideally it'd be on a per-platform basis — so that users can, say, choose to always have the map displayed on desktop but never on mobile; however these are even less likely.)

One simple-ish (at least for the more technically-inclined users..) approach that I missed earlier might be to control the loading of the interactive map with a variable in the JS code, along the following lines:

// With nicer function/var names

const shouldLoadInteractiveMap = false; // switch to true to opt-in

function loadInteractiveMap() {
    // create iframe or apply whatever approach we choose
}

if (shouldLoadInteractiveMap) {
    loadInteractiveMap();
}

Unfortunately, this is very user-unfriendly for the non-technically-inclined, and possibly even less convenient than just using a variant deck.

(Aside: using localStorage to store user preference doesn't work (like I hoped it might) as it's currently not persisted on either Anki or AnkiDroid.)

Just to be clear, the idea of the "variant deck" is to gauge users feedback and if everything works out great (and all the critical points are solved) then merge it into extended deck?

Yes, gauge user feedback and merge if critical points are solved and users like it (but keep it as a variant otherwise (in effect as a heavy opt-in mechanism)). (Note that the points I've brought up are my viewpoint. My co-maintainers might have more stringent or more relaxed opinions and depending on user preference we might also adjust what is considered critical (in either direction), so I'm not making any promises regarding inclusion into the extended deck.)

I see 2 alternatives to the aforementioned issue:

Usage of open-source map API with labeling (i.e. country names) removal.

I've researched this idea a bit and there are certain providers of maps like OpenStreetMap that allow to make use of their map with the requirement of crediting them

The only thing left to figure out is whether I will be able to apply some filters to display non-labelled map. There is JS library called Leaflet that is explicitly stated as mobile-friendly. Its intention is exactly to make use of open-source maps. If I manage to figure out how to make it work, even mobile users might benefit from this idea as there should not be performance issues. Note, that point 1 (Mobile bandwidth) remains

Yeah, I don't think there's a way around a setting option of some sort.

(Very crazy) local map

A very crazy idea would be to store the JS library and all the tiles locally (in the deck!). Since we don't need to have high zoom levels, the amount of tiles might be just about feasible.

To get a feel for the potential data size, the Organic Maps (offline maps app) "WorldCoasts" mwm file is 8 MB, while the "World" file is 46 MB. The "World location map" SVG file on Wikipedia is 5 MB. For comparison, all our AUG image files are currently 16 MB. The amount of detail available in the World Map on OM (without extra data files) is slightly greater than what we need, and the detail in the SVG file is about right, so maybe we could manage without ballooning our media size?

Clearly, this would also be very hard to get to work, since we'd be embedding everything...

(It seems that XMLHttpRequests from an iframe to a file in the Anki media folder do work, at least on Anki 23.12, so it probably is technically doable.)

HTML Canvas

The downsides I see is 1) Mobile under question; 2) The need to provide different canvases to different continents (probably even more, as there are some islands far from the continent); 3) User is not required to interactively look up the country (might impact the memory effect?)

There's also the issue that by displaying different canvases we'd be telling the user which continent the country is on. Also, for larger continents like Asia a single canvas might not be detailed enough.

As a general conclusion

First off, the initial idea is not valid enough (at least in its purest form, as is) and needs to be improved by either (but not restricting to) of the alternatives stated (though as a hacky way it still works and I think I might continue using it until there is better solution)

I'm glad that at the very least you have an ok-ish approach for your personal use! :)

Revisiting your points assuming first idea is to be implemented (OS map API usage):

Bandwidth on mobile - needs to be worked around. A button on every card as you stated is annoying, right. If there were a way to tick a setting option, whether to show map link or to automatically show interactive map for all the cards - would be great. ~~The only way I see now is via plugin somehow.~~ AFAIK Plugins are not supported in AnkiDroid yet. As for AnkiMobile - I have no clue, not an Apple user

Security - may be less of an issue as we work with open-source software. Gets eliminated completely assuming introduction of variant deck

Terms of Service - as stated earlier, using the map is not an issue as long as we credit the creators

Licensing/free culture/software - using OS software eliminates the point altogether

Consistency with our maps - API allows for certain tweaks, so in terms of color there might be actually something to adjust. Borders - I think not.

I agree that the OS map approach is promising. (Definitely something we'd want for a variant deck, and IMO for the main deck if we find a convenient "setting option".)

I'm keen on the idea of storing an SVG world map in the deck. I feel like we might even be able to make it interactive with a bit of JS so users can zoom in and tap on the country to answer. Maybe another shared deck has already done something this?

This seems promising: https://jvm-docs.vercel.app/

This seems promising: https://jvm-docs.vercel.app/

Amazing finding!

From a first glance at the docs, the library provides a lot of the features that fit the issue needs:

Region and Marker concepts can handle the definition of countries and capitals
onRegionClick, onMarkerClick events can be probably used to explicitly interactively select a country / capital
Custom countries can be generated, though the linked project seems a bit abandoned

Just a note from a few days of usage of interactive content on AnkiDroid: It is horribly incompatible when there are certain gestures set up in the card reviewer (e.g. "Undo", "Edit note").

@aplaice, @axelboc

If you don't mind, I will take the things discussed into consideration and start the research of the library mentioned above with further development

I think I will get back with updates once in a while. Just note, that it won't be quick (think a month or so) as I am not the fast one 🙂. Having other things on the agenda does not help either. So if it is such a revolutionary thing that needs to be done immediately, then probably it is beneficial if someone else volunteers to take control of development.

It's definitely not revolutionary/urgent — take as long as you need!

Thanks very much for looking into this!

anki-geo / ultimate-geography