Move Marker and MapView Smoothly

[nahidmbstu]

i am trying to Move the MapView and Marker along with a location array . but i dont know how to make the animation smooth . can any one help how to fix this?

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Alert,
  Dimensions,
  Platform,
  Text
} from "react-native";
import MapView, {
  ProviderPropType,
  Marker,
  AnimatedRegion
} from "react-native-maps";
import { connect } from "react-redux";

import Header from "./header";
import { Item } from "native-base";

const screen = Dimensions.get("window");

const ASPECT_RATIO = screen.width / screen.height;
const LATITUDE = 23.8103;
const LONGITUDE = 90.4125;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

class LiveTracking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE
      }),
    };
  }

  componentDidMount() {
    setTimeout(() => {
      const { coordinate } = this.state;

      var region = {
        latitude: 23.8965,
        longitude: 90.4126,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA
      };

      var All_location = [
        {
          latitude: 23.8965,
          longitude: 90.4126,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        {
          latitude: 23.8989,
          longitude: 90.4126,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        {
          latitude: 23.8845,
          longitude: 90.4126,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        {
          latitude: 23.8454,
          longitude: 90.4126,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        },
        {
          latitude: 24.8545,
          longitude: 90.4126,
          latitudeDelta: LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }
      ];

      All_location.map(item => {
        doAnimattion = item => {
          this.mapRef.animateToRegion(item, 6000);
          this.marker._component.animateMarkerToCoordinate(item, 5000);
        };

        doAnimattion(item);
      });
    }, 2000);
  }

  componentWillUnmount() {}

  render() {
    return (
      // <View>
      //
      <View style={styles.container}>
        <Header title="Trip Live Tracking" navigation={this.props.navigation} />
        <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={{
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA
          }}
          rotateEnabled={false}
          ref={ref => {
            this.mapRef = ref;
          }}
          cacheEnabled
        >
          <Marker.Animated
            coordinate={this.state.coordinate}
            ref={marker => {
              this.marker = marker;
            }}
          />
        </MapView>
      </View>
      // </View>
    );
  }
}

[xaamin]

See the examples path.

Animated markers

In docs
Animate to region method on Map to move the map

[ganesh-papola]

is this code working coordinate.timing(newCoordinate).start(); for ios or How to make it smoother?

[jumpman255]

+1, the animations are really not smooth. The only way of having something smooth is using the animateToRegion function, but it's limiting in functionality.

[anastely]

@cardi3m Are you solve it ?

[BallySharma]

Same issues...How can we fix it? to make smooth moving...

[TheEhsanSarshar]

for moving map you can use

 mapView.current.animateCamera({
       center: {
           latitude,
           longitude,
       },
       heading: bearing,
       zoom: 18,
}, {duration: 10000})

and for moving marker you can use

if (Platform.OS === 'android') {
            marker.current.animateMarkerToCoordinate({
                latitude: 38.3368456,
                longitude: -122.0299002,
                latitudeDelta: 0.0043,
                longitudeDelta: 0.0041,
            }, 10000)
        } else {
            markerOrigin.current.region.timing({
                latitude: 38.3368456,
                longitude: -122.0299002,
                latitudeDelta: 0.0043,
                longitudeDelta: 0.0041,
                duration: 10000,
       }).start()
}

if marker have bearing then there is not any api for rotating the marker
the only way is to implement it yourself with animated api
here is how I implemented it

    const AnimatedImage = Animated.createAnimatedComponent(Image)

export default (props) =>  {
    const rotation = useRef(new Animated.Value(0)).current
    const bearingDegree = rotation.interpolate({
        inputRange: [0, 360],
        outputRange: ['0deg', '360deg'],
    });
   useEffect(() => {
        if(props.bearing !== null || props.bearing !== undefined) {
            Animated.timing(rotation, {
                toValue: props.bearing,
                useNativeDriver: true,
                duration: 10000,
            }).start()
        }
    }, [props.bearing])

  return (
        <Marker.Animated
            coordinate={markerOrigin.current.region}
            ref={marker}
            flat
            anchor={{ x: 0.5, y: 0.5 }}
        >
            <AnimatedImage
                source={require('../../assets/images/motor-map.png')}
                style={[styles.bike, {transform: [{rotate: bearingDegree}]}]}
                resizeMode="contain"
            />
        </Marker.Animated>
    )
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hadijoons]

this is the good example that you can animate the marker between two points smoothly in react native
actually this is the same example of
https://github.com/react-native-maps/react-native-maps/blob/master/example/examples/AnimatedMarkers.js

but if you test it. it have errors and warnings , i updated the example and made it easier to understand
and i hop to help you friends

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity, Platform} from 'react-native';
import MapView, {ProviderPropType, Marker, AnimatedRegion} from 'react-native-maps';



class AnimatedMarkers extends React.Component {
    constructor(props) {
        super(props);
        this.marker = null;

        this.state = {
            coordinate: new AnimatedRegion({
                latitude: 32.5983,
                longitude: 44.0175,
                latitudeDelta: 0.012,
                longitudeDelta:0.012,
            }),
        };
    }

    animateMarker() {

        var newCoordinate = {
            latitude: 32.601,
            longitude: 44.0172,
            latitudeDelta: 0.012,
            longitudeDelta: 0.012,
        };

        if (Platform.OS === 'android') {
            if (this.marker) {
                this.marker.animateMarkerToCoordinate(newCoordinate,4000);//  number of duration between points
            }
        } else {
            this.state.coordinate.timing(newCoordinate).start();
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    provider={this.props.provider}
                    style={styles.map}
                    initialRegion={{
                        latitude: 32.5983,
                        longitude: 44.0175,
                        latitudeDelta: 0.012,
                        longitudeDelta: 0.012,
                    }}
                >
                    <Marker.Animated
                        ref={marker => {
                            this.marker = marker;
                        }}
                        coordinate={this.state.coordinate}
                    />
                </MapView>
                <View style={styles.buttonContainer}>
                    <TouchableOpacity
                        onPress={() => this.animateMarker()}
                        style={[styles.bubble, styles.button]}
                    >
                        <Text>Animate</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
AnimatedMarkers.propTypes = {provider: ProviderPropType,};


const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
    bubble: {
        flex: 1,
        backgroundColor: 'rgba(255,255,255,0.7)',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 20,
    },
    latlng: {
        width: 200,
        alignItems: 'stretch',
    },
    button: {
        width: 80,
        paddingHorizontal: 12,
        alignItems: 'center',
        marginHorizontal: 10,
    },
    buttonContainer: {
        flexDirection: 'row',
        marginVertical: 20,
        backgroundColor: 'transparent',
    },
});

export default AnimatedMarkers;

[Maisaan]

@hadijoons how do i do this in typescript?