@maplibre/maplibre-react-native 8.6.0-beta.0

package/javascript/utils/animated/Animated.js

@@ -0,0 +1,39 @@
+import ShapeSource from '../../components/ShapeSource';
+import ImageSource from '../../components/ImageSource';
+import FillLayer from '../../components/FillLayer';
+import FillExtrusionLayer from '../../components/FillExtrusionLayer';
+import LineLayer from '../../components/LineLayer';
+import CircleLayer from '../../components/CircleLayer';
+import SymbolLayer from '../../components/SymbolLayer';
+import RasterLayer from '../../components/RasterLayer';
+import BackgroundLayer from '../../components/BackgroundLayer';
+
+import AnimatedShape from './AnimatedShape';
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+import AnimatedExtractCoordinateFromArray from './AnimatedExtractCoordinateFromArray';
+import AnimatedRouteCoordinatesArray from './AnimatedRouteCoordinatesArray';
+
+import {Animated as RNAnimated} from 'react-native';
+
+const Animated = {
+  // sources
+  ShapeSource: RNAnimated.createAnimatedComponent(ShapeSource),
+  ImageSource: RNAnimated.createAnimatedComponent(ImageSource),
+
+  // layers
+  FillLayer: RNAnimated.createAnimatedComponent(FillLayer),
+  FillExtrusionLayer: RNAnimated.createAnimatedComponent(FillExtrusionLayer),
+  LineLayer: RNAnimated.createAnimatedComponent(LineLayer),
+  CircleLayer: RNAnimated.createAnimatedComponent(CircleLayer),
+  SymbolLayer: RNAnimated.createAnimatedComponent(SymbolLayer),
+  RasterLayer: RNAnimated.createAnimatedComponent(RasterLayer),
+  BackgroundLayer: RNAnimated.createAnimatedComponent(BackgroundLayer),
+
+  // values
+  CoordinatesArray: AnimatedCoordinatesArray,
+  RouteCoordinatesArray: AnimatedRouteCoordinatesArray,
+  Shape: AnimatedShape,
+  ExtractCoordinateFromArray: AnimatedExtractCoordinateFromArray,
+};
+
+export default Animated;

package/javascript/utils/animated/AnimatedCoordinatesArray.js

@@ -0,0 +1,191 @@
+import {Animated} from 'react-native';
+
+// see
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+    console.error(
+      'AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
+
+const defaultConfig = {
+  useNativeDriver: false,
+};
+
+class AnimatedCoordinatesArray extends AnimatedWithChildren {
+  constructor(...args) {
+    super();
+
+    this.state = this.onInitialState(...args);
+  }
+
+  /**
+   * Subclasses can override to calculate initial state
+   *
+   * @param {*} args - to value from animate
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray) {
+    return {coords: coordinatesArray.map(coord => [coord[0], coord[1]])};
+  }
+
+  /**
+   * Subclasses can override getValue to calculate value from state.
+   * Value is typically coordinates array, but can be anything
+   *
+   * @param {object} state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  onGetValue(state) {
+    return state.coords;
+  }
+
+  /**
+   * 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
+   */
+  onCalculate(state, progress) {
+    const {coords, targetCoords} = state;
+    const newF = progress;
+    const origF = 1.0 - newF;
+
+    // common
+    const commonLen = Math.min(coords.length, targetCoords.length);
+    const common = coords
+      .slice(0, commonLen)
+      .map((origCoord, i) => [
+        origCoord[0] * origF + targetCoords[i][0] * newF,
+        origCoord[1] * origF + targetCoords[i][1] * newF,
+      ]);
+
+    if (targetCoords.length > coords.length) {
+      // only in new (adding)
+      const addingOrig =
+        coords.length > 0 ? coords[coords.length - 1] : targetCoords[0];
+      const adding = targetCoords
+        .slice(commonLen, targetCoords.length)
+        .map(newCoord => [
+          addingOrig[0] * origF + newCoord[0] * newF,
+          addingOrig[1] * origF + newCoord[1] * newF,
+        ]);
+      return {coords: [...common, ...adding], targetCoords};
+    }
+
+    if (coords.length > targetCoords.length) {
+      // only in orig (dissapearing)
+      const dissapearingNew =
+        targetCoords.length > 0
+          ? targetCoords[targetCoords.length - 1]
+          : coords[0];
+      const dissapearing = coords
+        .slice(commonLen, coords.length)
+        .map(origCoord => [
+          origCoord[0] * origF + dissapearingNew[0] * newF,
+          origCoord[1] * origF + dissapearingNew[1] * newF,
+        ]);
+      return {coords: [...common, ...dissapearing], targetCoords};
+    }
+
+    return {coords: common, targetCoords};
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param {*} toValue - to value from animate
+   * @param {*} actCoords - the current coordinates array to start from
+   * @returns {object} The state
+   */
+  onStart(state, toValue) {
+    const targetCoords = toValue.map(coord => [coord[0], coord[1]]);
+    return {
+      ...state,
+      targetCoords,
+    };
+  }
+
+  animate(progressValue, progressAnimation, config) {
+    const {toValue} = config;
+
+    const onAnimationStart = animation => {
+      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);
+        this.progressValue.__removeChild(this);
+        this.progressValue = null;
+        this.animation = null;
+      }
+
+      this.progressValue = progressValue;
+      this.progressValue.__addChild(this);
+      this.animation = animation;
+      this.state = this.onStart(this.state, toValue);
+    };
+
+    const origAnimationStart = progressAnimation.start;
+    const newAnimation = progressAnimation;
+    newAnimation.start = function start(...args) {
+      onAnimationStart(progressAnimation);
+      origAnimationStart(...args);
+    };
+    return newAnimation;
+  }
+
+  timing(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.timing(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  spring(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.spring(progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  decay(config) {
+    const progressValue = new Animated.Value(0.0);
+    return this.animate(
+      progressValue,
+      Animated.decay(this.progressValue, {
+        ...defaultConfig,
+        ...config,
+        toValue: 1.0,
+      }),
+      config,
+    );
+  }
+
+  __getValue() {
+    if (!this.progressValue) {
+      return this.onGetValue(this.state);
+    }
+    return this.onGetValue(
+      this.onCalculate(this.state, this.progressValue.__getValue()),
+    );
+  }
+}
+
+export default AnimatedCoordinatesArray;

package/javascript/utils/animated/AnimatedExtractCoordinateFromArray.js

@@ -0,0 +1,43 @@
+import {Animated} from 'react-native';
+
+// see
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+    console.error(
+      'AnimatedCoordinatesArray could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
+
+export default class AnimatedExtractCoordinateFromArray extends AnimatedWithChildren {
+  _array = null;
+
+  _index = 0;
+
+  constructor(array, index) {
+    super();
+    this._array = array;
+    this._index = index;
+  }
+
+  __getValue() {
+    const actArray = this._array.__getValue();
+    let index = this._index;
+
+    if (index < 0) {
+      index += actArray.length;
+    }
+    return actArray[index];
+  }
+
+  __attach() {
+    this._array.__addChild(this);
+  }
+
+  __detach() {
+    this._array.__removeChild(this);
+    super.__detach();
+  }
+}

package/javascript/utils/animated/AnimatedPoint.js

@@ -0,0 +1,126 @@
+import {Animated} from 'react-native';
+
+// Used react-native-maps as a reference
+// https://github.com/react-community/react-native-maps/blob/master/lib/components/AnimatedRegion.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+
+const DEFAULT_COORD = [0, 0];
+const DEFAULT_POINT = {type: 'Point', coordinates: DEFAULT_COORD};
+
+let uniqueID = 0;
+
+export class AnimatedPoint extends AnimatedWithChildren {
+  constructor(point = DEFAULT_POINT) {
+    super();
+
+    this.longitude = point.coordinates[0] || 0;
+    this.latitude = point.coordinates[1] || 0;
+
+    if (!(this.longitude instanceof Animated.Value)) {
+      this.longitude = new Animated.Value(this.longitude);
+    }
+
+    if (!(this.latitude instanceof Animated.Value)) {
+      this.latitude = new Animated.Value(this.latitude);
+    }
+
+    this._listeners = {};
+  }
+
+  setValue(point = DEFAULT_POINT) {
+    this.longitude.setValue(point.coordinates[0]);
+    this.latitude.setValue(point.coordinates[1]);
+  }
+
+  setOffset(point = DEFAULT_POINT) {
+    this.longitude.setOffset(point.coordinates[0]);
+    this.latitude.setOffset(point.coordinates[1]);
+  }
+
+  flattenOffset() {
+    this.longitude.flattenOffset();
+    this.latitude.flattenOffset();
+  }
+
+  stopAnimation(cb) {
+    this.longitude.stopAnimation();
+    this.latitude.stopAnimation();
+
+    if (typeof cb === 'function') {
+      cb(this.__getValue());
+    }
+  }
+
+  addListener(cb) {
+    uniqueID += 1;
+    const id = `${String(uniqueID)}-${String(Date.now())}`;
+
+    const completeCB = () => {
+      if (typeof cb === 'function') {
+        cb(this.__getValue());
+      }
+    };
+
+    this._listeners[id] = {
+      longitude: this.longitude.addListener(completeCB),
+      latitude: this.latitude.addListener(completeCB),
+    };
+
+    return id;
+  }
+
+  removeListener(id) {
+    this.longitude.removeListener(this._listeners[id].longitude);
+    this.latitude.removeListener(this._listeners[id].latitude);
+    delete this._listeners[id];
+  }
+
+  spring(config = {coordinates: DEFAULT_COORD}) {
+    return Animated.parallel([
+      Animated.spring(this.longitude, {
+        ...config,
+        toValue: config.coordinates[0],
+        useNativeDriver: false,
+      }),
+      Animated.spring(this.latitude, {
+        ...config,
+        toValue: config.coordinates[1],
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  timing(config = {coordinates: DEFAULT_COORD}) {
+    return Animated.parallel([
+      Animated.timing(this.longitude, {
+        ...config,
+        toValue: config.coordinates[0],
+        useNativeDriver: false,
+      }),
+      Animated.timing(this.latitude, {
+        ...config,
+        toValue: config.coordinates[1],
+        useNativeDriver: false,
+      }),
+    ]);
+  }
+
+  __getValue() {
+    return {
+      type: 'Point',
+      coordinates: [this.longitude.__getValue(), this.latitude.__getValue()],
+    };
+  }
+
+  __attach() {
+    this.longitude.__addChild(this);
+    this.latitude.__addChild(this);
+  }
+
+  __detach() {
+    this.longitude.__removeChild(this);
+    this.latitude.__removeChild(this);
+  }
+}
+
+export default AnimatedPoint;

package/javascript/utils/animated/AnimatedRouteCoordinatesArray.js

@@ -0,0 +1,124 @@
+import AnimatedCoordinatesArray from './AnimatedCoordinatesArray';
+
+import {lineString, point, convertLength} from '@turf/helpers';
+import distance from '@turf/distance';
+import nearestPointOnLine from '@turf/nearest-point-on-line';
+import length from '@turf/length';
+
+export default class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
+  /**
+   * Calculate initial state
+   *
+   * @param {*} args - to value from animate
+   * @returns {object} - the state object
+   */
+  onInitialState(coordinatesArray) {
+    return {
+      fullRoute: coordinatesArray.map(coord => [coord[0], coord[1]]),
+      end: {from: 0},
+    };
+  }
+
+  /**
+   * Calculate value from state.
+   *
+   * @param {object} state - either state from initialState and/or from calculate
+   * @returns {object}
+   */
+  onGetValue(state) {
+    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
+   */
+  onCalculate(state, progress) {
+    const {fullRoute, end} = state;
+    const currentEnd = end.from * (1.0 - progress) + progress * end.to;
+
+    let prevsum = 0;
+    let actsum = 0;
+    let i = fullRoute.length - 1;
+    while (actsum < currentEnd && i > 0) {
+      prevsum = actsum;
+      actsum += distance(
+        point(fullRoute[i]),
+        point(fullRoute[i - 1]),
+        this.distconf,
+      );
+      i -= 1;
+    }
+    if (actsum <= currentEnd) {
+      const actRoute = [...fullRoute.slice(0, i + 1)];
+      return {fullRoute, end: {...end, current: currentEnd}, actRoute};
+    }
+    const r = (currentEnd - prevsum) / (actsum - prevsum);
+    const or = 1.0 - r;
+
+    const actRoute = [
+      ...fullRoute.slice(0, i + 1),
+      [
+        fullRoute[i][0] * r + fullRoute[i + 1][0] * or,
+        fullRoute[i][1] * r + fullRoute[i + 1][1] * or,
+      ],
+    ];
+    return {fullRoute, end: {...end, current: currentEnd}, actRoute};
+  }
+
+  /**
+   * Subclasses can override to start a new animation
+   *
+   * @param {*} toValue - to value from animate
+   * @param {*} actCoords - the current coordinates array to start from
+   * @returns {object} The state
+   */
+  onStart(state, toValue) {
+    const {fullRoute, end} = state;
+    let toDist;
+    if (!toValue.end) {
+      console.error(
+        'RouteCoordinatesArray: toValue should have end with either along or point',
+      );
+    }
+    if (toValue.end.along != null) {
+      const {units} = toValue;
+      const ls = lineString(fullRoute);
+      toDist = convertLength(toValue.end.along, units);
+      toDist = length(ls) - toDist;
+    }
+    if (toDist != null) {
+      if (toValue.end.point) {
+        console.warn(
+          'RouteCoordinatesArray: toValue.end: has both along and point, point is ignored',
+        );
+      }
+    } else if (toValue.end.point) {
+      const ls = lineString(fullRoute);
+
+      const nearest = nearestPointOnLine(ls, toValue.end.point);
+      toDist = length(ls) - nearest.properties.location;
+    } else {
+      console.warn(
+        'RouteCoordinatesArray: toValue.end: should have either along or point',
+      );
+    }
+
+    const result = {
+      fullRoute,
+      end: {
+        ...end,
+        from: end.current != null ? end.current : end.from,
+        to: toDist,
+      },
+    };
+    return result;
+  }
+
+  get originalRoute() {
+    return this.state.fullRoute;
+  }
+}

package/javascript/utils/animated/AnimatedShape.js

@@ -0,0 +1,72 @@
+import {Animated} from 'react-native';
+
+// see
+// https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedWithChildren.js
+const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
+if (__DEV__) {
+  if (AnimatedWithChildren.name !== 'AnimatedWithChildren') {
+    console.error(
+      'AnimatedShape could not obtain AnimatedWithChildren base class',
+    );
+  }
+}
+
+/**
+ * AnimatedShape can be used to have animated properties inside the shape property
+ * @example
+ * <AnimatedShapeSource ... shape={new AnimatedShape({type:'LineString', coordinates: animatedCoords})} />
+ */
+class AnimatedShape extends AnimatedWithChildren {
+  // equivalent of AnimatedStyle for shapes
+  // https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/nodes/AnimatedStyle.js
+
+  constructor(shape) {
+    super();
+    this.shape = shape;
+  }
+
+  _walkShapeAndGetValues(value) {
+    if (Array.isArray(value)) {
+      return value.map(i => this._walkShapeAndGetValues(i));
+    }
+    if (value instanceof Animated.Node) {
+      return value.__getValue();
+    }
+    if (typeof value === 'object') {
+      const result = {};
+      for (const key in value) {
+        result[key] = this._walkShapeAndGetValues(value[key]);
+      }
+      return result;
+    }
+    return value;
+  }
+
+  __getValue() {
+    const result = this._walkShapeAndGetValues(this.shape);
+    return result;
+  }
+
+  _walkAndProcess(value, cb) {
+    if (Array.isArray(value)) {
+      value.forEach(i => this._walkAndProcess(i, cb));
+    } else if (value instanceof Animated.Node) {
+      cb(value);
+    } else if (typeof value === 'object') {
+      for (const key in value) {
+        this._walkAndProcess(value[key], cb);
+      }
+    }
+  }
+
+  __attach() {
+    this._walkAndProcess(this.shape, v => v.__addChild(this));
+  }
+
+  __detach() {
+    this._walkAndProcess(this.shape, v => v.__removeChild(this));
+    super.__detach();
+  }
+}
+
+export default AnimatedShape;

package/javascript/utils/deprecation.js

@@ -0,0 +1,25 @@
+/**
+ * Copy properties from origObject to newObject, which not exists in newObject,
+ * calls onDeprecatedCalled callback in case a copied property is invoked.
+ */
+
+export function copyPropertiesAsDeprecated(
+  origObject,
+  newObject,
+  onDeprecatedCalled,
+  accessors = {},
+) {
+  const result = newObject;
+  for (const [key, value] of Object.entries(origObject)) {
+    if (!newObject[key]) {
+      // eslint-disable-next-line fp/no-mutating-methods
+      Object.defineProperty(result, key, {
+        get() {
+          onDeprecatedCalled(key);
+          return accessors[key] ? accessors[key](value) : value;
+        },
+      });
+    }
+  }
+  return result;
+}

package/javascript/utils/filterUtils.js

@@ -0,0 +1,7 @@
+export function getFilter(filter) {
+  if (!Array.isArray(filter) || filter.length === 0) {
+    return [];
+  }
+
+  return filter;
+}

package/javascript/utils/geoUtils.js

@@ -0,0 +1,73 @@
+import {featureCollection, point, feature, lineString} from '@turf/helpers';
+import distance from '@turf/distance';
+import along from '@turf/along';
+import geoViewport from '@mapbox/geo-viewport';
+
+const VECTOR_TILE_SIZE = 512;
+
+export function makePoint(coordinates, properties, options) {
+  return point(coordinates, properties, options);
+}
+
+export function makeLineString(coordinates, properties, options) {
+  return lineString(coordinates, properties, options);
+}
+
+export function makeLatLngBounds(northEastCoordinates, southWestCoordinates) {
+  return featureCollection([
+    point(northEastCoordinates),
+    point(southWestCoordinates),
+  ]);
+}
+
+export function makeFeature(geometry, properties) {
+  return feature(geometry, properties);
+}
+
+export function makeFeatureCollection(features = [], options) {
+  return featureCollection(features, options);
+}
+
+export function addToFeatureCollection(newFeatureCollection, newFeature) {
+  return {
+    ...newFeatureCollection,
+    features: [...newFeatureCollection.features, newFeature],
+  };
+}
+
+export function calculateDistance(origin, dest, options) {
+  return distance(origin, dest, options);
+}
+
+export function pointAlongLine(newLineString, distAlong, options) {
+  return along(newLineString, distAlong, options);
+}
+
+export function getOrCalculateVisibleRegion(
+  coord,
+  zoomLevel,
+  width,
+  height,
+  nativeRegion,
+) {
+  const region = {
+    ne: [0, 0],
+    sw: [0, 0],
+  };
+
+  if (!nativeRegion || !Array.isArray(nativeRegion.visibleBounds)) {
+    const bounds = geoViewport.bounds(
+      coord,
+      zoomLevel,
+      [width, height],
+      VECTOR_TILE_SIZE,
+    );
+    region.ne = [bounds[3], bounds[2]];
+    region.sw = [bounds[1], bounds[0]];
+  } else {
+    region.ne = nativeRegion.properties.visibleBounds[0];
+    region.sw = nativeRegion.properties.visibleBounds[1];
+  }
+
+  return region;
+}