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,55 @@ | ||
| // | ||
| // 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:@"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]; | ||
|
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. 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 | ||
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,51 @@ | ||
| // | ||
| // 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: "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.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) | ||
| } | ||
| } | ||
| } | ||
| } |
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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: