Animated Map Path for Interactive Storytelling

Today we’d like to share an experimental demo with you. This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story being told with the path itself. The journey can also contain images that will indicate where they have been taken with a semi-transparent cone. It will appear as soon as the image is in the visible viewport. A little plane icon is used in the last bit of the path in order to indicate that the journey was made on an aircraft.

Browser Support:

ChromeSupported
FirefoxSupported
Internet ExplorerNot supported
SafariSupported
OperaSupported

The photography is courtesy of Dan Rubin who has travelled to Iceland and has taken some incredible shots that we used in the demo. Find him on Instagram, Twitter, Flickr and VSCO.

To make this map, we chose canvas for rendering for performance reasons. It could be done purely with SVG, but at the time of writing, SVG rendering performance isn’t quite there yet, while canvas is hardware accelerated on most platforms.

That’s not to say we won’t use SVG at all, though. On the contrary: to draw on the canvas, we need to get the map graphics from somewhere, and maps are perfectly suited for vector formats like SVG. Moreover, we also need to get trail and point data, and SVG is a great candidate to store that information.

So now let’s see how we can use both together.

SVG + Canvas

First, we need to prepare our map. What we will need from it, for this project:

The trail path;
The path of the “camera”;
Points of interest, with names;
And of course, the map itself.

Both paths are simple… well, <path> elements, that can be drawn with any Bézier curve tool or similar.

Points of interest can be stored using <circle> elements, created with the regular ellipse tool. The names of the points can be set as the name of their layers, and you can retrieve them later with getAttribute('id').
Speaking of layer names, don’t forget to set the name of the layers of these “special” graphics, because we’ll need them in order to access the layers later by code.

Finally, the map itself can be just any graphic. You can draw anything you want on top of it too, like additional points of interest, terrain, parallels, etc.

Drawing SVG on canvas is simple, but comes with a caveat: you can only draw straight from actual .svg files, you can’t modify the SVG with code before drawing. Therefore, you have to hide all the special layers of the SVG (camera path and the like) before saving. Loading the SVG both as a regular <img> for drawing in canvas and as a <svg> element for accessing data means that we have to load it two times and hope the browser cache saves us from having to download it twice.

The code could look like this (using ES2015 and Promises):


   let mapFile='map.svg'
   let mapSVG, mapImage
 
   ajaxGet(mapFile).then(response=>{ // Load the SVG with an Ajax request.
     mapSVG=Array.from( // Makes a new array from...
       new DOMParser()
         .parseFromString(response,'image/svg+xml')
         .childNodes      // ...the NodeList we get from the parsed SVG file.
       )                       // It returns a handful of nodes, like 
       .filter(node=>{         // but we only need the svg element, so we filter that
         let tag=node.tagName  // array looking for any elements ...
         if(typeof tag=='undefined')
           return false
         return tag.toLowerCase()==='svg' // ...that have the tag name svg...
       })[0] // ...and we get the first (and usually only) one.
 
     loadImage(mapFile).then(img=>{ // Then we load the image again,
       mapImage=img                 // this time as an `img` element.
 
     ...

The performance gains for using canvas will be nullified, though, if we draw from the SVG on every frame, especially if your map is complex. There are some techniques you can use to avoid that.

The simplest one is creating a hidden canvas and drawing the SVG there once. Then, you draw on the main canvas from that hidden canvas instead of drawing from the SVG: drawing from a bitmap source is much faster.

That might come with some problems though: one of the biggest reasons for using vector graphics is being able to zoom without losing resolution, and that is lost if we draw on a canvas that’s too small. Using a huge canvas for drawing on every frame, though, can get pretty slow.
A technique we can employ to mitigate both issues is keeping a high resolution copy of the map, and using a reasonably sized buffer canvas for moving – and refresh that buffer only when we move or zoom too much.

Doing this allows us to only draw from the high resolution image when we need it, and doesn’t restrict us to using low resolutions.

Paths

We can move through an SVG path using a built-in <path> function: getPointAtLength. It returns the position of a point on an arbitrary length along the path. We can get the total length of the path using getTotalLength.


   let path = mapSVG.querySelector('#camera-path path') // Gets the path element
 let length = mapSVG.getTotalLength() // Gets the length of the path
 
 // To get, for example, the position of a point halfway through the path
 path.getPointAtLength(length*0.5) // returns {x: ..., y: ...}

It would be useful to be able to tell how far along the path each point of interest is located. Unfortunately, there’s no getLengthAtPoint function (of course, because there’s no guarantee that a point crosses the path at all).
We can approximate that, however, getting a length that is more or less close to the point, using simple trigonometry and some iterations:

We can use the same getPointAtLength function to draw the trail on the canvas, running the function a hundred of times, storing the points in an array, and then drawing lines from that array. Alternately, we can parse the d attribute from the <path> element and use similar canvas drawing commands.

Hopefully these techniques will give you a bit of insight into how something like this can be achieved. Now, let’s have a look at the results of our implementation.