According to https://www.mapbox.com/mapbox-gl-js/style-spec/ a layer with type='fill' draws "a filled polygon with an optional stroked border".
type: 'fill',
paint: {
'fill-color': 'orange',
'fill-opacity': 0.5,
'fill-outline-color': 'red'
}
The stroke around the polygon is drawn, but very thin, so it is hardly noticable.
Question: Is there a way to draw a stronger, thicker, stroke line (stroke) around the polygon?
I also found https://github.com/mapbox/mapbox-gl-js/issues/4087 which argues, that the settings are confusing as they are now. I agree with that.
The type of layer is specified by the "type" property, and must be one of background , fill , line , symbol , raster , circle , fill-extrusion , heatmap , hillshade , sky . Except for layers of the background or sky types, each layer must refer to a source.
The abbreviation "GL" comes from OpenGL, the industry-standard Open Graphics Library. Mapbox GL allows you to use custom styles designed in Mapbox Studio. You can also manipulate every aspect of the style's appearance dynamically, because Mapbox GL renders vector tiles.
In web apps using Mapbox GL JS, maps are rendered dynamically by combining vector tiles with style rules using JavaScript and WebGL. Rendering maps in the browser rather than on a server makes it possible to change the map's style and the data it displays dynamically and in response to user interaction.
According to this comment the stroke is currently limited to 1px width (you can't change the width): https://github.com/mapbox/mapbox-gl-js/issues/4088#issuecomment-285801635
You could use an additional line
layer (using the same source) on top of the polygon fill
layer.
This way you would be able to draw a thicker stroke around the polygon using line-width (for the line
layer).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With