Project: Interactive dive map of Funen

 Back to All Projects
  • Completed: 2017-01-13
  • Stack: SVG, CSS, JavaScript, HTML, svg-pan-zoom, Hammer.js

Goal: Create a trilingual map of dive spots around Funen, for practical reference to both locals and tourists.

I made this map after I got a job as a web - and graphic designer at a Danish dive center. My boss was attending the yearly Boot Messe in Germany to promote diving in Denmark, and particularly wreck diving in the South Funen Archipelago. After making a map as part of a print folder he were to bring, I got the idea to supplement with an interactive online experience - and this is the result.

How I Made the Map

SVG is the answer. The map is pieced together of several slices, and assembled in Illustrator. The graphical elements were exported to SVG from Illustrator, but I optimized the code by hand to make sure it was easy to deal with afterwards when I had to make it interactive.

The hover and click effects are made with a mixture of jQuery and GSAP. The touch support is done with Hammer.js (which I'd definitely recommend for ease).

The lightbox gallery is made with Fancybox - a very lightweight, easy to configure plugin I stumbled upon towards the end of the project.

The panning and zooming behavior was made with the svg-pan-zoom library.

Panning and Zooming

This was so tricky it deserves a section of its own. As stated, I used to svg-pan-zoom library, which works for the most part. Let's stress the word 'most', here...

Touch support wasn't included, hence Hammer.js, but that was an easy fix at least. The bigger problem was the panning since there was no built-in prevention of panning outside the viewport which was a serious annoyance, especially on a touch screen where a quick swipe could send the map flying.

I had to code my own solution since the suggestions by the library author didn't work for me - and it took a full day. I'm still a bit surprised that I managed. The unfortunate side-effect of the functional solution, however, is that I can no longer change the SVG viewBox with JavaScript to match an altered screen size / orientation and make the map fit the screen better. I would've preferred that - but that's how it goes.

Also, I made my own custom controls since the custom ones were placed in the bottom right corner of the viewport, and therefore hidden on some screens. 


A late addition to the map was the filter functionality. I've made filtering before, but that was based solely on button clicks, and this time I needed to add an URL hash to make the selection shareable. Furthermore, I normally base the filtering on the value of data-tags, which isn't technically 'allowed' on SVG even though the browsers do support it and it was in the SVG2 spec (which will, most likely, be dropped).

I tried to use the desc element instead, but it proved too flimsy a solution that didn't work on all browsers or, even, with all content. So I went back to the non-standard solution out of necessity (sorry!).

That cleared, I still needed to implement the URL hash. That wasn't difficult in itself - except for one annoyance. I figured a simple if... else construction could do the trick, but I was wrong. I needed to add an elseif to account for showing all destinations in case no hash was set - which in my book is fairly redundant. But... JavaScript...

So, What's Next?

I will continue to add information and details to the map, and to improve performance. As for now it is a fully functional site that just lacks some destinations (and probably some cleaning up).

It has been lovely to get the chance to dive (pun intended) into SVG again after a couple of months - I really missed it. I learn so much every time, and my fingers itch every time I get the feel for how great the potential really is. 

Well, check the map out, at your leisure. I'm pleased for now, but I know it won't be long before I'll wake up in the middle of the night with ideas for optimizations...

© Katrine-Marie Burmeister, June 2019