Changing Polygon Fill Patterns

Search…
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.
​
Advanced - Previous
Earth Engine Layers
Last modified 1yr ago
Copy link
Contents
Option 1: Changing the fill transparency
Option 2: Only show the outline
Option 3: Using a Pattern Fill