From 82de856c94bbc090ba30186011610da5e233e277 Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Thu, 15 Feb 2018 17:38:23 +0200
Subject: [core, ios, macos, android, node] Heatmap layer (#11046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Konstantin Käfer <mail@kkaefer.com>
Co-Authored-By: Anand Thakker <anandthakker@users.noreply.github.com>
Co-Authored-By: Minh Nguyễn <1ec5@users.noreply.github.com>
---
 .../src/main/AndroidManifest.xml                   |  11 ++
 .../activity/style/HeatmapLayerActivity.java       | 216 +++++++++++++++++++++
 .../src/main/res/layout/activity_heatmaplayer.xml  |  14 ++
 .../src/main/res/values/descriptions.xml           |   1 +
 .../src/main/res/values/titles.xml                 |   1 +
 5 files changed, 243 insertions(+)
 create mode 100644 platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/HeatmapLayerActivity.java
 create mode 100644 platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_heatmaplayer.xml

(limited to 'platform/android/MapboxGLAndroidSDKTestApp/src/main')

diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/AndroidManifest.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/AndroidManifest.xml
index 2d6efc0d84..5a0493e5bd 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/AndroidManifest.xml
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/AndroidManifest.xml
@@ -789,6 +789,17 @@
                 android:name="android.support.PARENT_ACTIVITY"
                 android:value=".activity.FeatureOverviewActivity"/>
         </activity>
+        <activity
+            android:name=".activity.style.HeatmapLayerActivity"
+            android:description="@string/description_heatmaplayer"
+            android:label="@string/activity_heatmaplayer">
+            <meta-data
+                android:name="@string/category"
+                android:value="@string/category_style"/>
+            <meta-data
+                android:name="android.support.PARENT_ACTIVITY"
+                android:value=".activity.FeatureOverviewActivity"/>
+        </activity>
 
         <!-- For Instrumentation tests -->
         <activity
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/HeatmapLayerActivity.java b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/HeatmapLayerActivity.java
new file mode 100644
index 0000000000..b42734ea67
--- /dev/null
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/HeatmapLayerActivity.java
@@ -0,0 +1,216 @@
+package com.mapbox.mapboxsdk.testapp.activity.style;
+
+import android.os.Bundle;
+import android.support.v7.app.AppCompatActivity;
+
+import com.mapbox.mapboxsdk.maps.MapView;
+import com.mapbox.mapboxsdk.maps.MapboxMap;
+import com.mapbox.mapboxsdk.style.layers.CircleLayer;
+import com.mapbox.mapboxsdk.style.layers.HeatmapLayer;
+import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
+import com.mapbox.mapboxsdk.testapp.R;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+
+import timber.log.Timber;
+
+import static com.mapbox.mapboxsdk.style.expressions.Expression.get;
+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.stop;
+import static com.mapbox.mapboxsdk.style.expressions.Expression.zoom;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleColor;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleOpacity;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleRadius;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleStrokeColor;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.circleStrokeWidth;
+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;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.heatmapWeight;
+
+/**
+ * Test activity showcasing the heatmap layer api.
+ */
+public class HeatmapLayerActivity extends AppCompatActivity {
+
+  private static final String EARTHQUAKE_SOURCE_URL = "https://www.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson";
+  private static final String EARTHQUAKE_SOURCE_ID = "earthquakes";
+  private static final String HEATMAP_LAYER_ID = "earthquakes-heat";
+  private static final String HEATMAP_LAYER_SOURCE = "earthquakes";
+  private static final String CIRCLE_LAYER_ID = "earthquakes-circle";
+
+  private MapView mapView;
+  private MapboxMap mapboxMap;
+
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_heatmaplayer);
+
+    mapView = (MapView) findViewById(R.id.mapView);
+    mapView.onCreate(savedInstanceState);
+    mapView.getMapAsync(map -> {
+      mapboxMap = map;
+      addEarthquakeSource();
+      addHeatmapLayer();
+      addCircleLayer();
+    });
+  }
+
+  private void addEarthquakeSource() {
+    try {
+      mapboxMap.addSource(new GeoJsonSource(EARTHQUAKE_SOURCE_ID, new URL(EARTHQUAKE_SOURCE_URL)));
+    } catch (MalformedURLException malformedUrlException) {
+      Timber.e(malformedUrlException, "That's not an url... ");
+    }
+  }
+
+  private void addHeatmapLayer() {
+    HeatmapLayer layer = new HeatmapLayer(HEATMAP_LAYER_ID, EARTHQUAKE_SOURCE_ID);
+    layer.setMaxZoom(9);
+    layer.setSourceLayer(HEATMAP_LAYER_SOURCE);
+    layer.setProperties(
+
+      // TODO add heatmap color https://github.com/mapbox/mapbox-gl-native/issues/11172
+      // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
+      // Begin color ramp at 0-stop with a 0-transparancy color
+      // to create a blur-like effect.
+      //heatmapColor(),
+
+      // Increase the heatmap weight based on frequency and property magnitude
+      heatmapWeight(
+        interpolate(
+          linear(), get("mag"),
+          stop(0, 0),
+          stop(6, 1)
+        )
+      ),
+
+      // Increase the heatmap color weight weight by zoom level
+      // heatmap-intensity is a multiplier on top of heatmap-weight
+      heatmapIntensity(
+        interpolate(
+          linear(), zoom(),
+          stop(0, 1),
+          stop(9, 3)
+        )
+      ),
+
+      // Adjust the heatmap radius by zoom level
+      heatmapRadius(
+        interpolate(
+          linear(), zoom(),
+          stop(0, 2),
+          stop(9, 20)
+        )
+      ),
+
+      // Transition from heatmap to circle layer by zoom level
+      heatmapOpacity(
+        interpolate(
+          linear(), zoom(),
+          stop(7, 1),
+          stop(9, 0)
+        )
+      )
+    );
+
+    mapboxMap.addLayerAbove(layer, "waterway-label");
+  }
+
+  private void addCircleLayer() {
+    CircleLayer circleLayer = new CircleLayer(CIRCLE_LAYER_ID, EARTHQUAKE_SOURCE_ID);
+    circleLayer.setProperties(
+
+      // Size circle radius by earthquake magnitude and zoom level
+      circleRadius(
+        interpolate(
+          linear(), zoom(),
+          literal(7), interpolate(
+            linear(), get("mag"),
+            stop(1, 1),
+            stop(6, 4)
+          ),
+          literal(16), interpolate(
+            linear(), get("mag"),
+            stop(1, 5),
+            stop(6, 50)
+          )
+        )
+      ),
+
+      // Color circle by earthquake magnitude
+      circleColor(
+        interpolate(
+          linear(), get("mag"),
+          literal(1), rgba(33, 102, 172, 0),
+          literal(2), rgb(103, 169, 207),
+          literal(3), rgb(209, 229, 240),
+          literal(4), rgb(253, 219, 199),
+          literal(5), rgb(239, 138, 98),
+          literal(6), rgb(178, 24, 43)
+        )
+      ),
+
+      // Transition from heatmap to circle layer by zoom level
+      circleOpacity(
+        interpolate(
+          linear(), zoom(),
+          stop(7, 0),
+          stop(8, 1)
+        )
+      ),
+      circleStrokeColor("white"),
+      circleStrokeWidth(1.0f)
+    );
+
+    mapboxMap.addLayerBelow(circleLayer, HEATMAP_LAYER_ID);
+  }
+
+  @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();
+  }
+}
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_heatmaplayer.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_heatmaplayer.xml
new file mode 100644
index 0000000000..23ef9ea336
--- /dev/null
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_heatmaplayer.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+                xmlns:app="http://schemas.android.com/apk/res-auto"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:orientation="vertical">
+
+    <com.mapbox.mapboxsdk.maps.MapView
+        android:id="@id/mapView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:mapbox_styleUrl="@string/mapbox_style_dark"/>
+
+</RelativeLayout>
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/descriptions.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/descriptions.xml
index e867046c80..d17ec20546 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/descriptions.xml
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/descriptions.xml
@@ -70,4 +70,5 @@
     <string name="description_grid_source">Example Custom Geometry Source</string>
     <string name="description_local_glyph">Suzhou using Droid Sans for Chinese glyphs</string>
     <string name="description_hillshade">Example raster-dem source and hillshade layer</string>
+    <string name="description_heatmaplayer">Use HeatmapLayer to visualise earthquakes</string>
 </resources>
diff --git a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/titles.xml b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/titles.xml
index 47fee31c0a..0323d7c428 100644
--- a/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/titles.xml
+++ b/platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/titles.xml
@@ -70,4 +70,5 @@
     <string name="activity_grid_source">Grid Source</string>
     <string name="activity_local_glyph">Local CJK glyph generation</string>
     <string name="activity_hillshade">Hillshade</string>
+    <string name="activity_heatmaplayer">Heatmap layer</string>
 </resources>
\ No newline at end of file
-- 
cgit v1.2.1