Add animate to maps
Add new features to maps:
- animation
- debugging
Animation
Now you can animate your maps. Add animate
to your <Map/>
and get animation. By default animation will animate from a random place on the map to your center, but you can specify the starting point with start
. You can also specify the duration of the animation in millseconds.
---
title: "The Pirahã people and their language"
published: true
date: 2023-09-28
maps:
function_based_internet_solution:
center: '6.514166°S, 61.729860°W'
---
<script>
import Map from '$svekyll/Map.svelte';
let animate = {
start: [28.9744, 41.0128],
duration: 5000
};
</script>
<Map {animate} center={maps.function_based_internet_solution.center} zoom={8}/>
You can also define map defaults inside your _config.yml
like this:
---
title: "The Pirahã people and their language"
published: true
date: 2023-09-28
maps:
function_based_internet_solution:
center: '6.514166°S, 61.729860°W'
maps:
animate:
duration: 2000
---
...
This will mean that all maps that don't define a animate
prop will use these defaults.
Debugging
Add ?SVEKYLL_DEBUG=1
to your URL to get more debugging information inside the JS console. Helpful for developers.
Edited by Chris Dawson