Visualize data as a heatmap
Add earthquake frequency data to a style from a GeoJSON file and render it on a map using a HeatmapLayer.
<?xml version="1.0" encoding="utf-8"?><com.mapbox.maps.MapView xmlns:android="http://schemas.android.com/apk/res/android"xmlns:mapbox="http://schemas.android.com/apk/res-auto"android:id="@+id/mapView"android:layout_width="match_parent"android:layout_height="match_parent"mapbox:mapbox_cameraTargetLat="50"mapbox:mapbox_cameraTargetLng="-120"mapbox:mapbox_cameraZoom="2" />
package com.mapbox.maps.testapp.examples.globe import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.mapbox.maps.MapboxMapimport com.mapbox.maps.Styleimport com.mapbox.maps.extension.style.expressions.dsl.generated.interpolateimport com.mapbox.maps.extension.style.layers.addLayerAboveimport com.mapbox.maps.extension.style.layers.addLayerBelowimport com.mapbox.maps.extension.style.layers.generated.CircleLayerimport com.mapbox.maps.extension.style.layers.generated.HeatmapLayerimport com.mapbox.maps.extension.style.layers.generated.circleLayerimport com.mapbox.maps.extension.style.layers.generated.heatmapLayerimport com.mapbox.maps.extension.style.layers.properties.generated.ProjectionNameimport com.mapbox.maps.extension.style.projection.generated.projectionimport com.mapbox.maps.extension.style.sources.addSourceimport com.mapbox.maps.extension.style.sources.generated.GeoJsonSourceimport com.mapbox.maps.extension.style.sources.generated.geoJsonSourceimport com.mapbox.maps.extension.style.styleimport com.mapbox.maps.testapp.databinding.ActivityHeatmapLayerBinding /*** Add earthquake frequency data to a style from a GeoJSON file and render* it on a map in globe projection using a HeatmapLayer.*/class HeatmapLayerGlobeActivity : AppCompatActivity() { private lateinit var mapboxMap: MapboxMap override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)val binding = ActivityHeatmapLayerBinding.inflate(layoutInflater)setContentView(binding.root) mapboxMap = binding.mapView.mapboxMap.apply {loadStyle(style(Style.DARK) {+projection(ProjectionName.GLOBE)}) { style ->addRuntimeLayers(style)}}} private fun addRuntimeLayers(style: Style) {style.addSource(createEarthquakeSource())style.addLayerAbove(createHeatmapLayer(), "waterway-label")style.addLayerBelow(createCircleLayer(), HEATMAP_LAYER_ID)} private fun createEarthquakeSource(): GeoJsonSource {return geoJsonSource(EARTHQUAKE_SOURCE_ID) {url(EARTHQUAKE_SOURCE_URL)}} private fun createHeatmapLayer(): HeatmapLayer {return heatmapLayer(HEATMAP_LAYER_ID,EARTHQUAKE_SOURCE_ID) {maxZoom(9.0)sourceLayer(HEATMAP_LAYER_SOURCE)// Begin color ramp at 0-stop with a 0-transparancy color// to create a blur-like effect.heatmapColor(interpolate {linear()heatmapDensity()stop {literal(0)rgba(33.0, 102.0, 172.0, 0.0)}stop {literal(0.2)rgb(103.0, 169.0, 207.0)}stop {literal(0.4)rgb(209.0, 229.0, 240.0)}stop {literal(0.6)rgb(253.0, 219.0, 240.0)}stop {literal(0.8)rgb(239.0, 138.0, 98.0)}stop {literal(1)rgb(178.0, 24.0, 43.0)}})// Increase the heatmap weight based on frequency and property magnitudeheatmapWeight(interpolate {linear()get { literal("mag") }stop {literal(0)literal(0)}stop {literal(6)literal(1)}})// Increase the heatmap color weight weight by zoom level// heatmap-intensity is a multiplier on top of heatmap-weightheatmapIntensity(interpolate {linear()zoom()stop {literal(0)literal(1)}stop {literal(9)literal(3)}})// Adjust the heatmap radius by zoom levelheatmapRadius(interpolate {linear()zoom()stop {literal(0)literal(2)}stop {literal(9)literal(20)}})// Transition from heatmap to circle layer by zoom levelheatmapOpacity(interpolate {linear()zoom()stop {literal(7)literal(1)}stop {literal(9)literal(0)}})}} private fun createCircleLayer(): CircleLayer {return circleLayer(CIRCLE_LAYER_ID,EARTHQUAKE_SOURCE_ID) {circleRadius(interpolate {linear()zoom()stop {literal(7)interpolate {linear()get { literal("mag") }stop {literal(1)literal(1)}stop {literal(6)literal(4)}}}stop {literal(16)interpolate {linear()get { literal("mag") }stop {literal(1)literal(5)}stop {literal(6)literal(50)}}}})circleColor(interpolate {linear()get { literal("mag") }stop {literal(1)rgba(33.0, 102.0, 172.0, 0.0)}stop {literal(2)rgb(102.0, 169.0, 207.0)}stop {literal(3)rgb(209.0, 229.0, 240.0)}stop {literal(4)rgb(253.0, 219.0, 199.0)}stop {literal(5)rgb(239.0, 138.0, 98.0)}stop {literal(6)rgb(178.0, 24.0, 43.0)}})circleOpacity(interpolate {linear()zoom()stop {literal(7)literal(0)}stop {literal(8)literal(1)}})circleStrokeColor("white")circleStrokeWidth(0.1)}} companion object {private const val EARTHQUAKE_SOURCE_URL ="https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"private const val EARTHQUAKE_SOURCE_ID = "earthquakes"private const val HEATMAP_LAYER_ID = "earthquakes-heat"private const val HEATMAP_LAYER_SOURCE = "earthquakes"private const val CIRCLE_LAYER_ID = "earthquakes-circle"}}
Was this example helpful?