13. January 2017
This is an interactive diving map of the Danish island of Funen - made as a work project that keeps growing and growing every time I think I'm done with it.
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.
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!).
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...