• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Heatmap Layer

This example shows how to Add a HeatMap layer to MapView

  • Create HeatMap source with GeoJson Source

  • Create HeatMap Layer with heatmap properties

  • Add HeatMap Layer to MapView

Custom Heatmap Layer

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

activity_heatmaplayer.xml view source

1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
7 <ai.nextbillion.maps.core.MapView
8 android:id="@+id/mapView"
9 android:layout_width="match_parent"
10 android:layout_height="match_parent" />

HeatmapLayerActivity view source

1package ai.nextbillion;
3import android.os.Bundle;
5import java.net.URI;
6import java.net.URISyntaxException;
8import ai.nextbillion.maps.core.MapView;
9import ai.nextbillion.maps.core.NextbillionMap;
10import ai.nextbillion.maps.core.Style;
11import ai.nextbillion.maps.style.layers.CircleLayer;
12import ai.nextbillion.maps.style.layers.HeatmapLayer;
13import ai.nextbillion.maps.style.sources.GeoJsonSource;
14import androidx.appcompat.app.AppCompatActivity;
16import static ai.nextbillion.maps.style.expressions.Expression.get;
17import static ai.nextbillion.maps.style.expressions.Expression.heatmapDensity;
18import static ai.nextbillion.maps.style.expressions.Expression.interpolate;

This code is an example of an Android activity that showcases the use of a heatmap layer in a map view. The activity creates a map view, sets up a heatmap layer with a GeoJSON data source, and adds the heatmap layer to the map view.


  • The map view is initialized in the onCreate method by calling mapView.onCreate(savedInstanceState). This sets up the map view and prepares it for use.

Create HeatMap source with GeoJson Source:

  • The createEarthquakeSource method creates a GeoJsonSource for the heatmap layer using a GeoJSON data source. It takes the URL of the GeoJSON data as a parameter and creates a new GeoJsonSource object with a unique ID and the provided data source URL.

Create HeatMap Layer with heatmap properties:

  • The createHeatmapLayer method creates a HeatmapLayer object with a unique ID and sets various properties for the heatmap layer.

  • The properties include the color ramp for the heatmap, the weight of the heatmap based on frequency and magnitude, the intensity and radius of the heatmap based on the zoom level, and the opacity transition from the heatmap to the circle layer.

Add HeatMap Layer to MapView:

  • In the onCreate method, after setting up the map view, the nextbillionMap.setStyle method is called to set the map style and add the heatmap layer to the map view.

  • The Style.Builder is used to create a new map style and the createEarthquakeSource and createHeatmapLayer methods are called to create the GeoJSON data source and heatmap layer, respectively.

  • The created source and layer are then added to the map style using the withSource and withLayerAbove or withLayerBelow methods, depending on the desired layer order.

Note: The code also includes methods for creating a circle layer, setting up the map view lifecycle callbacks, and handling various other lifecycle events of the activity.

Have Questions ?