fix: fix query elevation example and smaller fixes to animated shape …

…components
rnmapbox · Jan 20, 2024 · 9eaf73d · 9eaf73d
1 parent 3b0b0a9
commit 9eaf73d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 47 deletions.
diff --git a/docs/examples.json b/docs/examples.json
@@ -468,9 +468,12 @@
         "metadata": {
           "title": "Query Terrain Elevation",
           "tags": [
-            "MapView#queryTerrainElevation"
+            "MapView#queryTerrainElevation",
+            "AnimatedShape",
+            "AnimatedRouteCoordinatesArray",
+            "AnimatedExtractCoordinateFromArray"
           ],
-          "docs": "\nQuery Terrain Elevation\n"
+          "docs": "\nThis is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView\n"
         },
         "fullPath": "example/src/examples/V10/QueryTerrainElevation.js",
         "relPath": "V10/QueryTerrainElevation.js",

diff --git a/example/src/examples/Animations/AnimatedLine.js b/example/src/examples/Animations/AnimatedLine.js
@@ -1,6 +1,14 @@
 import React from 'react';
 import { Easing, Button } from 'react-native';
-import { Animated, MapView, Camera } from '@rnmapbox/maps';
+import {
+  Animated,
+  MapView,
+  Camera,
+  AnimatedRouteCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedCoordinatesArray,
+  AnimatedShape,
+} from '@rnmapbox/maps';
 import along from '@turf/along';
 import length from '@turf/length';
 import { point, lineString } from '@turf/helpers';
@@ -47,7 +55,7 @@ class AnimatedLine extends React.Component {
   constructor(props) {
     super(props);
 
-    const route = new Animated.RouteCoordinatesArray([
+    const route = new AnimatedRouteCoordinatesArray([
       [blon, blat],
       [blon, blat + 2 * bdelta],
       [blon + bdelta, blat + 2 * bdelta + bdelta],
@@ -58,7 +66,7 @@ class AnimatedLine extends React.Component {
       backgroundColor: 'blue',
       coordinates: [[-73.99155, 40.73581]],
 
-      shape: new Animated.CoordinatesArray(
+      shape: new AnimatedCoordinatesArray(
         [...Array(steps).keys()].map((v, i) => [
           lon + delta * (i / steps) * (i / steps),
           lat + (delta * i) / steps,
@@ -69,7 +77,7 @@ class AnimatedLine extends React.Component {
         features: [],
       },
       route,
-      actPoint: new Animated.ExtractCoordinateFromArray(route, -1),
+      actPoint: new AnimatedExtractCoordinateFromArray(route, -1),
     };
   }
 
@@ -219,7 +227,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id={'route'}
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: this.state.route,
               })
@@ -231,7 +239,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id="currentLocationSource"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'Point',
                 coordinates: this.state.actPoint,
               })
@@ -246,7 +254,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id={'shape'}
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: this.state.shape,
               })

diff --git a/example/src/examples/V10/QueryTerrainElevation.js b/example/src/examples/V10/QueryTerrainElevation.js
@@ -5,20 +5,19 @@ import { lineString } from '@turf/helpers';
 import { Animated as RNAnimated } from 'react-native';
 import {
   MapView,
-  ShapeSource,
-  LineLayer,
   SkyLayer,
   Camera,
   Logger,
   Terrain,
   RasterDemSource,
   Animated,
+  AnimatedShape,
+  AnimatedRouteCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
   MarkerView,
   Atmosphere,
 } from '@rnmapbox/maps';
 
-import Page from '../common/Page';
-
 Logger.setLogLevel('verbose');
 
 const AnimatedMarkerView = RNAnimated.createAnimatedComponent(MarkerView);
@@ -39,11 +38,9 @@ const styles = {
   }),
 };
 
-const QueryTerrainElevation = ({ ...props }) => {
-  let [routeGeojson, setRouteGeojson] = useState(null);
+const QueryTerrainElevation = () => {
   let [animatedRoute, setAnimatedRoute] = useState(null);
   let [actPoint, setActPoint] = useState(null);
-  // let [pinRoute, setPinRoute] = useState(null);
   let camera = useRef();
   let [altitude, setAltitude] = useState(null);
   let updateAltitudeInterval = useRef();
@@ -93,21 +90,20 @@ const QueryTerrainElevation = ({ ...props }) => {
         'https://docs.mapbox.com/mapbox-gl-js/assets/route-pin.geojson',
       );
       let featureCollection = await response.json();
-      setRouteGeojson(featureCollection);
+
       let pinRoute = featureCollection.features[0].geometry.coordinates;
 
-      let animatedRoute = new Animated.RouteCoordinatesArray(pinRoute, {
+      let animatedRoute = new AnimatedRouteCoordinatesArray(pinRoute, {
         end: {
           from: length(lineString(pinRoute)),
         },
       });
       setAnimatedRoute(animatedRoute);
-      setActPoint(new Animated.ExtractCoordinateFromArray(animatedRoute, -1));
-      //setPinRoute(pinRoute);
+      setActPoint(new AnimatedExtractCoordinateFromArray(animatedRoute, -1));
     })();
   }, []);
   return (
-    <Page {...props}>
+    <>
       <Button title="Start" onPress={() => startAnimation(animatedRoute)} />
       <MapView
         style={styles.mapView}
@@ -140,32 +136,19 @@ const QueryTerrainElevation = ({ ...props }) => {
           <Atmosphere
             style={{
               starIntensity: 1.0,
-              range: [-3.5, 10.0],
-              spaceColor: '#00ffff',
-              color: '#00ff00',
-              highColor: '#ff00ff',
+              range: [-0.7, 2.0],
+              spaceColor: '#def',
+              color: '#def',
+              highColor: '#def',
             }}
           />
         </RasterDemSource>
 
-        {routeGeojson && false && (
-          <ShapeSource id="route" shape={routeGeojson}>
-            <LineLayer
-              id="root"
-              style={{
-                lineColor: 'rgba(0,0,255,0)',
-                lineWidth: 5,
-                lineCap: 'round',
-                lineJoin: 'round',
-              }}
-            />
-          </ShapeSource>
-        )}
         {animatedRoute && (
           <Animated.ShapeSource
             id="animated-route"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: animatedRoute,
               })
@@ -174,7 +157,7 @@ const QueryTerrainElevation = ({ ...props }) => {
             <Animated.LineLayer
               id={'animated-route'}
               style={{
-                lineColor: 'rgba(255,0,0,0)',
+                lineColor: 'rgba(255,0,0,255)',
                 lineWidth: 3,
                 lineCap: 'round',
                 lineJoin: 'round',
@@ -187,7 +170,7 @@ const QueryTerrainElevation = ({ ...props }) => {
           <Animated.ShapeSource
             id="currentLocationSource"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'Point',
                 coordinates: actPoint,
               })
@@ -224,7 +207,7 @@ const QueryTerrainElevation = ({ ...props }) => {
           </AnimatedMarkerView>
         )}
       </MapView>
-    </Page>
+    </>
   );
 };
 
@@ -235,9 +218,14 @@ export default QueryTerrainElevation;
 /** @type ExampleWithMetadata['metadata'] */
 const metadata = {
   title: 'Query Terrain Elevation',
-  tags: ['MapView#queryTerrainElevation'],
+  tags: [
+    'MapView#queryTerrainElevation',
+    'AnimatedShape',
+    'AnimatedRouteCoordinatesArray',
+    'AnimatedExtractCoordinateFromArray',
+  ],
   docs: `
-Query Terrain Elevation
+This is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView
 `,
 };
 QueryTerrainElevation.metadata = metadata;
diff --git a/src/classes/AnimatedRouteCoordinatesArray.js b/src/classes/AnimatedRouteCoordinatesArray.js
@@ -22,7 +22,7 @@ export class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
    * Calculate initial state
    *
    * @param {*} args - to value from animate
-   * @param {} options - options, example
+   * @param {{end?: {from?: number}}} options - options, example
    * @returns {object} - the state object
    */
   onInitialState(coordinatesArray, options = null) {
@@ -32,7 +32,7 @@ export class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
     }
     return {
       fullRoute: coordinatesArray.map((coord) => [coord[0], coord[1]]),
-      end: { from: 0 },
+      end,
     };
   }
 
@@ -57,7 +57,6 @@ export class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
     const { fullRoute, end } = state;
     const currentEnd = end.from * (1.0 - progress) + progress * end.to;
 
-    // console.log("Current end:", end, currentEnd);
     let prevsum = 0;
     let actsum = 0;
     let i = fullRoute.length - 1;
@@ -72,6 +71,10 @@ export class AnimatedRouteCoordinatesArray extends AnimatedCoordinatesArray {
     }
     if (actsum <= currentEnd) {
       const actRoute = [...fullRoute.slice(0, i + 1)];
+      const minLineStringElements = 2;
+      if (actRoute.length < minLineStringElements) {
+        actRoute.push(actRoute[0]);
+      }
       return { fullRoute, end: { ...end, current: currentEnd }, actRoute };
     }
     const r = (currentEnd - prevsum) / (actsum - prevsum);