Styling Options for Custom Map Layers

professional business enterprise

Adding symbology and a legend panel to your custom map layer requires the use of the advanced styling editor. You will need to be an Owner of your workspace to edit the style.

Instructions

Start with your custom layer visible in the Maps section.

Click on the last icon of the three (named Styling Options). You will see the 'simple' style.

Click on the link 'Switch to Advanced Editor' at the bottom.

You should see some JSON. This is the styling used to represent your data.

You can edit this style to change the representation. It will dynamically update the preview window to the right as you change the style.

Adding Symbology to a Custom Map Layer

We use MapLibre, so the styles use the syntax found at https://maplibre.org/maplibre-style-spec/layers/ This means that you can put in whatever styling you’d prefer, as long as it is valid MapLibre styling.

You will see a hint underneath the style that says 'refer to layer metadata for style editing'. If you click on the link, you will see the metadata for the layer that tells you which attributes are contained in the layer, This information can then be used to add labels (which in MapLibre style-speak are Symbols). You can render multiple layers from one source, so all you need to do is add a symbol layer after the point layer in the style.

Here is a minimal example of setting up a label where the label is top-center - MapLibre has lots of text-anchor options but top-center isn't one of them, so we have used text-offset to shift the centered text up by 16 ems (the default font size is 16).

  {
    "type": "symbol",
    "layout": {
      "text-field": "{name}",
      "text-anchor": "center",
      "text-offset": [0,-16]      
    },
    "paint": {
      "text-color": "yellow"
    }
  }

Adding the above layer assumes that there is an attribute in the layer called name - whichever attribute you wish to display needs to be named in the text-field property.

Icon Symbology

Here is a more complex example of setting up symbology for a Custom Map Layer. Say that we have quarantine facilities all over Queensland, Australia and these facilities are represented by points. We gather all sorts of information about a specific quarantine facility such as the head of facility, maximum capacity, and nearest hospital, among others. In this example, we are mainly concerned with mapping the Health_check_status of the quarantine facilities and we would like to assign symbols to the categories Approved , Captured , and Verified. These can be displayed in the map as the icons you assign them to. Below is a code snippet of what you might enter in the Advanced Style textbox.

 "layout": {
      "icon-ignore-placement": true,
      "icon-image": [
        "match",
        [
          "get",
          "Health_check_status"
        ],
        "Approved",
        "star-11",
        "Captured",
        "triangle-stroked-11",
        "Verified",
        "circle-stroked-11",
        "black"
      ]
    }

A list of icons recognized by MapLibre can be found here:mapbox-gl-styles/sprites/satellite-v9/_svg at master · mapbox/mapbox-gl-styles. Icons are not the only style, you can also use circle, line, or fill.

Polygon Symbology

There are multiple ways to set up symbology based on your vector data type - points, lines, and polygons. Coloring your polygons is another way to visualize your data in the Advanced Style textbox. Say that we have different types of Protected Areas all over Queensland such as Conservation Parks, Forest Reserves, National Parks, Resources Reserves, State Forests, among others. In our dataset, these fall under the ''EST_TENURE” field and are marked as abbreviations - CP for Conservation Parks, FR for Forest Reserves, NP for National Parks among others. These can be displayed in the map as the colors you assign them to. Below is a code snippet of what you might enter in the Advanced Style textbox:

 "paint": {
      "fill-color": [
        "match",
        [
          "get",
          "EST_TENURE"
        ],
        "CP",
        "red",
        "FR",
        "orange",
        "NP",
        "blue",
        "NS",
        "green",
        "NY",
        "violet",
        "RR",
        "pink",
        "SF",
        "magenta",
        "TR",
        "lavender",
        "black"
      ],
      "fill-opacity": 0.2
    }

This is what the resulting map looks like after classifying various Protected Areas according to the “EST_TENURE” field.

Again, you may consult https://maplibre.org/maplibre-style-spec/layers/ to assign symbology that would best represent your data for the use of your Gruntify Teams.

Adding a Legend Tab

You can add a Legend Tab through the Advanced Style textbox. Under the metadata you create a gruntify object, then a legend object. Again, you can either use circle, line, fill, or icon.

Below is an example of setting up a Legend Tab:

This is what the Legend tab looks like in the Gruntify interface. After uploading your Custom Map Layer, styling it, and activating the Legend side panel, you may access this when viewing Requests, Jobs, and Assets.