MapHubs Help
  • Introduction
  • Getting Started
    • Signup for a MapHubs Account
    • MapHubs Groups
    • Searching MapHubs
    • MapHubs Terminology
    • Troubleshooting Common Issues
  • Maps
    • Make a Map
    • Sharing Maps
    • Export a Map as an Image
    • Change the Layer Color
    • Copying Maps
  • Forest Analytics
    • Forest Report
  • Data
    • Uploading Data
    • Attach Photos to Map Features
    • Creating Data
    • Layer Metadata
    • Raster Tile Layers
  • Advanced
    • Custom Layer Legends
    • Data-Driven Map Styles
    • Editing Map Style Code (Advanced)
    • Map Dropdown Menus
    • Earth Engine Layers
    • Changing Polygon Fill Patterns
Powered by GitBook
On this page
  • Option 1: Changing the fill transparency
  • Option 2: Only show the outline
  • Option 3: Using a Pattern Fill
  1. Advanced

Changing Polygon Fill Patterns

PreviousEarth Engine Layers

Last updated 5 years ago

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

Option 3: Using a Pattern Fill

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>

This requires using the to edit the underlying Mapbox GL style.

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.

Advanced Map Style Code
https://www.base64encode.org/
Fill Outline Only Option
Pattern Fill Example Map