[core] Add line-gradient property

cmake/core-files.txt

@@ -316,6 +316,8 @@ src/mbgl/shaders/hillshade_prepare.cpp
 src/mbgl/shaders/hillshade_prepare.hpp
 src/mbgl/shaders/line.cpp
 src/mbgl/shaders/line.hpp
+src/mbgl/shaders/line_gradient.cpp
+src/mbgl/shaders/line_gradient.hpp
 src/mbgl/shaders/line_pattern.cpp
 src/mbgl/shaders/line_pattern.hpp
 src/mbgl/shaders/line_sdf.cpp

include/mbgl/style/layers/layer.hpp.ejs

@@ -7,7 +7,7 @@
 
 #pragma once
 
-<% if (type === 'heatmap') { -%>
+<% if (type === 'heatmap' || type === 'line') { -%>
 #include <mbgl/style/color_ramp_property_value.hpp>
 <% } -%>
 #include <mbgl/style/layer.hpp>

include/mbgl/style/layers/line_layer.hpp

@@ -2,6 +2,7 @@
 
 #pragma once
 
+#include <mbgl/style/color_ramp_property_value.hpp>
 #include <mbgl/style/layer.hpp>
 #include <mbgl/style/filter.hpp>
 #include <mbgl/style/property_value.hpp>
@@ -119,6 +120,12 @@ class LineLayer : public Layer {
     void setLinePatternTransition(const TransitionOptions&);
     TransitionOptions getLinePatternTransition() const;
 
+    static ColorRampPropertyValue getDefaultLineGradient();
+    ColorRampPropertyValue getLineGradient() const;
+    void setLineGradient(ColorRampPropertyValue);
+    void setLineGradientTransition(const TransitionOptions&);
+    TransitionOptions getLineGradientTransition() const;
+
     // Private implementation
 
     class Impl;

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/expressions/Expression.java

@@ -1461,6 +1461,32 @@ public static Expression heatmapDensity() {
     return new Expression("heatmap-density");
   }
 
+  /**
+   * Gets the progress along a gradient line. Can only be used in the line-gradient property.
+   * <p>
+   * Example usage:
+   * </p>
+   * <pre>
+   * {@code
+   * LineLayer layer = new LineLayer("layer-id", "source-id");
+   * layer.setProperties(
+   *     lineGradient(interpolate(
+   *         linear(), lineProgress(),
+   *         stop(0f, rgb(0, 0, 255)),
+   *         stop(0.5f, rgb(0, 255, 0)),
+   *         stop(1f, rgb(255, 0, 0)))
+   *     )
+   * )
+   * }
+   * </pre>
+   *
+   * @return expression
+   * @see <a href="https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-line-progress">Style specification</a>
+   */
+  public static Expression lineProgress() {
+    return new Expression("line-progress");
+  }
+
   /**
    * Retrieves an item from an array.
    *

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/layers/LineLayer.java

@@ -478,6 +478,34 @@ public void setLinePatternTransition(TransitionOptions options) {
     nativeSetLinePatternTransition(options.getDuration(), options.getDelay());
   }
 
+  /**
+   * Get the LineGradient property
+   *
+   * @return property wrapper value around String
+   */
+  @SuppressWarnings("unchecked")
+  public PropertyValue<String> getLineGradient() {
+    checkThread();
+    return (PropertyValue<String>) new PropertyValue("line-gradient", nativeGetLineGradient());
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @return int representation of a rgba string color
+   * @throws RuntimeException thrown if property isn't a value
+   */
+  @ColorInt
+  public int getLineGradientAsInt() {
+    checkThread();
+    PropertyValue<String> value = getLineGradient();
+    if (value.isValue()) {
+      return rgbaToColor(value.getValue());
+    } else {
+      throw new RuntimeException("line-gradient was set as a Function");
+    }
+  }
+
   @Keep
   private native Object nativeGetLineCap();
 
@@ -574,6 +602,9 @@ public void setLinePatternTransition(TransitionOptions options) {
   @Keep
   private native void nativeSetLinePatternTransition(long duration, long delay);
 
+  @Keep
+  private native Object nativeGetLineGradient();
+
   @Override
   @Keep
   protected native void finalize() throws Throwable;

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/layers/PropertyFactory.java

@@ -394,6 +394,36 @@ public static PropertyValue<Expression> linePattern(Expression expression) {
     return new PaintPropertyValue<>("line-pattern", expression);
   }
 
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param value a int color value
+   * @return property wrapper around String color
+   */
+  public static PropertyValue<String> lineGradient(@ColorInt int value) {
+    return new PaintPropertyValue<>("line-gradient", colorToRgbaString(value));
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param value a String value
+   * @return property wrapper around String
+   */
+  public static PropertyValue<String> lineGradient(String value) {
+    return new PaintPropertyValue<>("line-gradient", value);
+  }
+
+  /**
+   * Defines a gradient with which to color a line feature. Can only be used with GeoJSON sources that specify `"lineMetrics": true`.
+   *
+   * @param expression an expression statement
+   * @return property wrapper around an expression statement
+   */
+  public static PropertyValue<Expression> lineGradient(Expression expression) {
+    return new PaintPropertyValue<>("line-gradient", expression);
+  }
+
   /**
    * The opacity at which the icon will be drawn.
    *

platform/android/MapboxGLAndroidSDK/src/main/java/com/mapbox/mapboxsdk/style/sources/GeoJsonOptions.java

@@ -44,6 +44,17 @@ public GeoJsonOptions withBuffer(int buffer) {
     return this;
   }
 
+  /**
+   * Initialises whether to calculate line distance metrics.
+   *
+   * @param lineMetrics true to calculate line distance metrics.
+   * @return the current instance for chaining
+   */
+  public GeoJsonOptions withLineMetrics(boolean lineMetrics) {
+    this.put("lineMetrics", lineMetrics);
+    return this;
+  }
+
   /**
    * Douglas-Peucker simplification tolerance (higher means simpler geometries and faster performance).
    *
@@ -88,5 +99,4 @@ public GeoJsonOptions withClusterRadius(int clusterRadius) {
     this.put("clusterRadius", clusterRadius);
     return this;
   }
-
 }

platform/android/MapboxGLAndroidSDKTestApp/src/androidTest/java/com/mapbox/mapboxsdk/testapp/style/layer.junit.ejs

@@ -118,7 +118,7 @@ public class <%- camelize(type) %>LayerTest extends BaseActivityTest {
 
 <% } -%>
 <% for (const property of properties) { -%>
-<% if (property.name != 'heatmap-color') { -%>
+<% if (property['property-type'] !== 'color-ramp') { -%>
 <% if (property.transition) { -%>
 
   @Test

platform/android/MapboxGLAndroidSDKTestApp/src/main/AndroidManifest.xml

@@ -432,6 +432,17 @@
                 android:name="android.support.PARENT_ACTIVITY"
                 android:value=".activity.FeatureOverviewActivity" />
         </activity>
+        <activity
+                android:name=".activity.style.GradientLineActivity"
+                android:description="@string/description_gradient_line"
+                android:label="@string/activity_gradient_line">
+            <meta-data
+                    android:name="@string/category"
+                    android:value="@string/category_style" />
+            <meta-data
+                    android:name="android.support.PARENT_ACTIVITY"
+                    android:value=".activity.FeatureOverviewActivity" />
+        </activity>
         <activity
             android:name=".activity.style.DataDrivenStyleActivity"
             android:description="@string/description_data_driven_style"

platform/android/MapboxGLAndroidSDKTestApp/src/main/java/com/mapbox/mapboxsdk/testapp/activity/style/GradientLineActivity.java

@@ -0,0 +1,117 @@
+package com.mapbox.mapboxsdk.testapp.activity.style;
+
+import android.graphics.Color;
+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.maps.OnMapReadyCallback;
+import com.mapbox.mapboxsdk.style.layers.LineLayer;
+import com.mapbox.mapboxsdk.style.sources.GeoJsonOptions;
+import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
+import com.mapbox.mapboxsdk.testapp.R;
+import com.mapbox.mapboxsdk.testapp.utils.ResourceUtils;
+import timber.log.Timber;
+
+import java.io.IOException;
+
+import static com.mapbox.mapboxsdk.style.expressions.Expression.interpolate;
+import static com.mapbox.mapboxsdk.style.expressions.Expression.lineProgress;
+import static com.mapbox.mapboxsdk.style.expressions.Expression.linear;
+import static com.mapbox.mapboxsdk.style.expressions.Expression.rgb;
+import static com.mapbox.mapboxsdk.style.expressions.Expression.stop;
+import static com.mapbox.mapboxsdk.style.layers.Property.LINE_CAP_ROUND;
+import static com.mapbox.mapboxsdk.style.layers.Property.LINE_JOIN_ROUND;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineCap;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineColor;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineGradient;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineJoin;
+import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineWidth;
+
+/**
+ * Activity showcasing applying a gradient coloring to a line layer.
+ */
+public class GradientLineActivity extends AppCompatActivity implements OnMapReadyCallback {
+
+  public static final String LINE_SOURCE = "gradient";
+  private MapboxMap mapboxMap;
+  private MapView mapView;
+
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_gradient_line);
+
+    mapView = findViewById(R.id.mapView);
+    mapView.onCreate(savedInstanceState);
+    mapView.getMapAsync(this);
+  }
+
+  @Override
+  public void onMapReady(MapboxMap map) {
+    this.mapboxMap = map;
+
+    try {
+      String geoJson = ResourceUtils.readRawResource(GradientLineActivity.this, R.raw.test_line_gradient_feature);
+      mapboxMap.addSource(new GeoJsonSource(LINE_SOURCE, geoJson, new GeoJsonOptions().withLineMetrics(true)));
+      mapboxMap.addLayer(new LineLayer("gradient", LINE_SOURCE)
+        .withProperties(
+          lineGradient(interpolate(
+            linear(), lineProgress(),
+            stop(0f, rgb(0, 0, 255)),
+            stop(0.5f, rgb(0, 255, 0)),
+            stop(1f, rgb(255, 0, 0)))
+          ),
+          lineColor(Color.RED),
+          lineWidth(10.0f),
+          lineCap(LINE_CAP_ROUND),
+          lineJoin(LINE_JOIN_ROUND)
+        )
+      );
+    } catch (IOException exception) {
+      Timber.e(exception);
+    }
+  }
+
+  @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();
+  }
+}

platform/android/MapboxGLAndroidSDKTestApp/src/main/res/layout/activity_gradient_line.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.mapbox.mapboxsdk.maps.MapView
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
+        android:id="@id/mapView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        app:mapbox_cameraTargetLat="45.38301927899065"
+        app:mapbox_cameraTargetLng="8.63525390625"
+        app:mapbox_cameraZoom="7"
+        app:mapbox_styleUrl="@string/mapbox_style_mapbox_streets"/>

platform/android/MapboxGLAndroidSDKTestApp/src/main/res/raw/test_line_gradient_feature.geojson

@@ -0,0 +1,38 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            9.38507080078125,
+            46.16936992120204
+          ],
+          [
+            9.07196044921875,
+            45.81540082150529
+          ],
+          [
+            9.3878173828125,
+            45.85271700071619
+          ],
+          [
+            9.2010498046875,
+            45.46783598133375
+          ],
+          [
+            8.876953125,
+            44.422011314236634
+          ],
+          [
+            7.635498046875,
+            45.07352060670971
+          ]
+        ]
+      }
+    }
+  ]
+}

platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/descriptions.xml

@@ -29,6 +29,7 @@
     <string name="description_dynamic_info_window_adapter">Learn how to create a dynamic custom InfoWindow</string>
     <string name="description_viewpager">Use SupportMapFragments in a ViewPager</string>
     <string name="description_runtime_style">Adopt the map style on the fly</string>
+    <string name="description_gradient_line">Show a gradient line layer from a geojson source</string>
     <string name="description_data_driven_style">Use functions to change the map appearance</string>
     <string name="description_symbol_layer">Manipulate symbols at runtime</string>
     <string name="description_custom_sprite">Use a custom sprite in a Symbol Layer</string>

platform/android/MapboxGLAndroidSDKTestApp/src/main/res/values/titles.xml

@@ -30,6 +30,7 @@
     <string name="activity_minmax_zoom">Min/Max Zoom</string>
     <string name="activity_viewpager">ViewPager</string>
     <string name="activity_runtime_style">Runtime Style</string>
+    <string name="activity_gradient_line">Gradient line layer</string>
     <string name="activity_data_driven_style">Data Driven Style</string>
     <string name="activity_circle_layer">Circle layer</string>
     <string name="activity_style_file">Local Style file</string>