Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

Business or Professional

Adding and formatting labels within a custom style 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.

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

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

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

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

We use Mapbox, so the styles use the syntax found at https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers . This means that you can put in whatever styling you’d prefer, as long as it is valid Mapbox styling.

You will also 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, which tells you which attributes are contained in the layer, This information can then be used to add labels (which in Mapbox style-speak are Symbols). You can render multiple layers from the 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 - Mapbox 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.


  • No labels