Pattern colors as polygon fill-pattern/line-pattern images

[ojanes]

Hello, I am working on a project where I have to paint polygons with custom image patterns and I can't figure out how to do it with GL version (3.2.2). It could be nice to be able to use the UIColor class

func mapView(mapView: MGLMapView, fillColorForPolygonAnnotation annotation: MGLPolygon) -> UIColor {
     let image = UIImage(named:"pattern")!
     return UIColor(patternImage: image)
}

[1ec5]

Cool idea. The image pattern effect is controlled by the fill-pattern paint property in core mbgl. What we’d need is a way to get the image’s pixel data out of the color. This is also blocked by #837, which will open the door to a lot more style customization at runtime.

[1ec5]

We’d need to get a CGColorRef via -[UIImage CGColor], then get a CGPatternRef using CGColorGetPattern(), then draw the image into a context using Core Graphics.

[1ec5]

Now that the runtime styling API has been implemented, when MGLFillStyleLayer.fillColor is set to a pattern color, that property would need to install the image using -[MGLStyle setImage:forName:] and set MGLFillStyleLayer.fillPattern by side effect.

[1ec5]

In the meantime, you can call -[MGLStyle setImage:forName:] and set fillPattern on any MGLFillStyleLayer you’ve added to your style. We don’t support applying these effects to annotations – #1734 (comment) – but it sounds like the runtime styling API should be sufficient for your use case.

[stale]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.

[samfader]

@knov @chloekraw Wanted to put this back on your radar. Would the best next step be moving it to https://github.com/mapbox/mapbox-gl-native-ios/issuess?

[1ec5]

Yes, I think it makes sense to track this issue in mapbox-gl-native-ios. Pattern colors are an iOS/macOS concept and I think the translation to a pattern image would have to happen in platform-specific code.

The workaround in #5033 (comment) remains relevant. If we were to implement support for pattern colors as a convenience, it would look something like this:

• -[MGLFillStyleLayer setFillColor:] (which is currently generated by a script) would intercept the fillColor expression and iterate through its arguments (or evaluate its constant value):
  • If any argument is a pattern-based NSColor or UIColor, replace the argument with clearColor.
• -[MGLFillStyleLayer setFillColor:] would also call -[MGLFillStyleLayer setFillPattern:], which would iterate through the expression’s arguments:
  • If any argument is a pattern-based NSColor or UIColor:
    • Call -[MGLStyle setImage:forName:], generating an image name by hashing the image data.
    • Replace the argument with the image name as a string.
  • Otherwise, replace the argument with a NIL expression.

You’d then be able to set the fill color to a pattern color, like this:

UIImage *crosshatchImage = [UIImage imageNamed:@"crosshatch"];
UIColor *crosshatchPattern = [UIColor colorWithPatternImage:crosshatchImage];
fillLayer.fillColor = [NSExpression expressionWithFormat:@"MGL_MATCH(saturation, 0, %@, 1, %@, %@)", UIColor.blackColor, UIColor.whiteColor, crosshatchPattern];