[WIP] Fill pattern example #94

captainbarbosa · 2017-06-21T21:35:40Z

Working on a new example that demonstrates how to add a fill pattern within a MGLFillStyleLayer.

captainbarbosa · 2017-06-26T16:56:51Z

Here's what its looking like so far. The marked region represents the FCC's no drone zone around Washington, D.C.

friedbunny · 2017-06-26T17:18:23Z

Examples/Assets.xcassets/pattern.imageset/Contents.json

+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"


Select “Scales = Single Scale” for vector assets.

friedbunny · 2017-06-26T17:20:54Z

Examples/Swift/FillPatternExample.swift

+        mapView.styleURL = MGLStyle.darkStyleURL(withVersion: MGLStyleDefaultVersion)
+
+        // Set the map’s center coordinate and zoom level
+        mapView.setCenter(CLLocationCoordinate2D(latitude: 38.849534447295895, longitude: -77.03922271728514), zoomLevel: 8.5, animated: false)


Nit: use less precise numbers for the coordinate.

friedbunny · 2017-06-26T17:25:33Z

Examples/Swift/FillPatternExample.swift

+@objc(FillPatternExample_Swift)
+
+class FillPattern_Swift: UIViewController, MGLMapViewDelegate {
+    var fillPatternImage: UIImage!


Because this is only used in didFinishLoadingStyle, this doesn’t have to be a property of the view controller. Instead, we can do all of the setup in didFinishLoadingStyle.

friedbunny · 2017-06-26T17:27:28Z

Examples/Swift/FillPatternExample.swift

+        view.addSubview(mapView)
+
+        // Set the UIImage to be used for the fill pattern
+        fillPatternImage = UIImage(named: "pattern")


Have you considered drawing this pattern in code using Core Graphics?

friedbunny · 2017-06-26T17:39:38Z

Examples/Swift/FillPatternExample.swift

+        // Add the fill pattern image to used by the style layer
+        style.setImage(fillPatternImage.withRenderingMode(.alwaysTemplate), forName: "pattern")
+
+        let coordinates = [


This is fine, but it could be less verbose (in Swift, anyway) if the array were structured like this one.

friedbunny · 2017-06-26T17:41:04Z

Examples/Swift/FillPatternExample.swift

+        let layer = MGLFillStyleLayer(identifier: "circle", source: source)
+
+        // Set the fill pattern and opacity for the style layer
+        layer.fillPattern = MGLStyleValue<NSString>(rawValue: "pattern")


This seems a little magical — perhaps a more specific name than pattern and a bit more detailed of an explanation would help.

friedbunny · 2017-06-26T17:42:53Z

Examples/Swift/FillPatternExample.swift

+        let mapView = MGLMapView(frame: view.bounds)
+
+        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        mapView.styleURL = MGLStyle.darkStyleURL(withVersion: MGLStyleDefaultVersion)


This example uses a named layer in the dark style, so it should be pinned to the specific version of that style and not the generic default style version (which can be updated with any release).

friedbunny · 2017-06-26T17:43:36Z

Examples/Swift/FillPatternExample.swift

+
+        // Place the style layer below the layer contining city labels, if the
+        // layer is not found, add the style layer above all layers
+        if let cityLabels = style.layer(withIdentifier: "place-city-sm") {


We should note that this is style-specific and may not exist in custom styles.

friedbunny · 2017-06-26T17:44:12Z

Examples/Swift/SimpleMapViewExample.swift

@@ -5,12 +5,13 @@ import Mapbox
 class SimpleMapViewExample_Swift: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
-
+        self.navigationController?.isNavigationBarHidden = true


These changes look errant?

Yep 🙈 fixed - was debugging an unrelated issue

Updates

friedbunny · 2017-07-03T22:29:11Z

Examples.xcodeproj/project.pbxproj

 				3E085B821EC526E500163C99 /* ExtrusionsExample.m */,
 				3E3FB66D1F0588B3004512C6 /* LightExample.m */,
 				3E3FB66F1F0589AD004512C6 /* PointHotspotExample.m */,
+				055ABCC01EFB139C0063BACA /* FillPatternExample.m */,
+				968247291C5C1FF800494AB8 /* PointConversionExam


This seems bork.

friedbunny · 2017-07-03T22:29:16Z

Examples.xcodeproj/project.pbxproj

@@ -350,9 +355,12 @@
 				968247191C5C115000494AB8 /* DrawingAGeoJSONLineExample.m */,
 				9682470E1C5BF12700494AB8 /* DrawingAMarkerExample.m */,
 				9682471F1C5C1C0400494AB8 /* DrawingAPolygonExample.m */,
+				9682471F1C5C1C0400494AB8 /* DrawingAPolygonExample.m */,


Dupe — this is usually harmless, but unnecessary nonetheless.

friedbunny · 2017-07-03T22:31:19Z

Examples/ObjectiveC/FillPatternExample.m

+    // Add the fill pattern image to used by the style layer.
+    [style setImage:fillPatternImage forName:@"stripe-pattern"];
+
+    // "mapbox://examples.0cd7imtl" is a map ID referencing a tileset. For more


is a map ID referencing a tileset.

That’s what this is technically, but what content does it contain?

friedbunny · 2017-07-03T22:34:17Z

Examples/ObjectiveC/FillPatternExample.m

+
+    [style addSource:source];
+
+    // Create a style layer to be used with the vector source.


to be used

Would “using” be more precise? We’ve already init’d the source on L38 and are adding it to the layer here.

friedbunny · 2017-07-03T22:34:41Z

Examples/ObjectiveC/FillPatternExample.m

+    MGLFillStyleLayer *layer = [[MGLFillStyleLayer alloc] initWithIdentifier:@"drone-restrictions-style" source:source];
+
+    // Set the source's identifier using the source name its
+    // TileJSON metadata: mapbox.com/api-documentation/#retrieve-tilejson-metadata


This comment seems incomplete.

friedbunny · 2017-07-03T22:35:53Z

Examples/ObjectiveC/FillPatternExample.m

+    // Refer to the layers list in Mapbox Studio to confirm which layers are available for
+    // use when working with a custom style.
+    MGLStyleLayer *cityLabels = [style layerWithIdentifier:@"place-city-sm"];
+    if (cityLabels != nil) {


Checking for != nil is necessary in Swift, but not Objective-C.

friedbunny · 2017-07-03T22:37:01Z

Examples/Swift/FillPatternExample.swift

+
+        // Set the UIImage to be used for the fill pattern.
+        var fillPatternImage: UIImage!
+        fillPatternImage = UIImage(named: "stripe-pattern")


Might as well combine these two lines in Swift, too.

friedbunny

🎆 🔥 🚒 👩‍🚒 🚑 🏥 🤕 👍

1ec5 · 2017-07-05T22:45:28Z

Examples/Swift/FillPatternExample.swift

+        // Set the fill pattern and opacity for the style layer. The MGLStyleValue
+        // object is a generic container for a style attribute value. In this case,
+        // it is a reference to the fillPatternImage.
+        layer.fillPattern = MGLStyleValue<NSString>(rawValue: "stripe-pattern")


Nit: remove <NSString>, since the compiler can infer it.

1ec5 · 2017-07-05T22:46:45Z

Examples/Swift/FillPatternExample.swift

+        // Set the map’s size, style, center coordinate, and zoom level.
+        let mapView = MGLMapView(frame: view.bounds)
+        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        mapView.styleURL = MGLStyle.darkStyleURL(withVersion: 9)


Is this example dependent on any implementation details in v9? If not and it’s purely additive, then we can use MGLStyle.darkStyleURL().

Per @friedbunny's comment in #94 (comment), I originally had MGLStyle.darkStyleURL(), but it was suggested that we should pin the version to a specific number and explain that relying on simply the default version may become problematic if the current version differs significantly. Although, the place-city-sm label is an important layer that I feel wouldn't be drastically changed anytime soon, so I'm ok reverting it back to MGLStyle.darkStyleURL() , and adding more specific commentary instead.

Ah, no, what you’ve got makes sense, given the reliance on place-city-sm.

Cool, I'll keep it then 💯

1ec5 · 2017-07-05T22:47:37Z

Examples/Swift/FillPatternExample.swift

+        let layer = MGLFillStyleLayer(identifier: "drone-restrictions-style", source: source)
+
+        // Set the source's identifier using the source name retrieved from its
+        // TileJSON metadata: mapbox.com/api-documentation/#retrieve-tilejson-metadata


Mapbox Studio provides a user-friendly way to see these layers without having to construct an API request by hand.

captainbarbosa added the new example - help wanted! label Jun 21, 2017

captainbarbosa force-pushed the fill-pattern-example-yolo branch from 73ba84e to 7c8a460 Compare June 26, 2017 16:51

friedbunny reviewed Jun 26, 2017

View reviewed changes

friedbunny assigned captainbarbosa Jun 27, 2017

captainbarbosa force-pushed the fill-pattern-example-yolo branch 7 times, most recently from 2a11d1d to 0808dbf Compare July 3, 2017 22:14

captainbarbosa added 2 commits July 3, 2017 18:27

Starting template

a426c9c

Add Swift & Obj-C examples

0b059c3

Updates

captainbarbosa force-pushed the fill-pattern-example-yolo branch from 0808dbf to 0b059c3 Compare July 3, 2017 22:28

friedbunny reviewed Jul 3, 2017

View reviewed changes

Review updates

33e1de8

friedbunny approved these changes Jul 4, 2017

View reviewed changes

captainbarbosa merged commit feba90d into master Jul 4, 2017

captainbarbosa deleted the fill-pattern-example-yolo branch July 4, 2017 00:46

friedbunny mentioned this pull request Jul 5, 2017

More fill pattern example follow-up #104

Closed

1ec5 reviewed Jul 5, 2017

View reviewed changes

captainbarbosa mentioned this pull request Jul 6, 2017

Additional improvements to fill pattern example #105

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Fill pattern example #94

[WIP] Fill pattern example #94

captainbarbosa commented Jun 21, 2017

captainbarbosa commented Jun 26, 2017 •

edited

Loading

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

friedbunny Jun 26, 2017

captainbarbosa Jun 28, 2017

friedbunny Jul 3, 2017

friedbunny Jul 3, 2017

captainbarbosa Jul 3, 2017

friedbunny Jul 3, 2017

friedbunny Jul 3, 2017

friedbunny Jul 3, 2017

friedbunny Jul 3, 2017

friedbunny Jul 3, 2017

friedbunny left a comment

1ec5 Jul 5, 2017

1ec5 Jul 5, 2017

captainbarbosa Jul 6, 2017

1ec5 Jul 6, 2017

captainbarbosa Jul 6, 2017

1ec5 Jul 5, 2017


		[style addSource:source];

		// Create a style layer to be used with the vector source.

[WIP] Fill pattern example #94

[WIP] Fill pattern example #94

Conversation

captainbarbosa commented Jun 21, 2017

captainbarbosa commented Jun 26, 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

friedbunny 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

captainbarbosa commented Jun 26, 2017 •

edited

Loading