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='http://www.w3.org/2000/svg' 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": [
"in",
"$type",
"Polygon"
],
"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>
<h3>{NAME}</h3>
</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 https://www.base64encode.org/ to get the encoded value.

‚Äč