gyeonghwon

Library for displaying animated image files in canvas context

Usage no npm install needed!

<script type="module">
  import gyeonghwon from 'https://cdn.skypack.dev/gyeonghwon';
</script>

README

Gyeonghwon (甄萱:Animated image marker enabler for canvas-based map APIs)

With the old HTML DOM div-based map API, it was very easy to create animated markers. You simply had to create a marker using an image such as Animated GIF or APNG.
However, with the new map API using HTML canvas or WebGL, it is no longer possible to create animated markers by simply using animated images as markers.
Here is a sample of a marker in OpenLayer, which does not move .
https://code4history.dev/Gyeonghwon/index2.html

Therefore, I developed Gyeonghwon as a platform to easily create animated markers on the new map API using Animated images.
Here is a sample of a marker that actually works.
https://code4history.dev/Gyeonghwon/index.html

Now it supports Animated GIF, APNG and Animated webp.
The current implementation already works properly, but the API interface is a reference implementation and is subject to change based on feedback and other factors.
In particular, this library is not made for a specific Map API, but since the operation tests are done only with OpenLayers, changes may occur to make the interface compatible with other Map APIs.

The library requires support from the following technologies in order to run:

These technologies are supported in all modern browsers and IE starting with version 10.