Animating a Route on a Map

[Elusien]

I have created a web-based utility that animates a route on a map. Several people have asked about this in the past, and although simple routes can be animated using Shotcut alone, more complex routes are much more difficult to do this way. This follows on from this post:

Trace an animated route over a map

Hi, I am new to shortcut, apologies if it has been posted but cant find anything like this. Looking into create a trace rout over a Google map image on version 20. Found it is possible on earlier versions using overlay html but this version doesnt have it anymore. Any ideas how I can do the trace animated? Creating a documentary of my grandmother and wanted to show how they moved from country to country while she is speaking. Thank you

My method is relatively simple and makes use of animation commands (SMIL) that can be embedded in an SVG file. For more information and instructions on how to use it have a look my website at:

Resources for Shotcut

There is a link there to an example that was created using it. If you have any queries, or suggestions for improvements, please let me know.

A screenshot of the utility is shown below:

[jonray]

Wow, this is beyond clever. Bravo!

[bentacular]

Wow! I gotta play with this! Thanks!

[Namna]

Bonjour,
Je suppose que vous avez du passer quelques heures pour faire ce travail
Le logiciel utilisé pour créer le chemin me fourni un dossier dans lequel j’ai l’image de la carte au format .png et le fichier .svg
1/ Lorsque je charge le fichier svg sur votre site, la carte n’est pas visible.
2/ Les zones de saisie Start et Duration sont sans effet quelque soit la valeur entrée.
3/ L’icône reste dans le coin en haut à gauche
4/ Le bouton Reset remplit la forme du chemin en noir.

Hello,
I guess you had to spend a few hours to do this job
The software used to create the path provides me with a folder in which I have the image of the map in .png format and the .svg file.
1/ When I load the svg file on your site, the map is not visible.
2/ The input fields Start and Duration have no effect whatever the value entered.
3/ The icon remains in the top left corner.
4/ The Reset button fills the shape of the path in black.

Translated with www.DeepL.com/Translator (free version)

[Elusien]

Just read this after watching the golf at Torrey Pines in the US on TV. I’ll see if I can sort out the problem later this morning (Sun).

[jonray]

Hi Elusien, I’m excited - I took it for a test drive and it worked quickly and easily for me!
( this is a rough screenshot captured with ShareX. I haven’t edited it so the animation begins when I clicked the “refresh” icon in Chrome):

Animated route on a map created with Elusien's SVG animation method

One issue I think - I selected Start (secs)=1, expecting the animation to wait 1 second before it began, but it begins immediately. Is this a bug?

Another point to help other users- I used the “Draw Bezier curves” tool in Inkscape to create the smooth curves of the path, editing the curve after I drew it in with the “Edit Paths by Nodes” tool. I could have got it even smoother if I spent a little more time on it.

Bravo again, this is truly mind-boggling. I have NO idea how your brain even began to think of this.

[jonray]

PS for your interest, should it help, @elusien, here’s my svg:
Map animation 02 - Copy.zip (185.6 KB)

[Elusien]

EDIT - THIS IS NO LONGER A PROBLEM - the utility now handles “Linked” images as well as “Embedded” ones. – Elusien (2021-02-02)

Problem analysis and resolution

Most of the testing I have done with SVGs has been with those created by Inkscape, while your SVG is created using Intaglio. When Inkscape saves an SVG, all of the elements, Paths included, have an ID attribute, e.g. id=“path123”, as can be seen in my screenshot above. Intaglio does not do this, so the paths have no IDs. I have code in my utility to get around this, but there was an end-case, which I have now fixed. I have updated the utility on my webpage, so changes to the “start” and “duration” now work.

1 bug fixed, 1 to go: When you import an image (jpeg/png etc) into Inkscape you have the option to either “Embed” the image or “Link” it. I have always used “Embed”. This converts the image to text using Base64 encoding. If you use “Link”, it is similar to Shotcut - it just makes a link to the file on disk. The SVG created by Intaglio uses the second method (see the “href” below:

<image xlink:href="7fbaa1d521b0.png" width="1280" height="720" transform="matrix(1,0,0,1,0,0)"/>

This is a major problem since the utility will try to load the file “7fbaa1d521b0.png” as if it existed on my web-server in the UK, not from your local disk, since browsers are not allowed to access your local disk. There are 3 possible solutions to this.

1. When you load the image in Intaglio tell it to Embed the Image, not “Link” it. I don’t know if Intaglio has such as option, but if it does this is by far the easiest option.

2. Open your SVG file in Inkscape. Select the map. Delete the selection. Import the PNG image (EMBEDDED). Move its layer lower than that of the tracing. Position it to the correct place. Save as a new SVG and use that in my utility. I just tried that and it took me less than 1 minute.

3. Convert the image to text using Base64 encoding (there are online converters e.g. https://www.base64-image.de/) and use a text editor to replace the above <image> element - I’ll describe this in more detail on my website.

4. Modify my utility to recognise Linked images, ask for the user’s permission to access this file on their local disk, convert it in the javascript to Base64 encoding and then be able to work as before. This is more difficult, but can be done, although it may take me a day or two to do the coding and test it. I will do this nevertheless as I have done something similar before and know that it isn’t too difficult.

As I said, if you need to do something quickly, see if option 1) is possible with Intaglio, or use option 2. If you are confident enough, try option 3. If you can wait, then wait for option 4.

[Elusien]

@jonray

Is this a bug?

Yes it was a bug - now corrected (see response to Namna below). Try adding an icon to the path.

[Namna]

Merci, j’ai bien compris et cela n’a pas trop d’importance dans la mesure ou le code créé par votre utilitaire ne modifie pas ce lien. Il n’y a donc pas d’image de la carte dans votre utilitaire, mais lorsque je colle le code créé dans le html final la carte est bien présente.

Thank you, I understand and it doesn’t matter as long as the code created by your utility doesn’t modify this link. So there is no image of the card in your utility, but when I paste the code created in the final html the card is present.

Autre question: Que faudrait-il rajouter dans le code créé pour que le tracé ne soit pas visible avant le début de l’animation?

Another question: What should be added in the created code so that the trace is not visible before the beginning of the animation?

[Elusien]

I am still finding problems with the Intaglio SVG that I don’t have with the Inkscape one and what you are seeing is one of them. Normally, with the Inkscape SVGs you just untick the “view” box, tick the “animate” box and set a couple of seconds for the “start”. With the Intaglio SVG this doesn’t work correctly.

But don’t worry, I know why and will fix the problem as soon as I can. Basically Inkscape puts various properties in a “style” attribute on the path element, while Intaglio specifies them as separate attributes of the path element. I will check both ways and swo I can handle both.

[jonray]

Hi @elusien , so sorry to give you more grief but I tried it again and it didn’t work for me this time.
After exporting the svg from inkscape then running it through your utility then saving it as another svg, it wouldn’t open in Chrome. I might be doing something wrong…
Files for your perusal if you have the time:
MAP 03 test animation.zip (745.8 KB)

[Elusien]

Jon, I just opened the SVG in Notepad++ and see the following 3 lines at the beginning:

SVG Stroke Path Animation
MAP 03 for animation.svg
Restart the Animation Create New (Animated) SVG

These are the names of the elements above the textarea, so I suspect that you highlighted them as well as the source text of the SVG , which starts:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->

I just deleted the 3 lines et voila - it now works. Make sure you CLICK inside the textarea then hit CRTL A to select all, before CTRL C to copy.

I found a few inconsistencies in the utility, so I have put a new version up on the website.

[Namna]

@Elusien

I found a few inconsistencies in the utility, so I have put a new version up on the website.

Oui, ça marche !
Pour faire apparaitre la voiture, j’ai du supprimer un “s” en trop dans le code.
Et puis elle avance en marche arrière

Yes, it works!
To make the car appear, I had to delete an extra “s” in the code.
(begin=“2ss” → “2s”)
And then it goes forward in reverse

<textPath xlink:href="#Elusien0" alignment-baseline="middle"><tspan id="Elusien0_icon_tspan" font-size="NaNem">🚗</tspan><animate id="Elusien0_animate_text" attributeName="startOffset" from="0%" to="100%" begin="2ss" dur="10s" keyTimes="0;1" rotate="auto-reverse" fill="freeze"></animate></textPath>

[Namna]

It is the same with blue point

[Elusien]

Thank you for that. I have now fixed the problem. I have also fixed the problem with the images that are LINKED rather than EMBEDDED. If, as you do, you have a background image that is linked, my utility will show a pop-up modal that asks you to select that file on your system. Do as it asks and the background image will appear. If you save the new SVG it will remain as a link, not an embedded file.

[jonray]

@Elusien

I just deleted the 3 lines et voila - it now works. Make sure you CLICK inside the textarea then hit CRTL A to select all, before CTRL C to copy.

Ah, thanks @elusien DOH - I think I should have noticed that. Strange though, I did it twice and it failed to work twice. I thought I did Ctrl A, Ctrl C. I’ll look more into it tomorrow. Thanks!

[Namna]

Excellent, c’est génial.
Merci et bravo pour cet outil

Excellent, that’s great.
Thank you and bravo for this tool

[jonray]

Morning @elusien. Very sorry to be a pain but I’m still having problems. I ran the svg again through your utility. It worked fine in the preview pane within the utility but when the code was copied and pasted, I’m just getting the path with no background map.

Sorry if I’m still doing something wrong…

MAP 03 with path exported from inkscape.zip (493.9 KB)

[Elusien]

No it isn’t something you did wrong. It is a bug I introduced when creating the code for Namna’s Likned (as opposed to Embedded) image. Sorry about that, I really should have checked that, but it was 1am and I was a bit tired. Now I am refreshed after a 5 km walk down to and along the beach I can put on my coding hat and sort it out.