From 100c88d6989f87e164ef09b5ff34d389d6007b4b Mon Sep 17 00:00:00 2001 From: Josh Erb Date: Tue, 2 Oct 2018 12:13:32 -0400 Subject: [PATCH 1/3] obj-c setup --- Examples/Examples.h | 1 + Examples/Examples.m | 1 + .../ObjectiveC/Headers/LineGradientExample.h | 9 +++ Examples/ObjectiveC/LineGradientExample.m | 65 +++++++++++++++++++ Examples/Swift/LineGradientExample.swift | 30 +++++++++ 5 files changed, 106 insertions(+) create mode 100644 Examples/ObjectiveC/Headers/LineGradientExample.h create mode 100644 Examples/ObjectiveC/LineGradientExample.m create mode 100644 Examples/Swift/LineGradientExample.swift diff --git a/Examples/Examples.h b/Examples/Examples.h index 30d1c433..120ac4e6 100644 --- a/Examples/Examples.h +++ b/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; diff --git a/Examples/Examples.m b/Examples/Examples.m index 90873494..1435ea55 100644 --- a/Examples/Examples.m +++ b/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"}, diff --git a/Examples/ObjectiveC/Headers/LineGradientExample.h b/Examples/ObjectiveC/Headers/LineGradientExample.h new file mode 100644 index 00000000..36fc403e --- /dev/null +++ b/Examples/ObjectiveC/Headers/LineGradientExample.h @@ -0,0 +1,9 @@ +#import + +NS_ASSUME_NONNULL_BEGIN + +@interface LineGradientExample : UIViewController + +@end + +NS_ASSUME_NONNULL_END diff --git a/Examples/ObjectiveC/LineGradientExample.m b/Examples/ObjectiveC/LineGradientExample.m new file mode 100644 index 00000000..cb9543f2 --- /dev/null +++ b/Examples/ObjectiveC/LineGradientExample.m @@ -0,0 +1,65 @@ +#import "LineGradientExample.h" +@import Mapbox; + +NSString *const MBXExampleLineGradient = @"LineGradientExample"; + +@interface LineGradientExample () + +@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 { + + CLLocationCoordinate2D coordinates[] = { + CLLocationCoordinate2DMake(38.852924, -77.044211), + CLLocationCoordinate2DMake(38.860158, -77.045659), + CLLocationCoordinate2DMake(38.862326, -77.044232), + CLLocationCoordinate2DMake(38.865454, -77.040879), + CLLocationCoordinate2DMake(38.867698, -77.039936), + CLLocationCoordinate2DMake(38.86943, -77.040338), + CLLocationCoordinate2DMake(38.872528, -77.04264), + CLLocationCoordinate2DMake(38.878424, -77.03696), + CLLocationCoordinate2DMake(38.87937, -77.032309), + CLLocationCoordinate2DMake(38.880945, -77.030056), + CLLocationCoordinate2DMake(38.881779, -77.027645), + CLLocationCoordinate2DMake(38.882645, -77.026946), + CLLocationCoordinate2DMake(38.885502, -77.026942), + CLLocationCoordinate2DMake(38.887449, -77.028054), + CLLocationCoordinate2DMake(38.892088, -77.02806), + CLLocationCoordinate2DMake(38.892108, -77.03364), + CLLocationCoordinate2DMake(38.899926, -77.033643) + }; + + NSUInteger numberOfCoordinates = sizeof(coordinates) / sizeof(CLLocationCoordinate2D); + + MGLPolyline *polylineShape = [MGLPolyline polylineWithCoordinates:coordinates count:numberOfCoordinates]; + + MGLShapeSource *polylineSource = [[MGLShapeSource alloc] initWithIdentifier:@"polyline" shape:polylineShape options:nil]; + + [style addSource:polylineSource]; + + MGLLineStyleLayer *polylineStyle = [[MGLLineStyleLayer alloc] initWithIdentifier:@"lineStyle" source:polylineSource]; + + [style addLayer:polylineStyle]; + +} + +@end + diff --git a/Examples/Swift/LineGradientExample.swift b/Examples/Swift/LineGradientExample.swift new file mode 100644 index 00000000..35876fcf --- /dev/null +++ b/Examples/Swift/LineGradientExample.swift @@ -0,0 +1,30 @@ +// +// LineGradientExample.swift +// Examples +// +// Created by Joshua Erb on 10/2/18. +// Copyright © 2018 Mapbox. All rights reserved. +// + +import UIKit + +class LineGradientExample: UIViewController { + + override func viewDidLoad() { + super.viewDidLoad() + + // Do any additional setup after loading the view. + } + + + /* + // MARK: - Navigation + + // In a storyboard-based application, you will often want to do a little preparation before navigation + override func prepare(for segue: UIStoryboardSegue, sender: Any?) { + // Get the new view controller using segue.destination. + // Pass the selected object to the new view controller. + } + */ + +} From 5abf45a72db8ba0f8350c5ddf6b13182ff13d9d4 Mon Sep 17 00:00:00 2001 From: Josh Erb Date: Tue, 2 Oct 2018 12:14:24 -0400 Subject: [PATCH 2/3] Swift boilerplate --- Examples/Swift/LineGradientExample.swift | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/Examples/Swift/LineGradientExample.swift b/Examples/Swift/LineGradientExample.swift index 35876fcf..cce14205 100644 --- a/Examples/Swift/LineGradientExample.swift +++ b/Examples/Swift/LineGradientExample.swift @@ -1,12 +1,7 @@ -// -// LineGradientExample.swift -// Examples -// -// Created by Joshua Erb on 10/2/18. -// Copyright © 2018 Mapbox. All rights reserved. -// - import UIKit +import Mapbox + +@objc(LineGradientExample_Swift) class LineGradientExample: UIViewController { @@ -15,16 +10,5 @@ class LineGradientExample: UIViewController { // Do any additional setup after loading the view. } - - - /* - // MARK: - Navigation - - // In a storyboard-based application, you will often want to do a little preparation before navigation - override func prepare(for segue: UIStoryboardSegue, sender: Any?) { - // Get the new view controller using segue.destination. - // Pass the selected object to the new view controller. - } - */ } From d21b3c32619d4fc4f2692addc58a1d9faa3e0a11 Mon Sep 17 00:00:00 2001 From: Josh Erb Date: Wed, 3 Oct 2018 11:56:09 -0400 Subject: [PATCH 3/3] saving current state of example --- Examples/Files/line-gradient.geojson | 29 ++++++++++++++++ Examples/ObjectiveC/LineGradientExample.m | 41 ++++++++++------------- 2 files changed, 46 insertions(+), 24 deletions(-) create mode 100644 Examples/Files/line-gradient.geojson diff --git a/Examples/Files/line-gradient.geojson b/Examples/Files/line-gradient.geojson new file mode 100644 index 00000000..e3f60a8d --- /dev/null +++ b/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" + } + }] +} diff --git a/Examples/ObjectiveC/LineGradientExample.m b/Examples/ObjectiveC/LineGradientExample.m index cb9543f2..4b228713 100644 --- a/Examples/ObjectiveC/LineGradientExample.m +++ b/Examples/ObjectiveC/LineGradientExample.m @@ -27,35 +27,28 @@ - (void)viewDidLoad { - (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style { - CLLocationCoordinate2D coordinates[] = { - CLLocationCoordinate2DMake(38.852924, -77.044211), - CLLocationCoordinate2DMake(38.860158, -77.045659), - CLLocationCoordinate2DMake(38.862326, -77.044232), - CLLocationCoordinate2DMake(38.865454, -77.040879), - CLLocationCoordinate2DMake(38.867698, -77.039936), - CLLocationCoordinate2DMake(38.86943, -77.040338), - CLLocationCoordinate2DMake(38.872528, -77.04264), - CLLocationCoordinate2DMake(38.878424, -77.03696), - CLLocationCoordinate2DMake(38.87937, -77.032309), - CLLocationCoordinate2DMake(38.880945, -77.030056), - CLLocationCoordinate2DMake(38.881779, -77.027645), - CLLocationCoordinate2DMake(38.882645, -77.026946), - CLLocationCoordinate2DMake(38.885502, -77.026942), - CLLocationCoordinate2DMake(38.887449, -77.028054), - CLLocationCoordinate2DMake(38.892088, -77.02806), - CLLocationCoordinate2DMake(38.892108, -77.03364), - CLLocationCoordinate2DMake(38.899926, -77.033643) - }; + NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"line-gradient" ofType:@"geojson"]]; + MGLShapeSource *source = [[MGLShapeSource alloc] initWithIdentifier:@"line-source" URL:url options:nil]; - NSUInteger numberOfCoordinates = sizeof(coordinates) / sizeof(CLLocationCoordinate2D); - MGLPolyline *polylineShape = [MGLPolyline polylineWithCoordinates:coordinates count:numberOfCoordinates]; + [style addSource:source]; - MGLShapeSource *polylineSource = [[MGLShapeSource alloc] initWithIdentifier:@"polyline" shape:polylineShape options:nil]; + MGLLineStyleLayer *polylineStyle = [[MGLLineStyleLayer alloc] initWithIdentifier:@"lineStyle" source:source]; + polylineStyle.lineWidth = [NSExpression expressionForConstantValue:@14]; + polylineStyle.lineCap = [NSExpression expressionForConstantValue:@"round"]; - [style addSource:polylineSource]; + 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]; - MGLLineStyleLayer *polylineStyle = [[MGLLineStyleLayer alloc] initWithIdentifier:@"lineStyle" source:polylineSource]; + polylineStyle.lineColor = gradientExpression; [style addLayer:polylineStyle];