Usual Suspect
Usual Suspect

Reputation: 601

Android Maps - animateCamera() method not working proper

Problem:

1) Map getting animated to reach the required location(4th line in code) but it got zoomed to the default location(5th line in code)

[leaving the map in the default location at the specified zoom level]

2) I understand why is the problem happening but i don't know how to resolve it.

3) If i change the 4th line to moveCamera instead of animateCamera that will work, but i do want animateCamera() method.

Here's the code:

map=((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();
MarkerOptions options=new MarkerOptions().position(new LatLng(13.0810,80.2740));
map.addMarker(options);
map.animateCamera(CameraUpdateFactory.newLatLng(new LatLng(13.0810,80.2740)),4000,null);
map.animateCamera(CameraUpdateFactory.zoomTo(15.5f),2000,null);

Upvotes: 11

Views: 23480

Answers (3)

Shivam Pandey
Shivam Pandey

Reputation: 104

  useEffect(() => {
    const fetchLocation = async () => {
      const hasLocationPermission =
        Platform.OS === 'ios'
          ? await Geolocation.requestAuthorization('whenInUse')
          : await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
            );

      if (hasLocationPermission === 'granted') {
        await Geolocation.getCurrentPosition(
          position => {
            const {
              coords: {latitude, longitude},
            } = position;

            setLocation({
              latitude,
              longitude,
              latitudeDelta: 1,
              longitudeDelta: 1,
            });
          },
          error => {
            // See error code charts below.
            console.log(error.code, error.message);
          },
          {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
        );
      }
    };

    fetchLocation();
  }, []);

  useEffect(() => {
    if (location && _map.current) {
      _map.current.animateCamera(
        {
          center: {
            latitude: location.latitude,
            longitude: location.longitude,
          },
          zoom: 15,
        },
        {duration: 5000},
      );
    }
  }, [location]);

  return (
    <View style={styles.container}>
      <MapView style={styles.map} provider={PROVIDER_GOOGLE} ref={_map}>
        {location && <Marker coordinate={location} />}
      </MapView>
    </View>
  );
};

Upvotes: 0

MaciejG&#243;rski
MaciejG&#243;rski

Reputation: 22232

Use CancelableCallback with first animateCamera and call second animateCamera in onFinish.

Example: AnimateCameraChainingExampleActivity.java

Upvotes: 2

Pavel Dudka
Pavel Dudka

Reputation: 20934

The problem is that you call zoom right after you started animating to the new location. That's why it just replaces last camera update action with the new one.

You can simply resolve that by creating more accurate camera update action (which would include both latlng change AND zoom level change):

CameraPosition newCamPos = new CameraPosition(new LatLng(13.0810,80.2740), 
                                                  15.5f, 
                                                  map.getCameraPosition().tilt, //use old tilt 
                                                  map.getCameraPosition().bearing); //use old bearing
map.animateCamera(CameraUpdateFactory.newCameraPosition(newCamPos), 4000, null);

ALTERNATIVELY as pointed out by MaciejGórski, you can just use newLatLngZoom interface which includes both LatLng and zoom change:

map.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(13.0810,80.2740), 15.5f), 4000, null);

Upvotes: 41

Related Questions