This repository was archived by the owner on Jun 14, 2024. It is now read-only.
Extrusions example #86
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
| [mapView setCenterCoordinate:CLLocationCoordinate2DMake(41.8902, 12.4922)]; | ||
|
|
||
| // Set the map view camera's pitch and distance. | ||
| mapView.camera = [MGLMapCamera cameraLookingAtCenterCoordinate:mapView.centerCoordinate 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. | ||
|
There was a problem hiding this comment. It might be a good idea to reference the Style Specification here: https://www.mapbox.com/mapbox-gl-js/style-spec There was a problem hiding this comment. This comment refers to properties in the runtime styling API to use as a debugging aid. There are so many differences between the runtime styling API and the style specification’s documentation on sources that we’d want to link to the more detailed API reference instead. In any case, I think #86 (comment) is relevant here as well:
|
||
| 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 != false AND height >=0"]; | ||
|
There was a problem hiding this comment.
|
||
|
|
||
| // Set the fill extrusion height to the value for the building height attribute. | ||
| layer.fillExtrusionHeight = [MGLStyleValue valueWithInterpolationMode:MGLInterpolationModeIdentity sourceStops:nil attributeName:@"height" options:nil]; | ||
|
There was a problem hiding this comment. We should set There was a problem hiding this comment. Remember to set |
||
| layer.fillExtrusionOpacity = [MGLStyleValue valueWithRawValue:@0.75]; | ||
| layer.fillExtrusionColor = [MGLStyleValue valueWithRawValue:[UIColor whiteColor]]; | ||
|
|
||
| // Insert the fill extrusion layer below a POI label layer. Use the `layers` property on a style to verify built-in layer identifiers. | ||
| MGLStyleLayer *symbolLayer = [style layerWithIdentifier:@"poi-scalerank3"]; | ||
| [style insertLayer:layer belowLayer:symbolLayer]; | ||
| } | ||
|
|
||
| @end | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| // | ||
| // 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 on the Colosseum in Rome, Italy. | ||
| mapView.setCenter(CLLocationCoordinate2D(latitude: 41.8902, longitude: 12.4922), animated: false) | ||
|
|
||
| // Set the map view camera's pitch and distance. | ||
| mapView.camera = MGLMapCamera(lookingAtCenter: mapView.centerCoordinate, fromDistance: 600, pitch: 60, heading: 0) | ||
| mapView.delegate = self | ||
|
|
||
| view.addSubview(mapView) | ||
| } | ||
|
|
||
| func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) { | ||
|
|
||
| // 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 != false AND height >=0") | ||
|
There was a problem hiding this comment. NIT: missing a space between |
||
|
|
||
| // 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.fillExtrusionOpacity = MGLStyleValue(rawValue: 0.75) | ||
| layer.fillExtrusionColor = MGLStyleValue(rawValue: .white) | ||
|
|
||
| // Insert the fill extrusion layer below a POI label layer. Use the `layers` property on a style to verify built-in layer identifiers. | ||
|
There was a problem hiding this comment. This comment may lead a developer to think they have to use the
|
||
| if let symbolLayer = style.layer(withIdentifier: "poi-scalerank3") { | ||
| style.insertLayer(layer, below: symbolLayer) | ||
| } else { | ||
| style.addLayer(layer) | ||
| } | ||
| } | ||
| } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: use dot notation:
mapView.centerCoordinate = ….There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, we’re setting the camera right below. Let’s combine the two statements.