Fix indexing example for feature animation

[Siedlerchr]

No description provided.

[sanak]

@Siedlerchr (CC: @smellman)
Thanks for the quick 2.0.0 release ! 🎉

By the way, are you still working on this example ?

Because during checking examples of PR #84, I encountered the difference of feature animation example beween official and this repo.
Capture video image: https://user-images.githubusercontent.com/629923/163711293-a700268d-a4cf-41a2-aa7e-0b068581b698.mov

• Chrome left tab (former part of the video) is official ol-ext feature animation example.
• Chrome right tab (latter part of the video) is the PR OpenLayers 6.14.1 and ol-ext 3.2.22 #84 branch, and the animation seems not to work correctly.

But above issue may be my local environment specific one, so if it's no problem on your environments, just ignore this comment. 🙇‍♂️

Thanks,

[Siedlerchr]

The example compiles but at runtime I stilll get that exception you posted earlier. Not exactly sure how to solve this, might be some webpack whatever thingy

[sanak]

Okay, thanks for confirmation.
I think that the following changes will be necessary in map.featureanimation.ts at least.

--- a/examples/animation/map.featureanimation.ts
+++ b/examples/animation/map.featureanimation.ts
@@ -10,6 +10,15 @@ import { Coordinate } from 'ol/coordinate';
 import 'ol-ext/render/AnimExtent';
 import featureAnimation from 'ol-ext/featureanimation/FeatureAnimation';
 import { getKey } from 'ol/tilecoord';
+
+declare global {
+  interface Window {
+    $(selector: any, context?: any): any,
+    add10(): void
+  }
+}
+const $ = window.$;
+
 // Layers
 let layer = new TileLayer({
   source: new Stamen({ layer: 'terrain' }),
@@ -113,12 +122,12 @@ function addFeatureAt(p: Coordinate) {
 
   vector.getSource()?.addFeature(f);
   vector.animateFeature(f, [
-    new featureAnimation[$('#anim').text()] ({
+    new featureAnimation[$('#anim').val()] ({
       speed: Number($('#speed').val()),
       duration: Number(1000 -Number($('#speed').val()) * 300),
       side: $('#side').prop('checked'),
     }),
-    new featureAnimation[$('#anim2').text()]({
+    new featureAnimation[$('#anim2').val()]({
       speed: Number($('#speed').val()),
       duration: Number(1000 - Number($('#speed').val()) * 300),
       horizontal: /Slide/.test($('#anim').text()),
@@ -139,6 +148,9 @@ function add10() {
     }, 100 * i);
   }
 }
+window.add10 = (): void => {
+  add10();
+}
 add10();
 
 // Drop a feature on click
@@ -154,7 +166,7 @@ map.on('singleclick', function (evt) {
     vector.getSource()?.removeFeature(f);
     // Show animation
     vector.animateFeature(f, [
-      new featureAnimation[$('#anim').text()]({
+      new featureAnimation[$('#anim').val()]({
         speed: Number($('#speed').val()),
         duration: Number(1000 - Number($('#speed').val()) * 300),
         side: $('#side').prop('checked'),

Anyway, the example is not the first priority than types, so later fix will be enough.