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