@maplibre/maplibre-react-native 10.1.1 → 10.1.2

package/lib/typescript/module/src/utils/animated/AnimatedRouteCoordinatesArray.d.ts

@@ -1,5 +1,21 @@
 import { type Coord, type Units } from "@turf/helpers";
 import { AbstractAnimatedCoordinates, type AnimatedCoordinates } from "./AbstractAnimatedCoordinates";
+interface AnimatedRouteToValue {
+    end: {
+        point: Coord | AnimatedCoordinates;
+    }
+    /**
+     * Animate to this length of the coordinates array
+     */
+     | {
+        along: number;
+        units?: Units;
+    };
+    /**
+     * @deprecated Use `end.units` in conjunction with `end.along` instead
+     */
+    units?: Units;
+}
 interface AnimatedRouteState {
     actRoute?: AnimatedCoordinates[];
     fullRoute: AnimatedCoordinates[];
@@ -7,47 +23,43 @@ interface AnimatedRouteState {
         from: number;
         current?: number;
         to: number;
-        point?: Coord;
-        along?: Coord;
-    };
+    } & ({
+        point?: Coord | AnimatedCoordinates;
+    } | {
+        along?: number;
+    });
 }
-export declare class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
+export declare class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState, AnimatedRouteToValue> {
     /**
      * Calculate initial state
      *
-     * @param {*} args - to value from animate
-     * @returns {object} - the state object
+     * @param {AnimatedCoordinates[]} coordinatesArray
+     * @returns {AnimatedRouteState}
      */
     onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState;
     /**
-     * Calculate value from state.
+     * Calculate value from state
      *
-     * @param {object} state - either state from initialState and/or from calculate
-     * @returns {object}
+     * @param {AnimatedRouteState} state Previous state
+     * @returns {AnimatedCoordinates[]}
      */
-    onGetValue(state: AnimatedRouteState): AnimatedRouteState | AnimatedCoordinates[];
+    onGetValue(state: AnimatedRouteState): AnimatedCoordinates[];
     /**
      * Calculates state based on startingState and progress, returns a new state
      *
-     * @param {object} state - state object from initialState and/or from calculate
-     * @param {number} progress - value between 0 and 1
-     * @returns {object} next state
+     * @param {AnimatedRouteState} state Previous state
+     * @param {number} progress Value between 0 and 1
+     * @returns {AnimatedRouteState}
      */
     onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState;
     /**
      * Subclasses can override to start a new animation
      *
+     * @param {AnimatedRouteState} state
      * @param {*} toValue - to value from animate
-     * @param {*} actCoords - the current coordinates array to start from
      * @returns {object} The state
      */
-    onStart(state: AnimatedRouteState, toValue: {
-        end: {
-            point?: Coord;
-            along?: number;
-        };
-        units?: Units;
-    }): AnimatedRouteState;
+    onStart(state: AnimatedRouteState, toValue: AnimatedRouteToValue): AnimatedRouteState;
     get originalRoute(): AnimatedCoordinates[];
 }
 export {};

package/lib/typescript/module/src/utils/animated/AnimatedRouteCoordinatesArray.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedRouteCoordinatesArray.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/animated/AnimatedRouteCoordinatesArray.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,KAAK,EACV,KAAK,KAAK,EACX,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAC;AAEvC,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,GAAG,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;CACH;AAED,qBAAa,6BAA8B,SAAQ,2BAA2B,CAAC,kBAAkB,CAAC;IAChG;;;;;OAKG;IACH,cAAc,CAAC,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,kBAAkB;IAS3E;;;;;OAKG;IACH,UAAU,CACR,KAAK,EAAE,kBAAkB,GACxB,kBAAkB,GAAG,mBAAmB,EAAE;IAI7C;;;;;;OAMG;IACH,WAAW,CAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,GAAG,kBAAkB;IAgC5E;;;;;;OAMG;IACH,OAAO,CACL,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE;QAAE,GAAG,EAAE;YAAE,KAAK,CAAC,EAAE,KAAK,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAA;KAAE,GACjE,kBAAkB;IA0CrB,IAAI,aAAa,IAAI,mBAAmB,EAAE,CAEzC;CACF"}
+{"version":3,"file":"AnimatedRouteCoordinatesArray.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/animated/AnimatedRouteCoordinatesArray.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,KAAK,EAGV,KAAK,KAAK,EACX,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,2BAA2B,EAC3B,KAAK,mBAAmB,EACzB,MAAM,+BAA+B,CAAC;AAEvC,UAAU,oBAAoB;IAC5B,GAAG,EAGD;QAAE,KAAK,EAAE,KAAK,GAAG,mBAAmB,CAAA;KAAE;IACtC;;OAEG;OACD;QACE,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IAEN;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,SAAS,EAAE,mBAAmB,EAAE,CAAC;IACjC,GAAG,EAAE;QACH,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,EAAE,EAAE,MAAM,CAAC;KACZ,GAAG,CAAC;QAAE,KAAK,CAAC,EAAE,KAAK,GAAG,mBAAmB,CAAA;KAAE,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpE;AAED,qBAAa,6BAA8B,SAAQ,2BAA2B,CAC5E,kBAAkB,EAClB,oBAAoB,CACrB;IACC;;;;;OAKG;IACH,cAAc,CAAC,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,kBAAkB;IAS3E;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,kBAAkB,GAAG,mBAAmB,EAAE;IAI5D;;;;;;OAMG;IACH,WAAW,CAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,GAAG,kBAAkB;IAgC5E;;;;;;OAMG;IACH,OAAO,CACL,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,oBAAoB,GAC5B,kBAAkB;IAoCrB,IAAI,aAAa,IAAI,mBAAmB,EAAE,CAEzC;CACF"}

package/lib/typescript/module/src/utils/animated/AnimatedShape.d.ts

@@ -1,24 +1,28 @@
 import { Animated } from "react-native";
-import { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
+import type { AnimatedCoordinatesArray } from "./AnimatedCoordinatesArray";
 import { AnimatedExtractCoordinateFromArray } from "./AnimatedExtractCoordinateFromArray";
 import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
 declare const AnimatedWithChildren: any;
 type Shape = {
     type: "Point";
-    coordinates: AnimatedExtractCoordinateFromArray | AnimatedRouteCoordinatesArray;
+    coordinates: AnimatedExtractCoordinateFromArray;
 } | {
     type: "LineString";
-    coordinates: AnimatedCoordinatesArray;
+    coordinates: AnimatedCoordinatesArray | AnimatedRouteCoordinatesArray;
 };
 /**
  * AnimatedShape can be used to have animated properties inside the shape property
+ *
+ * Equivalent of AnimatedStyle for shapes
+ * https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
+ *
  * @example
  * <AnimatedShapeSource ... shape={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
  */
 export declare class AnimatedShape extends AnimatedWithChildren {
     constructor(shape: Shape);
     _walkShapeAndGetValues(value: any): any;
-    __getValue(): any;
+    __getValue(): GeoJSON.Point | GeoJSON.LineString;
     _walkAndProcess(value: any, cb: (value: Animated.Node) => void): void;
     __attach(): void;
     __detach(): void;

package/lib/typescript/module/src/utils/animated/AnimatedShape.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedShape.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/animated/AnimatedShape.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAIhF,QAAA,MAAM,oBAAoB,KAA0C,CAAC;AASrE,KAAK,KAAK,GACN;IACE,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EACP,kCAAkC,GAClC,6BAA6B,CAAC;CACnC,GACD;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,wBAAwB,CAAC;CACvC,CAAC;AAEN;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,oBAAoB;gBAIzC,KAAK,EAAE,KAAK;IAKxB,sBAAsB,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG;IAkBvC,UAAU,IAAI,GAAG;IAMjB,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI;IAarE,QAAQ,IAAI,IAAI;IAIhB,QAAQ,IAAI,IAAI;CAIjB"}
+{"version":3,"file":"AnimatedShape.d.ts","sourceRoot":"","sources":["../../../../../../src/utils/animated/AnimatedShape.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,kCAAkC,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,QAAA,MAAM,oBAAoB,KAA0C,CAAC;AAUrE,KAAK,KAAK,GACN;IACE,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,kCAAkC,CAAC;CACjD,GACD;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,EAAE,wBAAwB,GAAG,6BAA6B,CAAC;CACvE,CAAC;AAEN;;;;;;;;GAQG;AACH,qBAAa,aAAc,SAAQ,oBAAoB;gBACzC,KAAK,EAAE,KAAK;IAKxB,sBAAsB,CAAC,KAAK,EAAE,GAAG,GAAG,GAAG;IAuBvC,UAAU,IAAI,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,UAAU;IAWhD,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,GAAG,IAAI;IAarE,QAAQ,IAAI,IAAI;IAIhB,QAAQ,IAAI,IAAI;CAIjB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "React Native library for creating maps with MapLibre Native for Android & iOS",
-  "version": "10.1.1",
+  "version": "10.1.2",
   "publishConfig": {
     "access": "public",
     "provenance": true

package/src/components/ShapeSource.tsx

@@ -32,7 +32,7 @@ const MLRNModule = NativeModules.MLRNModule;
 export const NATIVE_MODULE_NAME = "MLRNShapeSource";
 
 interface NativeProps {
-  shape?: string;
+  shape?: object | string;
 }
 
 type MLRNShapeSourceRefType = Component<NativeProps> & Readonly<NativeMethods>;
@@ -164,57 +164,62 @@ export const ShapeSource = memo(
       }: ShapeSourceProps,
       ref,
     ) => {
-      useImperativeHandle(
-        ref,
-        (): ShapeSourceRef => ({
-          /**
-           * Returns all features from the source that match the query parameters regardless of whether or not the feature is
-           * currently rendered on the map.
-           *
-           * @example
-           * shapeSource.features()
-           *
-           * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-           * @return {GeoJSON.FeatureCollection}
-           */
-          features,
-          /**
-           * Returns the zoom needed to expand the cluster.
-           *
-           * @example
-           * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
-           *
-           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-           * @return {number}
-           */
-          getClusterExpansionZoom,
-          /**
-           * Returns the FeatureCollection from the cluster.
-           *
-           * @example
-           * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
-           *
-           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-           * @param  {number} limit - The number of points to return.
-           * @param  {number} offset - The amount of points to skip (for pagination).
-           * @return {GeoJSON.FeatureCollection}
-           */
-          getClusterLeaves,
-          /**
-           * Returns the FeatureCollection from the cluster (on the next zoom level).
-           *
-           * @example
-           * const collection = await shapeSource.getClusterChildren(clusterId);
-           *
-           * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-           * @return {GeoJSON.FeatureCollection}
-           */
-          getClusterChildren,
-          setNativeProps,
-          onPress,
-          _nativeRef: _nativeRef.current,
-        }),
-      );
+      useImperativeHandle(ref, () => ({
+        ..._nativeRef.current,
+
+        /**
+         * Returns all features from the source that match the query parameters regardless of whether or not the feature is
+         * currently rendered on the map.
+         *
+         * @example
+         * shapeSource.features()
+         *
+         * @param  {Array=} filter - an optional filter statement to filter the returned Features.
+         * @return {GeoJSON.FeatureCollection}
+         */
+        features,
+
+        /**
+         * Returns the zoom needed to expand the cluster.
+         *
+         * @example
+         * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
+         *
+         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+         * @return {number}
+         */
+        getClusterExpansionZoom,
+
+        /**
+         * Returns the FeatureCollection from the cluster.
+         *
+         * @example
+         * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
+         *
+         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+         * @param  {number} limit - The number of points to return.
+         * @param  {number} offset - The amount of points to skip (for pagination).
+         * @return {GeoJSON.FeatureCollection}
+         */
+        getClusterLeaves,
+
+        /**
+         * Returns the FeatureCollection from the cluster (on the next zoom level).
+         *
+         * @example
+         * const collection = await shapeSource.getClusterChildren(clusterId);
+         *
+         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
+         * @return {GeoJSON.FeatureCollection}
+         */
+        getClusterChildren,
+
+        setNativeProps,
+
+        onPress,
+
+        _nativeRef: _nativeRef.current,
+      }));
 
       const _nativeRef = useRef<MLRNShapeSourceRefType>();
 
@@ -297,7 +302,7 @@ export const ShapeSource = memo(
         const shallowProps = Object.assign({}, nativeProps);
 
         // Adds support for Animated
-        if (shallowProps.shape && typeof shallowProps !== "string") {
+        if (shallowProps.shape && typeof shallowProps.shape !== "string") {
           shallowProps.shape = JSON.stringify(shallowProps.shape);
         }
 

package/src/utils/animated/AbstractAnimatedCoordinates.ts

@@ -1,8 +1,8 @@
 import { Animated } from "react-native";
 
-// see
-// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
 if (__DEV__) {
   if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
@@ -19,20 +19,21 @@ const defaultConfig = {
 
 export abstract class AbstractAnimatedCoordinates<
   State,
+  ToValue = AnimatedCoordinates[],
 > extends AnimatedWithChildren {
-  constructor(coords: AnimatedCoordinates[]) {
+  constructor(coordinates: AnimatedCoordinates[]) {
     super();
 
-    this.state = this.onInitialState(coords);
+    this.state = this.onInitialState(coordinates);
   }
 
   /**
    * Subclasses can override to calculate initial state
    *
-   * @param {AnimatedCoordinates} coordinatesArray - to value from animate
    * @returns {object} - the state object
+   * @param coordinates
    */
-  abstract onInitialState(coords: AnimatedCoordinates[]): State;
+  abstract onInitialState(coordinates: AnimatedCoordinates[]): State;
   /**
    * Calculates state based on startingState and progress, returns a new state
    *
@@ -45,15 +46,15 @@ export abstract class AbstractAnimatedCoordinates<
   animate(
     progressValue: Animated.Value,
     progressAnimation: Animated.CompositeAnimation,
-    config: (
+    config: Omit<
       | Animated.TimingAnimationConfig
       | Animated.SpringAnimationConfig
-      | Animated.DecayAnimationConfig
-    ) & { toValue: AnimatedCoordinates[] },
+      | Animated.DecayAnimationConfig,
+      "toValue"
+    > & { toValue: ToValue },
   ): Animated.CompositeAnimation {
     const onAnimationStart = (animation: Animated.CompositeAnimation): void => {
       if (this.animation) {
-        // there was a started but not finsihed animation
         const actProgress = this.progressValue.__getValue();
         this.animation.stop();
         this.state = this.onCalculate(this.state, actProgress);
@@ -78,8 +79,11 @@ export abstract class AbstractAnimatedCoordinates<
   }
 
   timing(
-    config: Animated.TimingAnimationConfig & {
-      toValue: AnimatedCoordinates[];
+    config: Omit<
+      Animated.TimingAnimationConfig,
+      "toValue" | "useNativeDriver"
+    > & {
+      toValue: ToValue;
     },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
@@ -90,12 +94,17 @@ export abstract class AbstractAnimatedCoordinates<
         ...config,
         toValue: 1.0,
       }),
-      config,
+      {
+        ...defaultConfig,
+        ...config,
+      },
     );
   }
 
   spring(
-    config: Animated.SpringAnimationConfig & { toValue: AnimatedCoordinates[] },
+    config: Omit<Animated.SpringAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
     return this.animate(
@@ -110,7 +119,9 @@ export abstract class AbstractAnimatedCoordinates<
   }
 
   decay(
-    config: Animated.DecayAnimationConfig & { toValue: AnimatedCoordinates[] },
+    config: Omit<Animated.DecayAnimationConfig, "toValue"> & {
+      toValue: ToValue;
+    },
   ): Animated.CompositeAnimation {
     const progressValue = new Animated.Value(0.0);
     return this.animate(

package/src/utils/animated/AnimatedExtractCoordinateFromArray.ts

@@ -1,8 +1,11 @@
 import { Animated } from "react-native";
 
-// see
-// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+import type { AnimatedCoordinates } from "./AbstractAnimatedCoordinates";
+import { AnimatedRouteCoordinatesArray } from "./AnimatedRouteCoordinatesArray";
+
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Animated/nodes/AnimatedWithChildren.js
 const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
 if (__DEV__) {
   if (AnimatedWithChildren.name !== "AnimatedWithChildren") {
     console.error(
@@ -12,24 +15,25 @@ if (__DEV__) {
 }
 
 export class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
-  _array: AnimatedExtractCoordinateFromArray;
+  _array: AnimatedRouteCoordinatesArray;
 
   _index = 0;
 
-  constructor(array: AnimatedExtractCoordinateFromArray, index: number) {
+  constructor(array: AnimatedRouteCoordinatesArray, index: number) {
     super();
     this._array = array;
     this._index = index;
   }
 
-  __getValue(): AnimatedExtractCoordinateFromArray {
+  __getValue(): AnimatedCoordinates {
     const actArray = this._array.__getValue();
     let index = this._index;
 
     if (index < 0) {
       index += actArray.length;
     }
-    return actArray[index];
+
+    return actArray[index]!;
   }
 
   __attach(): void {

package/src/utils/animated/AnimatedRouteCoordinatesArray.ts

@@ -1,9 +1,9 @@
 import distance from "@turf/distance";
 import {
-  lineString,
-  point,
   convertLength,
   type Coord,
+  lineString,
+  point,
   type Units,
 } from "@turf/helpers";
 import length from "@turf/length";
@@ -14,6 +14,25 @@ import {
   type AnimatedCoordinates,
 } from "./AbstractAnimatedCoordinates";
 
+interface AnimatedRouteToValue {
+  end: /**
+   * Animate to this point on the coordinates array
+   */
+  | { point: Coord | AnimatedCoordinates }
+    /**
+     * Animate to this length of the coordinates array
+     */
+    | {
+        along: number;
+        units?: Units;
+      };
+
+  /**
+   * @deprecated Use `end.units` in conjunction with `end.along` instead
+   */
+  units?: Units;
+}
+
 interface AnimatedRouteState {
   actRoute?: AnimatedCoordinates[];
   fullRoute: AnimatedCoordinates[];
@@ -21,66 +40,65 @@ interface AnimatedRouteState {
     from: number;
     current?: number;
     to: number;
-    point?: Coord;
-    along?: Coord;
-  };
+  } & ({ point?: Coord | AnimatedCoordinates } | { along?: number });
 }
 
-export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<AnimatedRouteState> {
+export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<
+  AnimatedRouteState,
+  AnimatedRouteToValue
+> {
   /**
    * Calculate initial state
    *
-   * @param {*} args - to value from animate
-   * @returns {object} - the state object
+   * @param {AnimatedCoordinates[]} coordinatesArray
+   * @returns {AnimatedRouteState}
    */
   onInitialState(coordinatesArray: AnimatedCoordinates[]): AnimatedRouteState {
     return {
       fullRoute: coordinatesArray.map(
-        (coord): AnimatedCoordinates => [coord[0], coord[1]],
+        (coordinates): AnimatedCoordinates => [coordinates[0], coordinates[1]],
       ),
       end: { from: 0, to: 0 },
     };
   }
 
   /**
-   * Calculate value from state.
+   * Calculate value from state
    *
-   * @param {object} state - either state from initialState and/or from calculate
-   * @returns {object}
+   * @param {AnimatedRouteState} state Previous state
+   * @returns {AnimatedCoordinates[]}
    */
-  onGetValue(
-    state: AnimatedRouteState,
-  ): AnimatedRouteState | AnimatedCoordinates[] {
+  onGetValue(state: AnimatedRouteState): AnimatedCoordinates[] {
     return state.actRoute || state.fullRoute;
   }
 
   /**
    * Calculates state based on startingState and progress, returns a new state
    *
-   * @param {object} state - state object from initialState and/or from calculate
-   * @param {number} progress - value between 0 and 1
-   * @returns {object} next state
+   * @param {AnimatedRouteState} state Previous state
+   * @param {number} progress Value between 0 and 1
+   * @returns {AnimatedRouteState}
    */
   onCalculate(state: AnimatedRouteState, progress: number): AnimatedRouteState {
     const { fullRoute, end } = state;
     const currentEnd = end.from * (1.0 - progress) + progress * end.to;
 
-    let prevsum = 0;
-    let actsum = 0;
+    let prevSum = 0;
+    let actSum = 0;
     let i = fullRoute.length - 1;
-    while (actsum < currentEnd && i > 0) {
-      prevsum = actsum;
+    while (actSum < currentEnd && i > 0) {
+      prevSum = actSum;
       const start = fullRoute[i];
       const end = fullRoute[i - 1];
-      actsum +=
+      actSum +=
         start && end ? distance(point(start), point(end), this.distconf) : 0;
       i -= 1;
     }
-    if (actsum <= currentEnd) {
+    if (actSum <= currentEnd) {
       const actRoute = [...fullRoute.slice(0, i + 1)];
       return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
     }
-    const r = (currentEnd - prevsum) / (actsum - prevsum);
+    const r = (currentEnd - prevSum) / (actSum - prevSum);
     const or = 1.0 - r;
 
     const actRoute = [
@@ -96,53 +114,47 @@ export class AnimatedRouteCoordinatesArray extends AbstractAnimatedCoordinates<A
   /**
    * Subclasses can override to start a new animation
    *
+   * @param {AnimatedRouteState} state
    * @param {*} toValue - to value from animate
-   * @param {*} actCoords - the current coordinates array to start from
    * @returns {object} The state
    */
   onStart(
     state: AnimatedRouteState,
-    toValue: { end: { point?: Coord; along?: number }; units?: Units },
+    toValue: AnimatedRouteToValue,
   ): AnimatedRouteState {
     const { fullRoute, end } = state;
-    let toDist = 0;
-    if (!toValue.end) {
-      console.error(
-        "RouteCoordinatesArray: toValue should have end with either along or point",
-      );
-    }
-    if (toValue.end.along) {
+    const fullRouteLineString = lineString(fullRoute);
+
+    let to: number | undefined = undefined;
+
+    if ("along" in toValue.end) {
       const { units } = toValue;
-      const ls = lineString(fullRoute);
-      toDist = convertLength(toValue.end.along, units);
-      toDist = length(ls) - toDist;
-    }
-    if (toDist != null) {
-      if (toValue.end.point) {
+
+      if (units !== undefined) {
         console.warn(
-          "RouteCoordinatesArray: toValue.end: has both along and point, point is ignored",
+          "RouteCoordinatesArray: `toValue.units` is deprecated, use `toValue.end.units` instead.",
         );
       }
-    } else if (toValue.end.point) {
-      const ls = lineString(fullRoute);
 
-      const nearest = nearestPointOnLine(ls, toValue.end.point);
-      toDist = length(ls) - nearest.properties.location!;
+      to =
+        length(fullRouteLineString) -
+        convertLength(toValue.end.along, toValue.end.units ?? units);
     } else {
-      console.warn(
-        "RouteCoordinatesArray: toValue.end: should have either along or point",
+      const nearest = nearestPointOnLine(
+        fullRouteLineString,
+        toValue.end.point,
       );
+      to = length(fullRouteLineString) - nearest.properties.location!;
     }
 
-    const result = {
+    return {
       fullRoute,
       end: {
         ...end,
-        from: end.current != null ? end.current : end.from,
-        to: toDist,
+        from: end.current ?? end.from,
+        to,
       },
     };
-    return result;
   }
 
   get originalRoute(): AnimatedCoordinates[] {