[WIP] Add Line Gradient Example

Examples/Examples.h

@@ -39,6 +39,7 @@ extern NSString *const MBXExampleHeatmap;
 extern NSString *const MBXExampleImageAnnotation;
 extern NSString *const MBXExampleImageSource;
 extern NSString *const MBXExampleLineAnnotationGeoJSON;
+extern NSString *const MBXExampleLineGradient;
 extern NSString *const MBXExampleLineStyleLayer;
 extern NSString *const MBXExampleLiveData;
 extern NSString *const MBXExampleMultipleImages;

Examples/Examples.m

@@ -77,6 +77,7 @@ + (NSArray *)groups {
                       @"title": @"Add a heatmap layer"
                       },
                     @{@"className": MBXExampleImageSource, @"title": @"Add an image"},
+                    @{@"className": MBXExampleLineGradient, @"title": @"Style with a gradient"},
                     @{@"className": MBXExampleLiveData, @"title": @"Add live data"},
                     @{@"className": MBXExampleMultipleShapes, @"title": @"Add multiple shapes from a single shape source"},
                     @{@"className": MBXExampleMultipleImages, @"title": @"Add multiple images"},

Examples/Files/line-gradient.geojson

@@ -0,0 +1,29 @@
+{
+    "type": "FeatureCollection",
+    "features": [{
+        "type": "Feature",
+        "properties": {"lineMetrics": true},
+        "geometry": {
+            "coordinates": [
+                [-77.044211, 38.852924 ],
+                [-77.045659, 38.860158 ],
+                [-77.044232, 38.862326 ],
+                [-77.040879, 38.865454 ],
+                [-77.039936, 38.867698 ],
+                [-77.040338, 38.86943 ],
+                [-77.04264, 38.872528 ],
+                [-77.03696, 38.878424 ],
+                [-77.032309, 38.87937 ],
+                [-77.030056, 38.880945 ],
+                [-77.027645, 38.881779 ],
+                [-77.026946, 38.882645 ],
+                [-77.026942, 38.885502 ],
+                [-77.028054, 38.887449 ],
+                [-77.02806, 38.892088 ],
+                [-77.03364, 38.892108 ],
+                [-77.033643, 38.899926 ]
+            ],
+            "type": "LineString"
+        }
+    }]
+}

Examples/ObjectiveC/Headers/LineGradientExample.h

@@ -0,0 +1,9 @@
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface LineGradientExample : UIViewController
+
+@end
+
+NS_ASSUME_NONNULL_END

Examples/ObjectiveC/LineGradientExample.m

@@ -0,0 +1,58 @@
+#import "LineGradientExample.h"
+@import Mapbox;
+
+NSString *const MBXExampleLineGradient = @"LineGradientExample";
+
+@interface LineGradientExample ()<MGLMapViewDelegate>
+
+@end
+
+@implementation LineGradientExample
+
+- (void)viewDidLoad {
+    [super viewDidLoad];
+    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle lightStyleURL]];
+
+    mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+
+    mapView.delegate = self;
+
+    // Set the map’s center coordinate and zoom level.
+    [mapView setCenterCoordinate:CLLocationCoordinate2DMake(38.875, -77.035)
+                       zoomLevel:12
+                        animated:NO];
+
+    [self.view addSubview:mapView];
+}
+
+- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
+
+    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"line-gradient" ofType:@"geojson"]];
+    MGLShapeSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"line-source" URL:url options:nil];
+
+
+    [style addSource:source];
+
+    MGLLineStyleLayer *polylineStyle = [[MGLLineStyleLayer alloc] initWithIdentifier:@"lineStyle" source:source];
+    polylineStyle.lineWidth = [NSExpression expressionForConstantValue:@14];
+    polylineStyle.lineCap = [NSExpression expressionForConstantValue:@"round"];
+
+    NSDictionary *stops = @{
+                            @0: UIColor.blueColor,
+                            @0.1: UIColor.purpleColor,
+                            @0.3: UIColor.cyanColor,
+                            @0.5: UIColor.greenColor,
+                            @0.7: UIColor.yellowColor,
+                            @1: UIColor.redColor
+                            };
+
+    NSExpression *gradientExpression = [NSExpression expressionWithFormat:@"mgl_interpolate:withCurveType:parameters:stops:($lineProgress, 'linear', nil, %@)", stops];
+
+    polylineStyle.lineColor = gradientExpression;
+
+    [style addLayer:polylineStyle];
+
+}
+
+@end
+

Examples/Swift/LineGradientExample.swift

@@ -0,0 +1,14 @@
+import UIKit
+import Mapbox
+
+@objc(LineGradientExample_Swift)
+
+class LineGradientExample: UIViewController {
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        // Do any additional setup after loading the view.
+    }
+
+}