Skip to content
This repository was archived by the owner on Jun 14, 2024. It is now read-only.

Extrusions example #86

Merged
merged 6 commits into from
May 22, 2017
Merged

Extrusions example #86

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5dacab0
Added Swift example
May 12, 2017
8d9c5d7
Added Objective-C
May 12, 2017
de63625
addressed friedbunny's comments
May 12, 2017
65430b3
Addressed 1ec5's feedback
May 18, 2017
21818ed
edited predicate, added base
May 19, 2017
86e0ce6
Updated predicate
May 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Examples.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,6 @@
968247191C5C115000494AB8 /* DrawingAGeoJSONLineExample.m */,
9682470E1C5BF12700494AB8 /* DrawingAMarkerExample.m */,
9682471F1C5C1C0400494AB8 /* DrawingAPolygonExample.m */,
3E085B811EC526E500163C99 /* ExtrusionsExample.h */,
3E085B821EC526E500163C99 /* ExtrusionsExample.m */,
646B62A31DEF7115000AA523 /* RuntimeAddLineExample.m */,
646B62A51DEF7121000AA523 /* RuntimeAnimateLineExample.m */,
Expand Down Expand Up @@ -503,6 +502,7 @@
968247181C5C115000494AB8 /* DrawingAGeoJSONLineExample.h */,
9682470D1C5BF12700494AB8 /* DrawingAMarkerExample.h */,
9682471E1C5C1C0400494AB8 /* DrawingAPolygonExample.h */,
3E085B811EC526E500163C99 /* ExtrusionsExample.h */,
96115A661CAD4E1C000963B8 /* OfflinePackExample.h */,
968247281C5C1FF800494AB8 /* PointConversionExample.h */,
646B62A21DEF7106000AA523 /* RuntimeAddLineExample.h */,
Expand Down
9 changes: 4 additions & 5 deletions Examples/ObjectiveC/ExtrusionsExample.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,9 @@ - (void)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];
// 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];
Expand All @@ -41,14 +40,14 @@ - (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
layer.sourceLayerIdentifier = @"building";

// Filter out buildings that should not extrude.
layer.predicate = [NSPredicate predicateWithFormat:@"extrude != false AND height >=0"];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do want to extrude. #86 was a suggestion to change this to extrude = true, not to remove the condition. By removing the condition, buildings like the Eiffel Tower will get extruded quite humorously.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! I just edited it. Was running into issues because of mapbox/mapbox-gl-native#9056

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];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should set fillExtrusionBase too, so that roofs and skywalks don’t fill the space below. The coliseum will probably look a little better that way, too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember to set fillExtrusionBase too: #86 (comment).

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.
// 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];
}
Expand Down
12 changes: 5 additions & 7 deletions Examples/Swift/ExtrusionsExample.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,32 +17,30 @@ class ExtrusionsExample: UIViewController, MGLMapViewDelegate {

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)
// 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 != false AND height >=0")
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. Use the `layers` property on a style to verify built-in layer identifiers.
// 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 {
Expand Down