Liven up your webmaps with custom microanimations - TIB AV-Portal

Liven up your webmaps with custom microanimations

00:00

0

Related Material

Open Source Geospatial Foundation (OSGeo)

Haakseth, John Wika

Formal Metadata

Title

Liven up your webmaps with custom microanimations

Title of Series

FOSS4G Firenze 2022

Number of Parts

351

Author

Haakseth, John Wika

License

CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.

Identifiers

10.5446/69098 (DOI)

Publisher

Open Source Geospatial Foundation (OSGeo)

Release Date

Language

Production Year

2022

Content Metadata

Subject Area

Computer Science

Genre

Conference/Talk

Abstract

Micro animations are small animations on a website that support the user by attracting focus to where we want their attention. They can also be used to support relationships between elements in a web application, for example a list element and a map feature, or simply to spark a little joy. Users today have come to expect these animations in their online experiences. How can we provide these features in a web map? Map libraries gives you some animations out of the box today, but what if you want something custom? This presentation will give examples on how small animations can be used in web maps to support interactivity. We will walk through building our own, custom animation that can be used as a starting point for many types of animations in web maps. The technique is library-agnostic, so we’ll show examples in both MapLibre GL JS, Leaflet and OpenLayers.

Keywords

UsecasesAndapplications

Speech

Text

Image

00:00

Daylight saving timeNetwork switching subsystemCollatz conjectureLine (geometry)Point (geometry)Level (video gaming)Line (geometry)MultiplicationPoint (geometry)VolumenvisualisierungMultiplication signCopenhagen interpretationBitFrame problemOrder (biology)Default (computer science)Different (Kate Ryan album)CASE <Informatik>Cartesian coordinate systemMobile appFunctional (mathematics)RoutingCodeWeb 2.0LengthMappingComputer animation

02:40

BlogResonatorBitCodeComputer animation

02:55

Computer animation

Transcript: English(auto-generated)

00:01

Okay, thank you. Yes, my name is John. I work for Septima in Copenhagen and I'm gonna talk through an approach to create your own web map animations. I have an example application which is sort of like a navigation app

00:20

where you, yeah, the default case is yeah, you just add your route to the map and it looks like this. Yeah, so let's try to animate it. This code doesn't work but it shows the main idea which is that we have an animation function

00:40

and we create an empty line feature that we add a point from a route feature and then we add it to the map and we use request animation frame which again calls the same function again

01:01

until we have added all the maps, all the points and then we just quit. So let's just try to do it with this first route that we had and it's working pretty nicely.

01:21

We just have one little problem and that is what if we have a little bit of a longer route, we're gonna be waiting a little bit. Yeah, so we need to manipulate the feature a little bit so for that in this case I used turf

01:44

to basically measure the length of the line and then I used the along function to add points and then I can add multiple points per render frame

02:01

in order to control the duration. So I can add more points if I wanted to go faster and fewer points at a time if I wanted to go slower and this way it's working a little bit more smoothly. We can control it a little bit better. And then as a final little step,

02:21

I added a little bit of easing to the function so I start by adding fewer points and then add more and more which is, yeah, I don't know, you can, it's a subtle difference but you can see that it's starting a little slow and then moving faster at the end which is a bit more pleasing to the eye. So that's basically it.

02:42

If you wanna look a little bit more deep into this, I have written a blog post there and there are some code sandbox examples that you can check out if you want to. Thank you.