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
1
{
2
"id": "polygon-stripes-example",
3
"type": "fill",
4
"metadata": {
5
"maphubs:layer_id": 1,
6
"maphubs:globalid": "abc123",
7
"maphubs:interactive": true,
8
"maphubs:showBehindBaseMapLabels": false,
9
"maphubs:images": [
10
{
11
"name": "stripes",
12
"width": 8,
13
"height": 8,
14
"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>"
15
}
16
],
17
"maphubs:outline-only": false
18
},
19
"source": "polygon-stripes-example",
20
"source-layer": "data",
21
"filter": [
22
"in",
23
"$type",
24
"Polygon"
25
],
26
"paint": {
27
"fill-pattern": "stripes",
28
"fill-opacity": 0.7
29
}
30
},
Copied!
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.
1
<div class="omh-legend">
2
<div class="block" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsLW9wYWNpdHk9JzAnIC8+PHBhdGggZD0nTS0xLDEgbDIsLTIgTTAsMTAgbDEwLC0xMCBNOSwxMSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxJy8+PC9zdmc+&quot;); background-repeat: repeat;" ></div>
3
<h3>{NAME}</h3>
4
</div>
Copied!
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.
Last modified 1yr ago