Animated Map Path for Interactive Storytelling

An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page.

From our sponsor: Try Mailchimp today.

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.

Attention: This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.
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.


It’s important that they should be actual <path> elements instead of other primitives such as <polygon>, <line>, etc. If you are using Illustrator, create a Compound Path by selecting the object and going to Edit > Compound Path > Make or by pressing Command/Ctrl+8 to convert the object to <path>

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()
        .childNodes      // ...the NodeList we get from the parsed SVG file.
      )                       // It returns a handful of nodes, like <!doctype,
      .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.


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.

The Map in Action

At the beginning of the journey, we show the map and when we start scrolling, the path animation begins.


When linking an image in the story with the path, we show a cone that indicates where the picture was taken:


There are points that can be zoomed and paused at, in order to show a gallery or other relevant parts of the story:


For the final bit, we use a little plane icon to indicate that this part of the journey was taken on an aircraft:


We hope you enjoy this experiment and find it inspiring!

GitHub link coming soon!

Tagged with:

Lucas Bebber

Lucas is a developer and illustrator at Garden Estúdio in Brazil. Check out his work on Codepen.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 115

Comments are closed.
  1. Okay I think the issue is the styles. This script doesn’t work with Illustrator’s new method of including rules for fill, etc. The new AI method would produce an SVG with

    etc etc

    but for this script to work as is, you would need to move all that to inline:

    <path class="st3" fill="97DAFF" d="blah blah…"

  2. Thank you for sharing this interesting topic about animated map path in interactive story telling.

  3. I want a functional version for this template please, because I am a beginner in javascript

  4. I would love a solution like this wonderful one but without Illustrator as I am a poor person with limited knowledge…

    Do you know of any timeline- or itinary-implementations done with other techniques but similar effect?

  5. Awesome. Grate work.

    Is possible to create second line animation from different point, once you reached? Example Once you reached Gullfoss, the flight animation starts from Eyjafjallajökull.

  6. Brother, que projeto bunito! Parabéns mesmo. Uma hora vou investir umas horas pra ver se tenho as skills necessárias para fazer algo (pelo menos perto) dele. Muito Sucesso!

  7. Hi,
    Impressive tool. I’m starting to develop a widget allowing people to create their own storytelling.
    I could insert a world map and create a fake travel, everything work. The most difficult part will be the UI to pick a road on a map (aka Google map) and transform it as SVG path. But I’m on it 🙂

    • Hi ! How is doing with your widget? I look forward to could create some great stories with your work and amazing Lucas’ story telling tools.

  8. Hi! Nice work!

    I have a question!
    How can I put a linked image into de map.svg?

    I placed a png into the svg and saved it with linked option selected.
    When I open the index file it just dont show the linked image. But If I open the map.svg file in any browser, the linked image shows up!

    Is there any way to solve this?

  9. Is it possible for you to include the Illustrator file as part of the source download? I seem to be having issues with the export of the svg file and I am wondering if I have something wrong in the actual file. I tried opening the svg in Illustrator and seeing if anything is different, but it isn’t different so I am wondering if the the actual Illustrator file looks different than an opened svg file. Thanks!

  10. Hello, I’m having issues with displaying the map in the left side, is it possible? Thanks..

  11. Ok, the effect is really impressive indeed but… I did my own maps two hundred times according to what you said in this tutto and it never works as it should be. Sometimes the path work in the opposite of what I need. Sometimes nothing appear, other times it’s only the map… Could you tell us what is the exact parameters of the .svg recording.