Annotators

URL

Maps make a great case for SVG. There are some neat libraries and tools to play with SVG maps but, more importantly, maps make it easy to understand that an image can be semantic.

A couple of weeks before Shepazu posted this, was playing with SVG maps of contemporary Africa’s political boundaries. (Especially those used on Wikipedia; including some which separate South Sudan.) Been teaching African Studies (on occasion) for years, and maps of the continent tend to become important quite quickly.

Those SVG maps with which I started playing were pretty neat in several respects. The fact that they were vector drawings instead of bitmaps meant that they easily be resized without causing visual artifacts. More importantly, though, each country was drawn as a named outline, so it was possible to play with them as separate objects.

One thing I was trying to do is create an animation which would show where each country fits in a region of the continent, using this United Nations geoscheme. Doing so, eventually noticed that Sudan and South Sudan had been classified as part of different regions, which is an interesting tidbit which could lead to useful classroom discussions.

It’s flawed in many ways, but for someone with almost no background in this things, it’s a significant accomplishment.

(Surely, the same could be done through SVG itself. Haven’t been able to learn how to do so.)

Playing with those maps taught me quite a few things. For instance, the benefits of a well-tagged image. And some rudimentary notions of CSS-based animations. Or the limitations linked to selecting rectangular sections of an image (with a large overlap between Northern and Western Africa, for instance).

The experience also gave me all sorts of ideas. Such as annotating parts of a well-structured image. Or uses for Open Street Maps. Or ways to embed interactive content (including quizzes) in Open Textbooks.