Skip to content

'Coalesce' fails to find fallback image with 'fill-pattern' and 'line-pattern' #11109

@SnailBones

Description

@SnailBones

mapbox-gl-js version: v2.5.0

browser: Chrome & Firefox

Steps to Trigger Behavior

Create a fallback image expression for a line or polygon. Example:

'fill-pattern': [
    "coalesce",
      ["image", ["get", "icon"]],
      ["image", "rocket-15"],
  ]

I think that this will occur with any expression that meets the following:

  • for fill-pattern or line-pattern
  • with coalesce
  • and with at least one image wrapping a get

Link to Demonstration

Expected Behavior

The area with an invalid image name should display as the fallback rocket icon.
Screenshot 2021-10-08 at 17-43-06 fill-pattern bug

Actual Behavior

The area with an invalid image name doesn't render. The console displays:

"Image 'missing-icon' could not be loaded. Please make sure you have added the image with map.addImage() or a 'sprite' property in your style. You can provide missing images by listening for the 'styleimagemissing' map event."

Screenshot 2021-10-08 at 18-00-24 fill-pattern bug

Oddly, changing the second image expression to a string leads to ALL polygons displaying the fallback image:

'fill-pattern': [
    "coalesce",
      ["image", ["get", "icon"]],
      "rocket-15"
  ]

Screenshot 2021-10-08 at 17-43-17 fill-pattern bug

When a get statement is included, ALL 'image' expressions inside of the coalesce seem to evaluate to false.

@arindam1993 thoughts on why this might be happening?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions