Let's make a map quiz game with Vue.js, SVG and CSS

— 2 minute read

Recently I was playing around with SVG gradients and CSS animations in SVG and I thought I could use svgkremer to make a map quiz game.

svgkremer is a Python program I made a while ago to map the SVG space to the GPS coordinates of a geographic area, so that you can place elements on a SVG map image having their coordinates as data attributes:

<svg>
  <g data-lat="41.9028" data-lng="12.4964">
    <!-- Rome -->
    …
  </g>
</svg>

When I made svgkremer I only cared about translating from GPS to SVG coordinates, but for this game I also needed to translate the other way around, in order to calculate the distance between an already known location and the point clicked on the map. To do the math I used ChatGPT, which didn't fullfill this task as good as the other ones I gave it.

In the YouTube video you can watch me building the game from start to finish. This is more a live screencast than a tutorial. I tried to explain the key points, and I've included chapters to make the navigation easier. Enjoy the video!