• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Animate Symbol Layer

This example shows how to Animate Symbol Layers

  • Add Custom Symbol Layers with Properties
  • Animate Symbol layers using Value Animator
  • Update Symbol layer source
Animate Symbol Layer

For all code examples, refer to Android Maps SDK Code Examples

activity_animate_markers.xml view source

1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 xmlns:tools="http://schemas.android.com/tools"
5 android:layout_width="match_parent"
6 android:layout_height="match_parent"
7 tools:context=".MainActivity">
9 <ai.nextbillion.maps.core.MapView
10 android:id="@+id/map_view"
11 android:layout_width="match_parent"
12 android:layout_height="match_parent"
13 app:nbmap_uiAttribution="false"
14 app:nbmap_cameraTargetLat="53.550813508267716"
15 app:nbmap_cameraTargetLng="9.992248999933745"
16 app:nbmap_cameraZoom="15" />
18 <ImageView

AnimateSymbolActivity view source

1package ai.nextbillion;
3import android.animation.Animator;
4import android.animation.AnimatorListenerAdapter;
5import android.animation.TypeEvaluator;
6import android.animation.ValueAnimator;
7import android.graphics.drawable.BitmapDrawable;
8import android.os.Bundle;
9import android.view.animation.LinearInterpolator;
10import android.widget.ImageView;
12import com.google.gson.JsonObject;
14import java.util.ArrayList;
15import java.util.List;
16import java.util.Random;
18import ai.nextbillion.kits.geojson.Feature;

The example code is an Android activity that demonstrates how to animate symbol markers on a map using the Nextbillion Maps SDK. Here's a summary of the code:

Initializing MapView:

  • The MapView is initialized in the onCreate method using the mapView.onCreate(savedInstanceState) method.

Adding Symbol Layer Source:

  • The generateTaxis method adds a symbol layer source to the map.
  • It defines a custom image called "taxi" using a bitmap resource.
  • It creates a GeoJsonSource object named "taxi-source" and adds it to the map's style.
  • A SymbolLayer named "taxi-layer" is also created and added to the style.
  • The SymbolLayer properties are set to display the "taxi" icon image and allow overlap.

Animating Symbol Layer:

  • The animateTaxis method animates the symbol markers.
  • It uses ValueAnimator to animate the markers' positions from their current location to a new location.
  • A ValueAnimator listener updates the taxi's current position and calls updateTaxisSource to update the source on the map.
  • The longest drive is identified, and when its animation ends, it updates the destinations of all taxis and restarts the animation.
  • Each animator is given a random start delay and duration based on the taxi's duration.

Updating Symbol Layer Source:

  • The updateTaxisSource method updates the GeoJsonSource on the map with the updated taxi marker features.
  • The code uses Nextbillion Maps SDK to work with maps, symbols, and animations in an Android application. It generates random taxi markers on the map, animates their movement, and updates the marker positions dynamically.

Additional notes:

  • The code includes lifecycle methods (onStart, onResume, onPause, onStop, onSaveInstanceState, onDestroy, onLowMemory) to manage the lifecycle of the MapView.

Have Questions ?