# Styling heatmaps

> **Note (legacy): A newer version of the Maps SDK is available**
> 
> This page uses v9.7.1 of the Mapbox Maps SDK. A newer version of the SDK is available. Learn about the latest version, v11.29.0, in the [Maps SDK documentation](https://docs.mapbox.com/android/maps/guides/).

Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/android/android/assets/medias/maps-example-multiple-heatmap-styling-activity-0fbd8a550d6651f316c7b7b6a048c3f8.mp4).

> **Note**
> 
> This example is a part of the [Mapbox Android Demo app](https://github.com/mapbox/mapbox-android-demo). You can find the values for all referenced resources in the [`res`](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res) directory. For example, see [`res/values/activity_strings.xml`](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res/values/activity_strings.xml) for `R.string.*` references used in this example. The dependencies can be found [here.](https://github.com/mapbox/mapbox-navigation-android-examples/blob/main/app/build.gradle) The examples use View binding. [See setup documention if necessary.](https://developer.android.com/topic/libraries/view-binding)

Title: `activity_multiple_heatmap_styling`

[View on GitHub](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/res/layout/activity_multiple_heatmap_styling.xml)

```xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/switch_heatmap_style_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_swap_horiz_white_24dp"
        mapbox:fabSize="normal" />
</FrameLayout>
```

**Java**

Title: `MultipleHeatmapStylingActivity.java`

[View on GitHub](https://github.com/mapbox/mapbox-android-demo/tree/master/MapboxAndroidDemo/src/main/java/com/mapbox/mapboxandroiddemo/examples/dds/MultipleHeatmapStylingActivity.java)

```java
package com.mapbox.mapboxandroiddemo.examples.dds;

import android.os.Bundle;
import android.view.View;

import com.mapbox.mapboxandroiddemo.R;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.camera.CameraPosition;
import com.mapbox.mapboxsdk.camera.CameraUpdateFactory;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.style.expressions.Expression;
import com.mapbox.mapboxsdk.style.layers.HeatmapLayer;
import com.mapbox.mapboxsdk.style.layers.Layer;
import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;

import java.net.URI;
import java.net.URISyntaxException;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import timber.log.Timber;

import static com.mapbox.mapboxsdk.style.expressions.Expression.heatmapDensity;
import static com.mapbox.mapboxsdk.style.expressions.Expression.interpolate;
import static com.mapbox.mapboxsdk.style.expressions.Expression.linear;
import static com.mapbox.mapboxsdk.style.expressions.Expression.literal;
import static com.mapbox.mapboxsdk.style.expressions.Expression.rgb;
import static com.mapbox.mapboxsdk.style.expressions.Expression.rgba;
import static com.mapbox.mapboxsdk.style.expressions.Expression.zoom;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.heatmapColor;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.heatmapIntensity;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.heatmapOpacity;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.heatmapRadius;

public class MultipleHeatmapStylingActivity extends AppCompatActivity
  implements OnMapReadyCallback {

  private static final String HEATMAP_SOURCE_ID = "HEATMAP_SOURCE_ID";
  private static final String HEATMAP_LAYER_ID = "HEATMAP_LAYER_ID";
  private MapView mapView;
  private MapboxMap mapboxMap;
  private Expression[] listOfHeatmapColors;
  private Expression[] listOfHeatmapRadiusStops;
  private Float[] listOfHeatmapIntensityStops;
  private int index;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    index = 0;
    // Mapbox access token is configured here. This needs to be called either in your application
    // object or in the same activity which contains the mapview.
    Mapbox.getInstance(this, getString(R.string.access_token));
    setContentView(R.layout.activity_multiple_heatmap_styling);
    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
    mapView.getMapAsync(this);
  }

  @Override
  public void onMapReady(@NonNull final MapboxMap mapboxMap) {
    MultipleHeatmapStylingActivity.this.mapboxMap = mapboxMap;
    mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
      @Override
      public void onStyleLoaded(@NonNull final Style style) {
        CameraPosition cameraPositionForFragmentMap = new CameraPosition.Builder()
          .target(new LatLng(34.056684, -118.254002))
          .zoom(11.047)
          .build();
        mapboxMap.animateCamera(
          CameraUpdateFactory.newCameraPosition(cameraPositionForFragmentMap), 2600);
        try {
          style.addSource(new GeoJsonSource(HEATMAP_SOURCE_ID, new URI("asset://la_heatmap_styling_points.geojson")));
        } catch (URISyntaxException exception) {
          Timber.d(exception);
        }
        initHeatmapColors();
        initHeatmapRadiusStops();
        initHeatmapIntensityStops();
        addHeatmapLayer(style);
        findViewById(R.id.switch_heatmap_style_fab).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
            index++;
            if (index == listOfHeatmapColors.length - 1) {
              index = 0;
            }
            Layer heatmapLayer = style.getLayer(HEATMAP_LAYER_ID);
            if (heatmapLayer != null) {
              heatmapLayer.setProperties(
                heatmapColor(listOfHeatmapColors[index]),
                heatmapRadius(listOfHeatmapRadiusStops[index]),
                heatmapIntensity(listOfHeatmapIntensityStops[index])
              );
            }
          }
        });
      }
    });
  }

  private void addHeatmapLayer(@NonNull Style loadedMapStyle) {
    // Create the heatmap layer
    HeatmapLayer layer = new HeatmapLayer(HEATMAP_LAYER_ID, HEATMAP_SOURCE_ID);

    // Heatmap layer disappears at whatever zoom level is set as the maximum
    layer.setMaxZoom(18);

    layer.setProperties(
      // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
      // Begin color ramp at 0-stop with a 0-transparency color to create a blur-like effect.
      heatmapColor(listOfHeatmapColors[index]),

      // Increase the heatmap color weight weight by zoom level
      // heatmap-intensity is a multiplier on top of heatmap-weight
      heatmapIntensity(listOfHeatmapIntensityStops[index]),

      // Adjust the heatmap radius by zoom level
      heatmapRadius(listOfHeatmapRadiusStops[index]
      ),

      heatmapOpacity(1f)
    );

    // Add the heatmap layer to the map and above the "water-label" layer
    loadedMapStyle.addLayerAbove(layer, "waterway-label");
  }

  @Override
  protected void onStart() {
    super.onStart();
    mapView.onStart();
  }

  @Override
  protected void onResume() {
    super.onResume();
    mapView.onResume();
  }

  @Override
  protected void onPause() {
    super.onPause();
    mapView.onPause();
  }

  @Override
  protected void onStop() {
    super.onStop();
    mapView.onStop();
  }

  @Override
  public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    mapView.onSaveInstanceState(outState);
  }

  @Override
  public void onLowMemory() {
    super.onLowMemory();
    mapView.onLowMemory();
  }

  @Override
  public void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
  }

  private void initHeatmapColors() {
    listOfHeatmapColors = new Expression[] {
      // 0
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.25), rgba(224, 176, 63, 0.5),
        literal(0.5), rgb(247, 252, 84),
        literal(0.75), rgb(186, 59, 30),
        literal(0.9), rgb(255, 0, 0)
      ),
      // 1
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(255, 255, 255, 0.4),
        literal(0.25), rgba(4, 179, 183, 1.0),
        literal(0.5), rgba(204, 211, 61, 1.0),
        literal(0.75), rgba(252, 167, 55, 1.0),
        literal(1), rgba(255, 78, 70, 1.0)
      ),
      // 2
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(12, 182, 253, 0.0),
        literal(0.25), rgba(87, 17, 229, 0.5),
        literal(0.5), rgba(255, 0, 0, 1.0),
        literal(0.75), rgba(229, 134, 15, 0.5),
        literal(1), rgba(230, 255, 55, 0.6)
      ),
      // 3
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(135, 255, 135, 0.2),
        literal(0.5), rgba(255, 99, 0, 0.5),
        literal(1), rgba(47, 21, 197, 0.2)
      ),
      // 4
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(4, 0, 0, 0.2),
        literal(0.25), rgba(229, 12, 1, 1.0),
        literal(0.30), rgba(244, 114, 1, 1.0),
        literal(0.40), rgba(255, 205, 12, 1.0),
        literal(0.50), rgba(255, 229, 121, 1.0),
        literal(1), rgba(255, 253, 244, 1.0)
      ),
      // 5
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.05), rgba(0, 0, 0, 0.05),
        literal(0.4), rgba(254, 142, 2, 0.7),
        literal(0.5), rgba(255, 165, 5, 0.8),
        literal(0.8), rgba(255, 187, 4, 0.9),
        literal(0.95), rgba(255, 228, 173, 0.8),
        literal(1), rgba(255, 253, 244, .8)
      ),
      //6
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.3), rgba(82, 72, 151, 0.4),
        literal(0.4), rgba(138, 202, 160, 1.0),
        literal(0.5), rgba(246, 139, 76, 0.9),
        literal(0.9), rgba(252, 246, 182, 0.8),
        literal(1), rgba(255, 255, 255, 0.8)
      ),

      //7
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.1), rgba(0, 2, 114, .1),
        literal(0.2), rgba(0, 6, 219, .15),
        literal(0.3), rgba(0, 74, 255, .2),
        literal(0.4), rgba(0, 202, 255, .25),
        literal(0.5), rgba(73, 255, 154, .3),
        literal(0.6), rgba(171, 255, 59, .35),
        literal(0.7), rgba(255, 197, 3, .4),
        literal(0.8), rgba(255, 82, 1, 0.7),
        literal(0.9), rgba(196, 0, 1, 0.8),
        literal(0.95), rgba(121, 0, 0, 0.8)
      ),
      // 8
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.1), rgba(0, 2, 114, .1),
        literal(0.2), rgba(0, 6, 219, .15),
        literal(0.3), rgba(0, 74, 255, .2),
        literal(0.4), rgba(0, 202, 255, .25),
        literal(0.5), rgba(73, 255, 154, .3),
        literal(0.6), rgba(171, 255, 59, .35),
        literal(0.7), rgba(255, 197, 3, .4),
        literal(0.8), rgba(255, 82, 1, 0.7),
        literal(0.9), rgba(196, 0, 1, 0.8),
        literal(0.95), rgba(121, 0, 0, 0.8)
      ),
      // 9
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.1), rgba(0, 2, 114, .1),
        literal(0.2), rgba(0, 6, 219, .15),
        literal(0.3), rgba(0, 74, 255, .2),
        literal(0.4), rgba(0, 202, 255, .25),
        literal(0.5), rgba(73, 255, 154, .3),
        literal(0.6), rgba(171, 255, 59, .35),
        literal(0.7), rgba(255, 197, 3, .4),
        literal(0.8), rgba(255, 82, 1, 0.7),
        literal(0.9), rgba(196, 0, 1, 0.8),
        literal(0.95), rgba(121, 0, 0, 0.8)
      ),
      // 10
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.01),
        literal(0.1), rgba(0, 2, 114, .1),
        literal(0.2), rgba(0, 6, 219, .15),
        literal(0.3), rgba(0, 74, 255, .2),
        literal(0.4), rgba(0, 202, 255, .25),
        literal(0.5), rgba(73, 255, 154, .3),
        literal(0.6), rgba(171, 255, 59, .35),
        literal(0.7), rgba(255, 197, 3, .4),
        literal(0.8), rgba(255, 82, 1, 0.7),
        literal(0.9), rgba(196, 0, 1, 0.8),
        literal(0.95), rgba(121, 0, 0, 0.8)
      ),
      // 11
      interpolate(
        linear(), heatmapDensity(),
        literal(0.01), rgba(0, 0, 0, 0.25),
        literal(0.25), rgba(229, 12, 1, .7),
        literal(0.30), rgba(244, 114, 1, .7),
        literal(0.40), rgba(255, 205, 12, .7),
        literal(0.50), rgba(255, 229, 121, .8),
        literal(1), rgba(255, 253, 244, .8)
      )
    };
  }

  private void initHeatmapRadiusStops() {
    listOfHeatmapRadiusStops = new Expression[] {
      // 0
      interpolate(
        linear(), zoom(),
        literal(6), literal(50),
        literal(20), literal(100)
      ),
      // 1
      interpolate(
        linear(), zoom(),
        literal(12), literal(70),
        literal(20), literal(100)
      ),
      // 2
      interpolate(
        linear(), zoom(),
        literal(1), literal(7),
        literal(5), literal(50)
      ),
      // 3
      interpolate(
        linear(), zoom(),
        literal(1), literal(7),
        literal(5), literal(50)
      ),
      // 4
      interpolate(
        linear(), zoom(),
        literal(1), literal(7),
        literal(5), literal(50)
      ),
      // 5
      interpolate(
        linear(), zoom(),
        literal(1), literal(7),
        literal(15), literal(200)
      ),
      // 6
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(70)
      ),
      // 7
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(200)
      ),
      // 8
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(200)
      ),
      // 9
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(200)
      ),
      // 10
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(200)
      ),
      // 11
      interpolate(
        linear(), zoom(),
        literal(1), literal(10),
        literal(8), literal(200)
      ),
    };
  }

  private void initHeatmapIntensityStops() {
    listOfHeatmapIntensityStops = new Float[] {
      // 0
      0.6f,
      // 1
      0.3f,
      // 2
      1f,
      // 3
      1f,
      // 4
      1f,
      // 5
      1f,
      // 6
      1.5f,
      // 7
      0.8f,
      // 8
      0.25f,
      // 9
      0.8f,
      // 10
      0.25f,
      // 11
      0.5f
    };
  }
}
```