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.

StorytellingMap











View demo Download source

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.

paths

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.

layers

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 {         // 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.

buffer

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:

length

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.

StorytellingMap01

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

StorytellingMap02

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

StorytellingMap03

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

StorytellingMap04

We hope you enjoy this experiment and find it inspiring!

GitHub link coming soon!

View demo Download source

Previous:
Next:

Tagged with:

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

View all contributions by

Website: http://gardenestudio.com.br/

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 89

  1. 2

    Thank you very much Lucas ! It’s very impressive
    I try tu use it for a project, and it seems to be incredibly well-thinked.
    I have just a problem : for a reason i ignore, some points are not well detected on the path
    Path which is a little bit complicated (with many “loops”…)
    Is there a way to improve that ? Do you have best practices for positionning points among the path ?
    Thank you very much !

    • 3

      Hi Thibaut,
      I have exactly the same problem. Did you found a fix ?
      I did many, many tests, and to me the problem has nothing to do with the SVG image, and neither the way you created paths and the circles. I mean not directly.
      It appears to me that when points/circles are very close to other points (a very frequent case when you have a complicated path with loops), the script tries to determine the next point on the path, and probably due to the journey path and also to the method used to locate the point (in a trigonometric way without care for the order of the points on the path ?), it returns, not the very next point on the path, but another one, geometically closest…
      This is very frustating, as this script is awsome and very well-thinked as you said.
      I guess that a tightest control on the order of the the points would solve this problem (for example with the help of a nomenclature for naming the layer of the points, or with a strict order of the layers of the points, or even sometimes partial, assuming that a point can be use only once, it would avoid this trouble for the previous points on the path). But i can not figure out this huge script enought to customize it.
      Best regards and special thanks to Lucas !

  2. 4

    Hi

    i was creating similar kind with india map and built svg as you suggested
    I was getting errors as
    app.js:3 Uncaught (in promise) TypeError: Cannot read property ‘getTotalLength’ of null(…)s
    app.js:2 Uncaught TypeError: Cannot read property ‘setAttribute’ of null

    Could you please help me out on this
    Looking forward to your reply

    Thanks

  3. 5

    I have the map problem also. However i noticed when I set the path to zoom 0; when it got so tiny you could hardly see it the map was revealed to be off the canvas by a mile!

    It would seem it is something to do with the way Illustrator deals with SVG.

    Is there a way to move vectors in SVG files by using a text editor like Sublime Text? or maybe it is my path that need to be reset?

  4. 8

    Hi Lucas,

    So I have been trying for a few days now to draw my own map in the map.svg. But as soon as I drop anything inside of the file and then save the map and anything that is not a trail path, cam path or point of interest gets thrown out of the view port. As in my previous comments you can see the green square completely out of view only when I zoom out enough.

    I cannot find anything to explain this phenomenon in Illustrator using SVG files.

    Do you have any idea at all what is causing this?

    I have also tried Inkscape, but the SVG layers are not visible.

  5. 9

    I do not have words, just amazing, I’m looking for something like that for a long time, Congrats!!!!

  6. 11

    Hello – in the code you have a TODO that hasn’t been handled – ‘TODO: diff to test if it should render’ in component.js – I’m not sure I get what you were wanting to do? Can you explain quickly.

    Lovely work…

  7. 12

    Hoi, I’ve been trying to re-work your awesome script, to fit in a more dynamic environment.
    My goal was the following: Instead of listening to body`s scroll event, achieve to listen the scroll inside any div.
    So far I tried to do the next:
    this: document.addEventListener(“scroll” …
    into this: document.getElementById(‘about’).addEventListener(“scroll” …
    Nothing worked, I would appreciate any help, or at least, what js will let me draw that path, move and zoom the camera,
    so I could write it on my own.

  8. 13

    Hello. I’m a developer and I try to understand how your map works. It would be very helpful if you could explain me how iterator in path.js works (iterate(lower,upper)).
    The problem is that with my svg file integrated the drawn path is not correct. Points are placed not in the needed order.

  9. 15

    This new tool is unbelievable for me! I tried to use the demo and it`s fantastic. I am sure people who will read any text with the path like it, because it is very easy to understand the sense when you`re watching text, image and even path.

  10. 18

    Hello,

    Getting Uncaught SyntaxError: Invalid or unexpected token in dist/app.js , and the map is not getting displayed at all. What am I missing here.

    Kindly help.

  11. 19

    Your idea is a good one now a days these kinds of animations are loved by everyone, Good start to reach all kinds of people.

  12. 20

    I love this idea! Very visually appealing! Does anyone know how to draw a jpeg image using canvas as the map vs. an svg.? so far I haven’t been able to figure out which parts of the code are actually drawing the canvas map.

Follow this discussion

Leave a Comment