Extrusions example #86

jmkiley · 2017-05-12T18:27:19Z

Basic 3D extrusions example for when 3.6.0 lands.

friedbunny · 2017-05-12T20:56:05Z

Examples/Swift/ExtrusionsExample.swift

+
+    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
+
+        // Access the Mapbox Streets source and use it to create a `MGLFillExtrusionLayer`.


MGLFillExtrusionStyleLayer seems to be the name of the layer class.

friedbunny · 2017-05-12T20:57:26Z

Examples/Swift/ExtrusionsExample.swift

+    func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
+
+        // Access the Mapbox Streets source and use it to create a `MGLFillExtrusionLayer`.
+        let source = style.source(withIdentifier: "composite")


Is "composite" chosen for a particular reason (e.g., does this exist in the source) or is this an arbitrary name?

"composite" is the identifier of the source in the style. I'll clarify that in the comment!

For a more robust solution (which may be overkill for this particular example), see this extension method used in the navigation SDK. You’d filter style.sources by isMapboxStreets and create a Streets source if there isn’t one.

friedbunny · 2017-05-12T20:58:35Z

Examples/Swift/ExtrusionsExample.swift

+
+        // Access the Mapbox Streets source and use it to create a `MGLFillExtrusionLayer`.
+        let source = style.source(withIdentifier: "composite")
+        let layer = MGLFillExtrusionStyleLayer(identifier: "buildings", source: source!)


Is it safe to force unwrap source?

friedbunny · 2017-05-12T20:59:58Z

Examples/Swift/ExtrusionsExample.swift

+        layer.sourceLayerIdentifier = "building"
+
+        // Filter out buildings that should not extrude.
+        layer.predicate = NSPredicate(format: "extrude != false AND height >=0")


For my own curiosity — what constitutes a building with extrude == false? How is that determined?

From what I've read here, extrude may be false if it is a complex building that requires a lot of building parts to render it correctly (like the Colosseum). This tells the renderer to skip rendering the overall building, and instead render the individual building parts.

This is mostly to catch some strange rendering that @incanus and I noticed when we were testing this out on Lower Manhattan. (which is a bug that he reported)

Yep, that’s correct. According to the Mapbox Streets source documentation:

The extrude field is true or false depending one whether the object should be included in 3D-extrusion renderings. For example a complex building might have various building:part objects mapped with different heights, in addition to a building object representing the footprint of the entire building. Only the building:part objects are needed for 3D rendering, so the full footprint outline will have an extrude value of false.

For a lower-level understanding of this value, see the OpenStreetMap documentation about 3D building outlines.

friedbunny · 2017-05-12T21:01:53Z

Examples/Swift/ExtrusionsExample.swift

+
+        // Insert the fill extrusion layer below a POI label layer.
+        let symbolLayer = style.layer(withIdentifier: "poi-scalerank3")
+        style.insertLayer(layer, below: symbolLayer!)


Is symbolLayer safe to force unwrap? When dealing with layer identifiers, I think it’s going to be important to note that these are only guaranteed to exist in certain Mapbox sources/styles, and then only for specific versions.

/cc @1ec5

I'll err on the side of safety 🙇‍♀️

See this StackOverflow post for a more robust solution.

friedbunny · 2017-05-12T21:03:14Z

Nice example. Since it requires v3.6.0, we should create a release branch here and retarget this PR against that.

friedbunny · 2017-05-12T21:03:55Z

Podfile

@@ -3,7 +3,7 @@ use_frameworks!

 target 'Examples' do
  # Pods for Examples
-  pod 'Mapbox-iOS-SDK-symbols', :podspec => 'https://raw.githubusercontent.com/mapbox/mapbox-gl-native/ios-v3.5.3/platform/ios/Mapbox-iOS-SDK-symbols.podspec'
+  pod 'Mapbox-iOS-SDK-symbols', :podspec => 'https://raw.githubusercontent.com/mapbox/mapbox-gl-native/ios-v3.6.0-alpha.1/platform/ios/Mapbox-iOS-SDK-symbols.podspec'


Let’s break the version bump out into its own commit.

Created a release-v3.6.0 branch. Will update the podfile in there as needed!

1ec5 · 2017-05-13T10:00:25Z

Examples/ObjectiveC/ExtrusionsExample.m

+    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)];


Nit: use dot notation: mapView.centerCoordinate = ….

Actually, we’re setting the camera right below. Let’s combine the two statements.

1ec5 · 2017-05-13T10:02:02Z

Examples/ObjectiveC/ExtrusionsExample.m

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


extrude can only be true or false, right? extrude = true reads better in this case.

1ec5 · 2017-05-13T10:03:06Z

Examples/ObjectiveC/ExtrusionsExample.m

+    layer.predicate = [NSPredicate predicateWithFormat:@"extrude != false 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];


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.

1ec5 · 2017-05-13T10:04:46Z

Examples/Swift/ExtrusionsExample.swift

+            layer.sourceLayerIdentifier = "building"
+
+            // Filter out buildings that should not extrude.
+            layer.predicate = NSPredicate(format: "extrude != false AND height >=0")


_^NIT: missing a space between >= and 0.

1ec5 · 2017-05-13T10:07:36Z

Examples/Swift/ExtrusionsExample.swift

+            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.


This comment may lead a developer to think they have to use the layers property to obtain the correct layer at runtime, whereas we merely intend to point out that it’s a helpful tool for discovering the layer identifier.

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.

captainbarbosa

😍 awesome! Nice building choice.

captainbarbosa · 2017-05-13T20:24:58Z

Examples/ObjectiveC/ExtrusionsExample.m

+
+- (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.


It might be a good idea to reference the Style Specification here: https://www.mapbox.com/mapbox-gl-js/style-spec

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:

If you aren’t sure what the source is called, you can view the style in Mapbox Studio or iterate over the style’s sources property, printing out each source’s identifier.

1ec5

Two more issues to address, but otherwise this PR is good to go.

1ec5 · 2017-05-18T19:57:54Z

Examples/ObjectiveC/ExtrusionsExample.m

@@ -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"];


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.

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

1ec5 · 2017-05-18T19:59:13Z

Examples/ObjectiveC/ExtrusionsExample.m

+    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];


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

1ec5 · 2017-05-19T22:07:14Z

Examples/ObjectiveC/ExtrusionsExample.m

@@ -40,10 +40,11 @@ - (void)mapView:(MGLMapView *)mapView didFinishLoadingStyle:(MGLStyle *)style {
    layer.sourceLayerIdentifier = @"building";

    // Filter out buildings that should not extrude.
-    layer.predicate = [NSPredicate predicateWithFormat:@"height >= 0"];
+    layer.predicate = [NSPredicate predicateWithFormat:@"extrude == %@ AND height >= 0", @"true"];


Nit: Per mapbox/mapbox-gl-native#9056 (comment), this can be written extrude == 'true'.

jmkiley added new example - help wanted! WIP labels May 12, 2017

jmkiley self-assigned this May 12, 2017

jmkiley requested review from friedbunny and captainbarbosa May 12, 2017 18:27

jmkiley changed the title ~~Extrusions example~~ [do not merge] Extrusions example May 12, 2017

jmkiley added this to the ios-v3.6.0 milestone May 12, 2017

incanus approved these changes May 12, 2017

View reviewed changes

friedbunny reviewed May 12, 2017

View reviewed changes

jmkiley added 2 commits May 12, 2017 14:12

Added Swift example

5dacab0

Added Objective-C

8d9c5d7

jmkiley changed the base branch from master to release-v3.6.0 May 12, 2017 21:18

addressed friedbunny's comments

de63625

jmkiley force-pushed the extrusions-example branch from e6c0da0 to de63625 Compare May 12, 2017 21:41

1ec5 reviewed May 13, 2017

View reviewed changes

captainbarbosa reviewed May 13, 2017

View reviewed changes

Addressed 1ec5's feedback

65430b3

1ec5 approved these changes May 18, 2017

View reviewed changes

edited predicate, added base

21818ed

1ec5 approved these changes May 19, 2017

View reviewed changes

Updated predicate

86e0ce6

jmkiley merged commit 20f9bfc into release-v3.6.0 May 22, 2017

jmkiley deleted the extrusions-example branch May 22, 2017 17:45

1ec5 changed the title ~~[do not merge] Extrusions example~~ Extrusions example May 22, 2017

jmkiley added a commit that referenced this pull request May 24, 2017

Extrusions example (#86)

d189259

jmkiley added a commit that referenced this pull request Jun 29, 2017

Extrusions example (#86)

c58a37a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extrusions example #86

Extrusions example #86

jmkiley commented May 12, 2017 •

edited

Loading

friedbunny May 12, 2017

friedbunny May 12, 2017

jmkiley May 12, 2017

1ec5 May 13, 2017

friedbunny May 12, 2017

friedbunny May 12, 2017

jmkiley May 12, 2017

1ec5 May 13, 2017 •

edited

Loading

friedbunny May 12, 2017

jmkiley May 12, 2017

1ec5 May 13, 2017

friedbunny commented May 12, 2017

friedbunny May 12, 2017

jmkiley May 12, 2017

1ec5 May 13, 2017

1ec5 May 13, 2017

1ec5 May 13, 2017

1ec5 May 13, 2017

1ec5 May 13, 2017

1ec5 May 13, 2017

captainbarbosa left a comment

captainbarbosa May 13, 2017

1ec5 May 13, 2017 •

edited

Loading

1ec5 left a comment

1ec5 May 18, 2017

jmkiley May 19, 2017

1ec5 May 18, 2017

1ec5 May 19, 2017


		func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {

		// Access the Mapbox Streets source and use it to create a `MGLFillExtrusionLayer`.


		- (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.

Extrusions example #86

Extrusions example #86

Conversation

jmkiley commented May 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1ec5 May 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

friedbunny commented May 12, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

captainbarbosa left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

1ec5 May 13, 2017 • edited Loading

Choose a reason for hiding this comment

1ec5 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jmkiley commented May 12, 2017 •

edited

Loading

1ec5 May 13, 2017 •

edited

Loading

1ec5 May 13, 2017 •

edited

Loading