Changing Polygon Fill Patterns

Option 1: Changing the fill transparency

In the More Colors panel you can reduce the transparency of the fill using the slider or by changing the alpha (A) value

Option 2: Only show the outline

In the Advanced panel of the layer style settings choose Outline Only
Fill Outline Only Option

Option 3: Using a Pattern Fill

Pattern Fill Example Map
This requires using the Advanced Map Style Code to edit the underlying Mapbox GL style.
Update the fill layer to change the fill to a pattern instead of a solid color:
1) to add the maphubs:images section to the metadata This defines a small image, in this case an SVG vector icon of a stripe pattern, that will be repeated to create the fill.
2) to add the pattern-fill to the paint section with the name of the image you created above
"id": "polygon-stripes-example",
"type": "fill",
"metadata": {
"maphubs:layer_id": 1,
"maphubs:globalid": "abc123",
"maphubs:interactive": true,
"maphubs:showBehindBaseMapLabels": false,
"maphubs:images": [
"name": "stripes",
"width": 8,
"height": 8,
"svg": "<svg xmlns='' width='10' height='10'><rect width='10' height='10' fill-opacity='0' /><path d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke='black' stroke-width='1'/></svg>"
"maphubs:outline-only": false
"source": "polygon-stripes-example",
"source-layer": "data",
"filter": [
"paint": {
"fill-pattern": "stripes",
"fill-opacity": 0.7
If you want to change the color or size of the stripes you can change the stroke or stroke-width in the path element of the SVG icon

Updating the Legend

After you've set a stripe fill you'll want to update legend. Here is an example showing the stripe pattern from the example above.
<div class="omh-legend">
<div class="block" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsLW9wYWNpdHk9JzAnIC8+PHBhdGggZD0nTS0xLDEgbDIsLTIgTTAsMTAgbDEwLC0xMCBNOSwxMSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxJy8+PC9zdmc+&quot;); background-repeat: repeat;" ></div>
If you change the SVG for the image you'll need to base64 encode the SVG and replace the encoded value after image/svg+xml;base64, in the legend html. Paste your SVG into a tool like to get the encoded value.
Copy link
On this page
Option 1: Changing the fill transparency
Option 2: Only show the outline
Option 3: Using a Pattern Fill