Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In a mapbox gl js layer of type 'fill': Can we control the stroke thickness?

Tags:

mapbox-gl-js

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.

like image 819
citykid Avatar asked May 15 '18 13:05

citykid


People also ask

What are layers in Mapbox?

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.

What does GL stand for Mapbox?

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.

How does Mapbox GL work?

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.


1 Answers

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).

like image 138
pathmapper Avatar answered Nov 29 '22 10:11

pathmapper