Extrusions example (#86)

Author: jmkiley

Examples.xcodeproj/project.pbxproj

@@ -15,6 +15,8 @@
 		07F53B851E00D02100B58DB3 /* AnnotationViewMultipleExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 07F53B841E00D02100B58DB3 /* AnnotationViewMultipleExample.m */; };
 		1F1F84751E538ABB00332CC3 /* BlockingGesturesDelegateExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 1F1F84741E538ABB00332CC3 /* BlockingGesturesDelegateExample.m */; };
 		1F1F84771E53A3B700332CC3 /* BlockingGesturesDelegateExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1F1F84761E53A3B700332CC3 /* BlockingGesturesDelegateExample.swift */; };
+		3E085B801EC526C500163C99 /* ExtrusionsExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3E085B7F1EC526C500163C99 /* ExtrusionsExample.swift */; };
+		3E085B831EC526E500163C99 /* ExtrusionsExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 3E085B821EC526E500163C99 /* ExtrusionsExample.m */; };
 		3E3BFAD91E81D7A300D0BEA1 /* DDSLayerSelectionExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3E3BFAD81E81D7A300D0BEA1 /* DDSLayerSelectionExample.swift */; };
 		3E3BFADC1E81D7BB00D0BEA1 /* DDSLayerSelectionExample.m in Sources */ = {isa = PBXBuildFile; fileRef = 3E3BFADB1E81D7BB00D0BEA1 /* DDSLayerSelectionExample.m */; };
 		3EBCD7161DC28240001E342F /* AnnotationViewExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3EBCD7021DC28240001E342F /* AnnotationViewExample.swift */; };
@@ -146,6 +148,9 @@
 		1F1F84741E538ABB00332CC3 /* BlockingGesturesDelegateExample.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlockingGesturesDelegateExample.m; sourceTree = "<group>"; };
 		1F1F84761E53A3B700332CC3 /* BlockingGesturesDelegateExample.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BlockingGesturesDelegateExample.swift; sourceTree = "<group>"; };
 		29A0D7C8DCD539DCA5DA1BAC /* Pods-Examples.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Examples.release.xcconfig"; path = "Pods/Target Support Files/Pods-Examples/Pods-Examples.release.xcconfig"; sourceTree = "<group>"; };
+		3E085B7F1EC526C500163C99 /* ExtrusionsExample.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ExtrusionsExample.swift; sourceTree = "<group>"; };
+		3E085B811EC526E500163C99 /* ExtrusionsExample.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = ExtrusionsExample.h; sourceTree = "<group>"; };
+		3E085B821EC526E500163C99 /* ExtrusionsExample.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = ExtrusionsExample.m; sourceTree = "<group>"; };
 		3E3BFAD81E81D7A300D0BEA1 /* DDSLayerSelectionExample.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DDSLayerSelectionExample.swift; sourceTree = "<group>"; };
 		3E3BFADA1E81D7BB00D0BEA1 /* DDSLayerSelectionExample.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = DDSLayerSelectionExample.h; sourceTree = "<group>"; };
 		3E3BFADB1E81D7BB00D0BEA1 /* DDSLayerSelectionExample.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = DDSLayerSelectionExample.m; sourceTree = "<group>"; };
@@ -330,8 +335,7 @@
 				968247191C5C115000494AB8 /* DrawingAGeoJSONLineExample.m */,
 				9682470E1C5BF12700494AB8 /* DrawingAMarkerExample.m */,
 				9682471F1C5C1C0400494AB8 /* DrawingAPolygonExample.m */,
-				968247291C5C1FF800494AB8 /* PointConversionExample.m */,
-				3EC11D241EA8405A001AAAB8 /* PointHotspotExample.m */,
+				3E085B821EC526E500163C99 /* ExtrusionsExample.m */,
 				646B62A31DEF7115000AA523 /* RuntimeAddLineExample.m */,
 				646B62A51DEF7121000AA523 /* RuntimeAnimateLineExample.m */,
 				646B62BC1DEF965A000AA523 /* RuntimeCircleStylesExample.m */,
@@ -373,6 +377,7 @@
 				3EBCD70E1DC28240001E342F /* DrawingAGeoJSONLineExample.swift */,
 				3EBCD70F1DC28240001E342F /* DrawingAMarkerExample.swift */,
 				3EBCD7101DC28240001E342F /* DrawingAPolygonExample.swift */,
+				3E085B7F1EC526C500163C99 /* ExtrusionsExample.swift */,
 				3EBCD7111DC28240001E342F /* OfflinePackExample.swift */,
 				3EBCD7121DC28240001E342F /* PointConversionExample.swift */,
 				3EC11D261EA84091001AAAB8 /* PointHotspotExample.swift */,
@@ -502,6 +507,7 @@
 				968247181C5C115000494AB8 /* DrawingAGeoJSONLineExample.h */,
 				9682470D1C5BF12700494AB8 /* DrawingAMarkerExample.h */,
 				9682471E1C5C1C0400494AB8 /* DrawingAPolygonExample.h */,
+				3E085B811EC526E500163C99 /* ExtrusionsExample.h */,
 				96115A661CAD4E1C000963B8 /* OfflinePackExample.h */,
 				968247281C5C1FF800494AB8 /* PointConversionExample.h */,
 				3EC11D231EA8405A001AAAB8 /* PointHotspotExample.h */,
@@ -891,6 +897,7 @@
 				968247201C5C1C0400494AB8 /* DrawingAPolygonExample.m in Sources */,
 				3EBCD7221DC28240001E342F /* DrawingAGeoJSONLineExample.swift in Sources */,
 				96A2A1D21C8CA74B0059441E /* CustomCalloutView.m in Sources */,
+				3E085B831EC526E500163C99 /* ExtrusionsExample.m in Sources */,
 				64BBDAF61DF232FD00BB705D /* SelectFeatureExample.swift in Sources */,
 				64BBDAF81DF2330B00BB705D /* SelectFeatureExample.m in Sources */,
 				96D431FC1C84B4F7007D09D1 /* DrawingACustomMarkerExample.m in Sources */,
@@ -902,6 +909,7 @@
 				3EBCD71D1DC28240001E342F /* CustomRasterStyleExample.swift in Sources */,
 				646B62B01DEF7161000AA523 /* RuntimeAnimateLineExample.swift in Sources */,
 				07F53B851E00D02100B58DB3 /* AnnotationViewMultipleExample.m in Sources */,
+				3E085B801EC526C500163C99 /* ExtrusionsExample.swift in Sources */,
 				3EBCD7231DC28240001E342F /* DrawingAMarkerExample.swift in Sources */,
 				961962911C581700002D3DAB /* main.m in Sources */,
 				968247131C5C0F0F00494AB8 /* CalloutDelegateUsageExample.m in Sources */,

Examples/Examples.h

@@ -34,6 +34,7 @@ extern NSString *const MBXExampleDrawingAGeoJSONLine;
 extern NSString *const MBXExampleDrawingACustomMarker;
 extern NSString *const MBXExampleDrawingAMarker;
 extern NSString *const MBXExampleDrawingAPolygon;
+extern NSString *const MBXExample3DExtrusions;
 extern NSString *const MBXExampleOfflinePack;
 extern NSString *const MBXExamplePointConversion;
 extern NSString *const MBXExamplePointHotspot;

Examples/Examples.m

@@ -32,6 +32,7 @@ + (NSArray *)list {
         MBXExampleDrawingACustomMarker,
         MBXExampleDrawingAMarker,
         MBXExampleDrawingAPolygon,
+        MBXExample3DExtrusions,
         MBXExampleOfflinePack,
         MBXExamplePointConversion,
         MBXExamplePointHotspot,

Examples/ObjectiveC/ExtrusionsExample.h

@@ -0,0 +1,13 @@
+//
+//  ExtrusionsExample.h
+//  Examples
+//
+//  Created by Jordan Kiley on 5/11/17.
+//  Copyright © 2017 Mapbox. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface ExtrusionsExample : UIViewController
+
+@end

Examples/ObjectiveC/ExtrusionsExample.m

@@ -0,0 +1,56 @@
+//
+//  ExtrusionsExample.m
+//  Examples
+//
+//  Created by Jordan Kiley on 5/11/17.
+//  Copyright © 2017 Mapbox. All rights reserved.
+//
+
+#import "ExtrusionsExample.h"
+
+@import Mapbox;
+
+NSString *const MBXExample3DExtrusions = @"ExtrusionsExample";
+
+@interface ExtrusionsExample () <MGLMapViewDelegate>
+
+@end
+
+@implementation ExtrusionsExample
+
+- (void)viewDidLoad {
+    [super viewDidLoad];
+    
+    MGLMapView *mapView = [[MGLMapView alloc] initWithFrame:self.view.bounds styleURL:[MGLStyle lightStyleURLWithVersion:9]];
+    
+    // Center the map on the Colosseum in Rome, Italy.
+    
+    // Center the map view on the Colosseum in Rome, Italy and set the camera's pitch and distance.
+    mapView.camera = [MGLMapCamera cameraLookingAtCenterCoordinate:CLLocationCoordinate2DMake(41.8902, 12.4922) fromDistance:600 pitch:60 heading:0];
+    mapView.delegate = self;
+    
+    [self.view addSubview:mapView];
+}
+
+- (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
+    
+    // Access the Mapbox Streets source and use it to create a `MGLFillExtrusionStyleLayer`. The source identifier is `composite`. Use the `sources` property on a style to verify source identifiers.
+    MGLSource *source = [style sourceWithIdentifier:@"composite"];
+    MGLFillExtrusionStyleLayer *layer = [[MGLFillExtrusionStyleLayer alloc] initWithIdentifier:@"buildings" source:source];
+    layer.sourceLayerIdentifier = @"building";
+    
+    // Filter out buildings that should not extrude.
+    layer.predicate = [NSPredicate predicateWithFormat:@"extrude == 'true' AND height >= 0"];
+    
+    // Set the fill extrusion height to the value for the building height attribute.
+    layer.fillExtrusionHeight = [MGLStyleValue valueWithInterpolationMode:MGLInterpolationModeIdentity sourceStops:nil attributeName:@"height" options:nil];
+    layer.fillExtrusionBase =[MGLStyleValue valueWithInterpolationMode:MGLInterpolationModeIdentity sourceStops:nil attributeName:@"min_height" options:nil];
+    layer.fillExtrusionOpacity = [MGLStyleValue valueWithRawValue:@0.75];
+    layer.fillExtrusionColor = [MGLStyleValue valueWithRawValue:[UIColor whiteColor]];
+    
+    // Insert the fill extrusion layer below a POI label layer. If you aren’t sure what the layer is called, you can view the style in Mapbox Studio or iterate over the style’s layers property, printing out each layer’s identifier.
+    MGLStyleLayer *symbolLayer = [style layerWithIdentifier:@"poi-scalerank3"];
+    [style insertLayer:layer belowLayer:symbolLayer];
+}
+
+@end

Examples/Swift/ExtrusionsExample.swift

@@ -0,0 +1,52 @@
+//
+//  ExtrusionsExample.swift
+//  Examples
+//
+//  Created by Jordan Kiley on 5/10/17.
+//  Copyright © 2017 Mapbox. All rights reserved.
+//
+
+import Mapbox
+
+@objc(ExtrusionsExample_Swift)
+
+class ExtrusionsExample: UIViewController, MGLMapViewDelegate {
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        
+        let mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.lightStyleURL(withVersion: 9))
+        
+    // Center the map view on the Colosseum in Rome, Italy and set the camera's pitch and distance.
+        mapView.camera = MGLMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 41.8902, longitude: 12.4922), fromDistance: 600, pitch: 60, heading: 0)
+        mapView.delegate = self
+        
+        view.addSubview(mapView)
+    }
+    
+    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
+        
+        let array = [1, 2, 4, 6]
+        // Access the Mapbox Streets source and use it to create a `MGLFillExtrusionStyleLayer`. The source identifier is `composite`. Use the `sources` property on a style to verify source identifiers.
+        if let source = style.source(withIdentifier: "composite") {
+            let layer = MGLFillExtrusionStyleLayer(identifier: "buildings", source: source)
+            layer.sourceLayerIdentifier = "building"
+            
+            // Filter out buildings that should not extrude.
+            layer.predicate = NSPredicate(format: "extrude == 'true' AND height >= 0")
+            
+            // Set the fill extrusion height to the value for the building height attribute.
+            layer.fillExtrusionHeight = MGLStyleValue(interpolationMode: .identity, sourceStops: nil, attributeName: "height", options: nil)
+            layer.fillExtrusionBase = MGLStyleValue(interpolationMode: .identity, sourceStops: nil, attributeName: "min_height", options: nil)
+            layer.fillExtrusionOpacity = MGLStyleValue(rawValue: 0.75)
+            layer.fillExtrusionColor = MGLStyleValue(rawValue: .white)
+            
+            // Insert the fill extrusion layer below a POI label layer. If you aren’t sure what the layer is called, you can view the style in Mapbox Studio or iterate over the style’s layers property, printing out each layer’s identifier.
+            if let symbolLayer = style.layer(withIdentifier: "poi-scalerank3") {
+                style.insertLayer(layer, below: symbolLayer)
+            } else {
+                style.addLayer(layer)
+            }
+        }
+    }
+}