• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Animate Image Source Layer

This example shows how to Animate the Runtime Map style layer

  • Add Image Source layer
  • Update the Image source every second
Animate Image Source Layer

For all code examples, refer to Android Maps Code Examples

activity_animated_image_source.xml view source

1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:app="http://schemas.android.com/apk/res-auto"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical">
7
8 <ai.nextbillion.maps.core.MapView
9 android:id="@id/mapView"
10 android:layout_width="match_parent"
11 android:layout_height="match_parent"
12 app:nbmap_cameraTargetLat="41.9567"
13 app:nbmap_cameraTargetLng="-78.6430"
14 app:nbmap_cameraZoom="5" />
15
16</RelativeLayout>

AnimatedImageSourceActivity view source

1package ai.nextbillion;
2
3import android.content.Context;
4import android.graphics.Bitmap;
5import android.graphics.drawable.BitmapDrawable;
6import android.graphics.drawable.Drawable;
7import android.os.Bundle;
8import android.os.Handler;
9
10import ai.nextbillion.maps.Nextbillion;
11import ai.nextbillion.maps.camera.CameraPosition;
12import ai.nextbillion.maps.camera.CameraUpdateFactory;
13import ai.nextbillion.maps.core.MapView;
14import ai.nextbillion.maps.core.NextbillionMap;
15import ai.nextbillion.maps.core.OnMapReadyCallback;
16import ai.nextbillion.maps.core.Style;
17import ai.nextbillion.maps.geometry.LatLng;
18import ai.nextbillion.maps.geometry.LatLngQuad;

This example demonstrates how to create an animation using a series of images with an ImageSource in the NextbillionMap library. The animation consists of a radar image that changes every second.

Initializing MapView:

  • The MapView is initialized in the onCreate method by finding the view with the ID mapView from the layout file.
  • The onCreate method also calls mapView.onCreate(savedInstanceState) to create the MapView and mapView.getMapAsync(this) to get a reference to the NextbillionMap instance when it is ready.

Adding Image Source Layer:

  • The onMapReady method is called when the NextbillionMap instance is ready.
  • A LatLngQuad is created to define the corners of a quadrilateral region on the map.
  • A CameraPosition is defined to set the initial camera position of the map.
  • An ImageSource is created with an ID, the LatLngQuad, and the resource ID of the first radar image.
  • A RasterLayer is created with an ID and the ID of the ImageSource.
  • The map style is set using a Style.Builder by specifying the style JSON URI, adding the ImageSource, and adding the RasterLayer.
  • A RefreshImageRunnable is created to handle the animation by periodically changing the image of the ImageSource.
  • The RefreshImageRunnable is scheduled to run every 100 milliseconds.

Animating Image Source:

  • The RefreshImageRunnable class is a custom Runnable implementation.
  • It keeps track of the current image index and an array of Bitmaps representing the radar images.
  • In the constructor, it initializes the array of Bitmaps with the radar images and sets the initial image index.
  • In the run method, it updates the image of the ImageSource with the current Bitmap.
  • The image index is incremented, and if it exceeds the number of images, it is reset to 0.
  • The RefreshImageRunnable is rescheduled to run after 1 second (1000 milliseconds) using the Handler instance.

Additional notes:

  • The code includes lifecycle methods (onStart, onResume, onPause, onStop, onDestroy, onSaveInstanceState) to manage the lifecycle of the MapView.
  • The code uses Nextbillion map library classes and methods for map-related operations.
  • The code also includes utility methods (getBitmap) to convert resource IDs to Bitmaps for the radar images.

Have Questions ?