ExtraStatic: powerful and easy publishing

Skip to content

Add animate to maps

Chris Dawson requested to merge maps_upgrade into main

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

Merge request reports

Loading