Mapbox-gl-js: Add new 'fill-outline-width' functionality

[anna-geo]

Hi!
Is it possible to add fill-outline-width functionality? Now it is only possible to set color (fill-outline-color) but no possibility to set width of outline.

[mourner]

No, unfortunately it's a technical limitation of WebGL — it can't render outlines with width wider than 1, so you'll have to create another style layer with type=line.

We considered removing the fill-outline property altogether to avoid this confusion, but decided against it because 1px fill outlines are faster to render.

[shawnmgoulet]

@mourner so, if I'm understanding this correctly, the recommendation from mapbox for those that would like to manipulate the thickness of a multipolygon outline from a geojson source would be to create a line geo from the poly geo and then manipulate the line-width of the line geo overlaid atop the poly geo? yeah?

[mollymerp]

yep that's what I'd suggest @shawnmgoulet

[mollymerp]

just to clarify -- you can use the same geojson polygon Feature / source and then use it in two separate layers (one of type: "line", one of type: "fill")

[shawnmgoulet]

A late thanks for the clarification on this @mollymerp.

[peitalin]

Could this perhaps be important enough to include in the documentation somewhere?
say the geojson-polygon page?:
https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/

[nittyjee]

@mollymerp @mourner
I'm trying to add a layer that's a tileset, not a data source (the tileset was generated from a geojson source with Tippecanoe, and uploaded... my geojson file was enormous); When I try to add my polygon tileset with type: line, the layer doesn't even show... How do I change the line thickness with a source that's a tileset?

[benrudolph]

Since this issue shows up first on a lot of related google queries, I'll put my solution, since the ones above didn't work for me. Particularly when trying to style a collection of Polygon features with a Layer type of line, nothing would show up. To get outlines of polygons, I created a new geojson source with LineStrings generated from the geojson polygons. Turfjs's polygonToLine function was useful for this.

[emamd]

@nittyjee Realize you've probably found a way around this but thought I'd leave it for the record. I ran into a similar solution and realized you can use RGBA values for the outline-color.

ie.:

'fill-outline-color': 'rgba(255,255,255,0.0)'

worked for me.

[3zzy]

Its really weird to have to add a second layer just for the outline. I wish this was handled by mapbox so I wouldn't have to create a separate layer because then I also have layer toggling functionality which requires filtering out all 'stroke' layers.

[kptlronyttcna]

One problem with adding a separate outline layer is that outlines will always be on top of fills. For example if we have two small polygons and a big polygon covering those two small ones, the stroke of small polygons is still going to be visible.