Missing "fill-outline-color" property for PolygonLayerOptions

Anthony Denaud 25 Reputation points
2024-01-04T15:31:52.3166667+00:00

This is more a request that a bug report but I think it worth raising it here.

I was looking for a way to remove or change the outline of the polygons in a PolygonLayer, but it is currently not possible with the last SDK (3.0.3).

After some research I found out that the "fill-outline-color" property of maplibre is not exposed in the PolygonLayerOptions.

https://maplibre.org/maplibre-style-spec/layers/#paint-fill-fill-outline-color

I then edited the atlas dist files to expose it as follow:

In PolygonLayerOptions constructor:

_this.fillOutlineColor = undefined;

In PolygonLayer.prototype._buildLayers method:

        // The property fill-pattern should only be set if there is a value for fillPattern.
        // The property fill-color should only be set if fill-pattern isn't.
        if (this.options.fillPattern) {
            layer.paint["fill-pattern"] = this.options.fillPattern;
        }
        else {
            layer.paint["fill-color"] = this.options.fillColor;
            if(this.options.fillOutlineColor) {
                layer.paint["fill-outline-color"] = this.options.fillOutlineColor;
            }
        }

In PolygonLayer.prototype.setOptions method:

this._updatePaintProperty("fill-outline-color", newOptions.fillOutlineColor, this.options.fillOutlineColor);

And finally the Typescript types:

        fillOutlineColor?: string | DataDrivenPropertyValueSpecification<string>;

This works like a charm and it would be great if that property could be exposed in a future release. Thanks

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
782 questions
0 comments No comments
{count} vote

2 answers

Sort by: Most helpful
  1. LeelaRajeshSayana-MSFT 17,101 Reputation points
    2024-01-04T22:14:32.07+00:00

    Hi @Anthony Denaud Greetings! Welcome to Microsoft Q&A forum. Thank you for posting the question here.

    I'm glad that you were able to resolve your issue and thank you for posting your solution so that others looking into the same thing can easily reference this! I'll repost your solution in case you'd like to accept the answer.

    Issue:

    Looking for a way to remove or change the outline of the polygons in a PolygonLayer, but it is currently not possible with the last SDK (3.0.3).

    Solution:

    The "fill-outline-color" property of maplibre is not exposed in the PolygonLayerOptions.

    To overcome this, edit the atlas dist files to expose it as follow:

    In PolygonLayerOptions constructor:

    
    _this.fillOutlineColor = undefined;
    

    In PolygonLayer.prototype._buildLayers method:

            // The property fill-pattern should only be set if there is a value for fillPattern.
            // The property fill-color should only be set if fill-pattern isn't.
            if (this.options.fillPattern) {
                layer.paint["fill-pattern"] = this.options.fillPattern;
            }
            else {
                layer.paint["fill-color"] = this.options.fillColor;
                if(this.options.fillOutlineColor) {
                    layer.paint["fill-outline-color"] = this.options.fillOutlineColor;
                }
            }
    

    In PolygonLayer.prototype.setOptions method:

    this._updatePaintProperty("fill-outline-color", newOptions.fillOutlineColor, this.options.fillOutlineColor);
    
    

    And finally the Typescript types:

            fillOutlineColor?: string | DataDrivenPropertyValueSpecification<string>;
    

    If I missed anything please let me know and I'd be happy to add it to my answer, or feel free to comment below with any additional information.

    I will also run this by our product team and see if there is any alternate option to achieve this, or future plans to make the implementation simpler. Thank you for sharing this approach with the community.

    I hope this helps!

    If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue.

    1 person found this answer helpful.
    0 comments No comments

  2. rbrundritt 18,926 Reputation points Microsoft Employee
    2024-01-08T19:54:30.92+00:00

    This is by design. The fill-outline-color is an older style property that has limited capabilities and generally not recommended for use by Mapbox/MapLibre. There were discussions in the past where Mapbox was looking to remove this option from the data driven style specification, thus why Azure Maps choose not to expose this option. It is better to use a line layer to create the outline of a polygon as it provides a lot more customization (color, line width, pattern/dashed). WebGL has a limitation where polygon outline style is limited to a width of 1pixels, thus why a separate line layer is the recommended approach. Note here: https://github.com/mapbox/mapbox-gl-js/issues/3018#issuecomment-240381965


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.