New Gradient Line Example

Examples.xcodeproj/project.pbxproj

@@ -87,6 +87,9 @@
 		580F709E252D11AF000512BE /* ManageOfflineRegionsExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 580F709D252D11AF000512BE /* ManageOfflineRegionsExample.m */; };
 		583BAE082481AFF50079BB57 /* InsetMapExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 583BAE072481AFF50079BB57 /* InsetMapExample.m */; };
 		583BAE0B2481B1580079BB57 /* InsetMapExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 583BAE0A2481B1580079BB57 /* InsetMapExample.swift */; };
+		58D43A9B25B9C9D600A29650 /* LineGradientExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58D43A9A25B9C9D600A29650 /* LineGradientExample.swift */; };
+		58D43AA525B9CA1500A29650 /* LineGradientExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 58D43AA425B9CA1500A29650 /* LineGradientExample.m */; };
+		58D43ACD25B9CE1A00A29650 /* iOSLineGeoJSON.geojson in Resources */ = {isa = PBXBuildFile; fileRef = 58D43AAA25B9CA6200A29650 /* iOSLineGeoJSON.geojson */; };
 		646B62971DEF6DAF000AA523 /* ShowHideLayerExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 646B62961DEF6DAF000AA523 /* ShowHideLayerExample.swift */; };
 		646B629C1DEF6DF1000AA523 /* ShowHideLayerExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 646B629B1DEF6DF1000AA523 /* ShowHideLayerExample.m */; };
 		646B62A61DEF7121000AA523 /* AnimatedLineExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 646B62A51DEF7121000AA523 /* AnimatedLineExample.m */; };
@@ -288,6 +291,10 @@
 		583BAE072481AFF50079BB57 /* InsetMapExample.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = InsetMapExample.m; sourceTree = "<group>"; };
 		583BAE092481B0220079BB57 /* InsetMapExample.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = InsetMapExample.h; sourceTree = "<group>"; };
 		583BAE0A2481B1580079BB57 /* InsetMapExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InsetMapExample.swift; sourceTree = "<group>"; };
+		58D43A9925B9C93800A29650 /* LineGradientExample.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = LineGradientExample.h; sourceTree = "<group>"; };
+		58D43A9A25B9C9D600A29650 /* LineGradientExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineGradientExample.swift; sourceTree = "<group>"; };
+		58D43AA425B9CA1500A29650 /* LineGradientExample.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = LineGradientExample.m; sourceTree = "<group>"; };
+		58D43AAA25B9CA6200A29650 /* iOSLineGeoJSON.geojson */ = {isa = PBXFileReference; lastKnownFileType = text; path = iOSLineGeoJSON.geojson; sourceTree = "<group>"; };
 		646B62961DEF6DAF000AA523 /* ShowHideLayerExample.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ShowHideLayerExample.swift; sourceTree = "<group>"; };
 		646B629B1DEF6DF1000AA523 /* ShowHideLayerExample.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ShowHideLayerExample.m; sourceTree = "<group>"; };
 		646B629E1DEF6DFD000AA523 /* ShowHideLayerExample.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ShowHideLayerExample.h; sourceTree = "<group>"; };
@@ -480,6 +487,7 @@
 				646B62AF1DEF7161000AA523 /* AnimatedLineExample.swift */,
 				646B62AD1DEF7155000AA523 /* LineStyleLayerExample.swift */,
 				055ABCC21EFB14AE0063BACA /* PolygonPatternExample.swift */,
+				58D43A9A25B9C9D600A29650 /* LineGradientExample.swift */,
 			);
 			name = "Lines and polygons";
 			sourceTree = "<group>";
@@ -579,6 +587,7 @@
 				646B62A51DEF7121000AA523 /* AnimatedLineExample.m */,
 				05FA539F1FE2FA1E001F3D7D /* LineStyleLayerExample.m */,
 				05FA539D1FE2FA1D001F3D7D /* PolygonPatternExample.m */,
+				58D43AA425B9CA1500A29650 /* LineGradientExample.m */,
 			);
 			name = "Lines and polygons";
 			sourceTree = "<group>";
@@ -812,6 +821,7 @@
 				1F07016422557B0B0045E061 /* icons.xcassets */,
 				1F07015622530BDF0045E061 /* text-format.json */,
 				075AFB7723393DBA0091FF0A /* example.geojson */,
+				58D43AAA25B9CA6200A29650 /* iOSLineGeoJSON.geojson */,
 			);
 			path = Files;
 			sourceTree = "<group>";
@@ -864,6 +874,7 @@
 				583BAE092481B0220079BB57 /* InsetMapExample.h */,
 				C67C17E12507FC0C004112DE /* LocationPrivacyExample.h */,
 				580F7089252D10F0000512BE /* ManageOfflineRegionsExample.h */,
+				58D43A9925B9C93800A29650 /* LineGradientExample.h */,
 			);
 			path = Headers;
 			sourceTree = "<group>";
@@ -1113,6 +1124,7 @@
 				DD5939E61E6778480009BEB2 /* clustering.xcassets in Resources */,
 				9619629C1C581700002D3DAB /* Assets.xcassets in Resources */,
 				1F07016522557B0B0045E061 /* icons.xcassets in Resources */,
+				58D43ACD25B9CE1A00A29650 /* iOSLineGeoJSON.geojson in Resources */,
 				075AFB7823393DBA0091FF0A /* example.geojson in Resources */,
 				64BBDAF01DF22D9600BB705D /* third_party_vector_style.json in Resources */,
 				961962CF1C581FBC002D3DAB /* Main.storyboard in Resources */,
@@ -1218,17 +1230,11 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Examples/Pods-Examples-frameworks.sh",
 				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/Mapbox.framework",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/Mapbox.framework.dSYM",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/8F3E82C3-52DF-39E5-809D-3389B6CBCAD4.bcsymbolmap",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/0DC8DAD8-C6D7-343B-ACBF-79B48068D7CC.bcsymbolmap",
 				"${BUILT_PRODUCTS_DIR}/MapboxMobileEvents/MapboxMobileEvents.framework",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Mapbox.framework",
-				"${DWARF_DSYM_FOLDER_PATH}/Mapbox.framework.dSYM",
-				"${BUILT_PRODUCTS_DIR}/8F3E82C3-52DF-39E5-809D-3389B6CBCAD4.bcsymbolmap",
-				"${BUILT_PRODUCTS_DIR}/0DC8DAD8-C6D7-343B-ACBF-79B48068D7CC.bcsymbolmap",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MapboxMobileEvents.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -1259,17 +1265,11 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-DocsCode/Pods-DocsCode-frameworks.sh",
 				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/Mapbox.framework",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/Mapbox.framework.dSYM",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/8F3E82C3-52DF-39E5-809D-3389B6CBCAD4.bcsymbolmap",
-				"${PODS_ROOT}/Mapbox-iOS-SDK/dynamic/0DC8DAD8-C6D7-343B-ACBF-79B48068D7CC.bcsymbolmap",
 				"${BUILT_PRODUCTS_DIR}/MapboxMobileEvents/MapboxMobileEvents.framework",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/Mapbox.framework",
-				"${DWARF_DSYM_FOLDER_PATH}/Mapbox.framework.dSYM",
-				"${BUILT_PRODUCTS_DIR}/8F3E82C3-52DF-39E5-809D-3389B6CBCAD4.bcsymbolmap",
-				"${BUILT_PRODUCTS_DIR}/0DC8DAD8-C6D7-343B-ACBF-79B48068D7CC.bcsymbolmap",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MapboxMobileEvents.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -1429,10 +1429,12 @@
 				DDF943291E5DE63300545D0F /* ClusteringExample.m in Sources */,
 				3E44BA58203B54260072DE4B /* MultipleImagesExample.m in Sources */,
 				3EBCD7171DC28240001E342F /* DefaultCalloutExample.swift in Sources */,
+				58D43A9B25B9C9D600A29650 /* LineGradientExample.swift in Sources */,
 				64BBDAFD1DF24DEB00BB705D /* WebAPIDataExample.m in Sources */,
 				055ABCC31EFB14AE0063BACA /* PolygonPatternExample.swift in Sources */,
 				583BAE0B2481B1580079BB57 /* InsetMapExample.swift in Sources */,
 				646B62AE1DEF7155000AA523 /* LineStyleLayerExample.swift in Sources */,
+				58D43AA525B9CA1500A29650 /* LineGradientExample.m in Sources */,
 				3EBCD71F1DC28240001E342F /* DefaultStylesExample.swift in Sources */,
 				DD5939E41E6639BA0009BEB2 /* ClusteringExample.swift in Sources */,
 				3E22EF4F1F87F10C00605203 /* ImageSourceExample.swift in Sources */,

Examples/Examples.h

@@ -33,6 +33,7 @@ extern NSString *const MBXExampleDefaultStyles;
 extern NSString *const MBXExampleDraggableAnnotationView;
 extern NSString *const MBXExampleFeatureSelection;
 extern NSString *const MBXExampleFormattingExpression;
+extern NSString *const MBXExampleLineGradient;
 extern NSString *const MBXExampleHeatmap;
 extern NSString *const MBXExampleImageSource;
 extern NSString *const MBXExampleInsetMap;

Examples/Examples.m

@@ -49,6 +49,7 @@ + (NSArray *)groups {
                     @{@"className": MBXExamplePolygonPattern, @"title": @"Add a pattern to a polygon"},
                     @{@"className": MBXExampleLineStyleLayer, @"title": @"Add a line style layer from GeoJSON"},
                     @{@"className": MBXExampleAnimatedLine, @"title": @"Animate a line"},
+                    @{@"className": MBXExampleLineGradient, @"title": @"Create a line with a color-changing gradient"},
             ]
         },
         @{

Examples/Files/iOSLineGeoJSON.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,5 @@
+#import <UIKit/UIKit.h>
+
+@interface LineGradientExample : UIViewController
+
+@end

Examples/ObjectiveC/LineGradientExample.m

@@ -0,0 +1,75 @@
+#import "LineGradientExample.h"
+@import Mapbox;
+@interface LineGradientExample () <MGLMapViewDelegate>
+@property (nonatomic) MGLMapView *mapView;
+@end
+
+NSString *const MBXExampleLineGradient = @"LineGradientExample";
+
+@implementation LineGradientExample
+
+- (void)viewDidLoad {
+    [super viewDidLoad];
+
+    self.mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle lightStyleURL]];
+    self.mapView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+
+    [self.mapView setCenterCoordinate:CLLocationCoordinate2DMake(38.875, -77.035)
+                            zoomLevel:12
+                             animated:NO];
+
+
+    [self.view addSubview:self.mapView];
+
+    self.mapView.delegate = self;
+}
+
+// Wait until the map is loaded before adding line layer to the map.
+- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
+    [self loadGeoJSON];
+}
+
+- (void)loadGeoJSON {
+    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
+        NSString *path = [[NSBundle mainBundle] pathForResource:@"iOSLineGeoJSON" ofType:@"geojson"];
+        NSData *jsonData = [NSData dataWithContentsOfFile:path];
+        dispatch_async(dispatch_get_main_queue(), ^{
+            [self drawPolyline:jsonData];
+        });
+    });
+}
+
+- (void)drawPolyline:(NSData *)geoJson {
+    // Add our GeoJSON data to the map as an MGLShapeSource.
+    // We can then reference this data from an MGLStyleLayer.
+    MGLShape *shape = [MGLShape shapeWithData:geoJson encoding:NSUTF8StringEncoding error:nil];
+    MGLSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"polyline" shape:shape options: @{MGLShapeSourceOptionLineDistanceMetrics:@YES}];
+    [self.mapView.style addSource:source];
+
+    // Create new layer for the line.
+    MGLLineStyleLayer *layer = [[MGLLineStyleLayer alloc] initWithIdentifier:@"polyline" source:source];
+
+    // Set the line join and cap to a rounded end.
+    layer.lineJoin = [NSExpression expressionForConstantValue:[NSValue valueWithMGLLineJoin:MGLLineJoinRound]];
+    layer.lineCap = [NSExpression expressionForConstantValue:[NSValue valueWithMGLLineCap:MGLLineCapRound]];
+
+    NSDictionary *stops = @{
+        @0: UIColor.blueColor,
+        @0.1: UIColor.purpleColor,
+        @0.3: UIColor.cyanColor,
+        @0.5: UIColor.greenColor,
+        @0.7: UIColor.yellowColor,
+        @1: UIColor.redColor
+    };
+
+
+    // Set the line color to a gradient
+    layer.lineGradient = [NSExpression expressionWithFormat: @"mgl_interpolate:withCurveType:parameters:stops:($lineProgress, 'linear', nil, %@)", stops];
+
+    // Use `NSExpression` to allow the appearance of your gradient to change and become more detailed with the map’s zoom level
+    layer.lineWidth = [NSExpression expressionWithFormat:@"mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, 'linear', nil, %@)",
+                       @{@14: @10, @18: @20}];
+    [self.mapView.style addLayer:layer];
+
+}
+@end

Examples/Swift/LineGradientExample.swift

@@ -0,0 +1,63 @@
+import UIKit
+import Mapbox
+@objc(LineGradientExample_Swift)
+
+class LineGradientExample_Swift: UIViewController, MGLMapViewDelegate {
+
+    var mapView: MGLMapView!
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        // Do any additional setup after loading the view.
+        mapView = MGLMapView(frame: view.bounds)
+        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        mapView.styleURL = MGLStyle.lightStyleURL
+        mapView.delegate = self
+        view.addSubview(mapView)
+        mapView.setCenter(CLLocationCoordinate2D(latitude: 38.875, longitude: -77.035), zoomLevel: 12, animated: false)
+    }
+
+    func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
+        drawPolyline()
+    }
+
+    func drawPolyline() {
+        // Since we know this file exists within this project, we'll force unwrap its value.
+        // If this data was coming from an external server, we would want to perform
+        // proper error handling for a web request/response.
+        let url = URL(fileURLWithPath: Bundle.main.path(forResource: "iOSLineGeoJSON", ofType: "geojson")!)
+        guard let jsonData = try? Data(contentsOf: url) else {
+            preconditionFailure("Failed to parse GeoJSON file")
+        }
+        // Add our GeoJSON data to the map as an MGLShapeSource.
+        // We can then reference this data from an MGLStyleLayer.
+        // MGLMapView.style is optional, so you must guard against it not being set.
+        guard let style = self.mapView.style else { return }
+        guard let shapeFromGeoJSON = try? MGLShape(data: jsonData, encoding: String.Encoding.utf8.rawValue) else {
+            fatalError("Could not generate MGLShape")
+        }
+        let source = MGLShapeSource(identifier: "polyline", shape: shapeFromGeoJSON, options: [MGLShapeSourceOption.lineDistanceMetrics: true])
+        style.addSource(source)
+        // Create a new style layer for the line which will determine the line's styling properties.
+        let layer = MGLLineStyleLayer(identifier: "polyline", source: source)
+        // Set the line join and cap to a rounded end.
+        layer.lineJoin = NSExpression(forConstantValue: "round")
+        layer.lineCap = NSExpression(forConstantValue: "round")
+
+        let stops = [0: UIColor.blue,
+                     0.1: UIColor.purple,
+                     0.3: UIColor.cyan,
+                     0.5: UIColor.green,
+                     0.7: UIColor.yellow,
+                     1: UIColor.red]
+
+        // Set the line color to a gradient
+        layer.lineGradient = NSExpression(format: "mgl_interpolate:withCurveType:parameters:stops:($lineProgress, 'linear', nil, %@)", stops)
+
+        // Use `NSExpression` to allow the appearance of your gradient to change and become more detailed with the map’s zoom level
+        layer.lineWidth = NSExpression(format: "mgl_interpolate:withCurveType:parameters:stops:($zoomLevel, 'linear', nil, %@)",
+                                       [14: 10, 18: 20])
+
+        style.addLayer(layer)
+    }
+}

Podfile.lock

@@ -21,4 +21,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3fb0eea64d7fe606fd4edb9f5b121e174bebc01a
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.10.0