Custom layer styling applies to data layers, such as uploaded layers and Esri layers. To style geometries you draw, use the Properties palette.

If you add a vector contextual layer into Giraffe, there are many options for styling that data.

If the Style and Filter capabilities in Data Table just aren’t doing it, take it to the next level using GeoJSON and Mapbox.

Customize JSON

Open the Manage Layer menu.

In the Layer settings, click Edit Style JSON

Change the type, paint and layout keys to any valid Mapbox style spec.

Click “save” to apply your changes.

We've made a few additions to the Mapbox spec.

For symbol layers, the icon-image can be the URL of a PNG or WEBP (not SVG) image, we'll automatically add that image to the map. Wherever the image is served from will need to allow CORS requests from Giraffe for it to be loaded
We've added a popupHTML key which will create popups on click events if added to layers style JSON. You can use double braces to template any properties of the feature eg "popupHTML": "<div> objectid: {{properties.objectid}} </div>"

Giraffe ignores raw Mapbox style JSON when a layer uses a Giraffe style. Every Esri FeatureServer layer uses a Giraffe style. Any data layer uses one after you choose Edit layer style or style it in the Data Table. On a layer with a Giraffe style, add dashes through the paint of the overrideLine key. Zoom limits (minzoom and maxzoom) are not available on these layers.

Style recipes

Each recipe goes in the layer's style JSON. Next to the data layer, click ⋮ → Manage, then click Edit Style JSON. In V6 this editor is called Mapbox Styles. Keep your layer's existing id and source, and add the keys shown.

Show a layer only at certain zoom levels

Add minzoom and maxzoom to the layer's style JSON, next to type. The data layer shows from minzoom up to maxzoom and hides outside that range.

{
  "type": "fill",
  "minzoom": 14,
  "maxzoom": 22,
  "paint": { "fill-color": "#ff6600" }
}

Zoom limits do not work on a layer with a Giraffe style, such as an Esri FeatureServer layer or a layer styled in the Data Table.

Make lines dashed

Add line-dasharray to the paint of a line layer. The numbers set the dash length, then the gap length, in line widths. The pattern repeats.

{
  "type": "line",
  "paint": {
    "line-color": "#333333",
    "line-width": 2,
    "line-dasharray": [2, 2]
  }
}

On a layer with a Giraffe style, such as an Esri FeatureServer layer or a layer styled in the Data Table, put the dash in overrideLine instead:

{
  "overrideLine": {
    "paint": { "line-dasharray": [2, 2] }
  }
}

There is no button for override keys like overrideLine. Type them into the style JSON yourself: open the layer menu, choose Manage, click Edit Style JSON, and add the keys to the Style section. Refresh the project to apply the changes. This applies to the layer's base style. A style set in the Data Table may replace it.

Change icon size

Add icon-size to the layout of a symbol layer. A value of 1 shows the icon at its original size. A value of 0.5 shows it at half size.

{
  "type": "symbol",
  "layout": {
    "icon-image": "https://example.com/marker.png",
    "icon-size": 0.5
  }
}

Style a raster (MapServer) layer

A raster layer, such as an Esri MapServer or WMS layer, is an image. Its colors come from the server image, so you cannot recolor its geometries. Use only raster- paint properties to adjust the image.

{
  "type": "raster",
  "paint": {
    "raster-brightness-min": 0,
    "raster-brightness-max": 1,
    "raster-saturation": -1,
    "raster-contrast": 0.2,
    "raster-hue-rotate": 0
  }
}

A raster-saturation of -1 turns the image gray. Giraffe sets raster-opacity from the layer opacity in the Layer Palette, so change opacity there.

Example HTML for popupHTML

A simple popup table, showing keys and values

<div style='background-color:white;color:black;font-size:12px;'>
  <table border='0' bordercolor='#ccc' cellpadding='5' cellspacing='0' style='border-collapse:collapse;'>
    <tbody>
      <tr>
        <td>Project Title</td>
        <td><strong>{{properties['Project Title']}}</strong></td>
      </tr>
      <tr>
        <td>City</td>
        <td><strong>{{properties['Project City']}}</strong></td>
      </tr>
      <tr>
        <td>Type</td>
        <td><strong>{{properties.Type}}</strong>}</td>
      </tr>
      <tr>
        <td>First reported</td>
        <td><strong>{{properties['Project First Reported']}}</strong></td>
      </tr>
      <tr>
        <td>Estimated value</td>
        <td><strong>{{properties['Formatted value']}}</strong></td>
      </tr>
 <tr>
        <td>Developer</td>
        <td><strong>{{properties['Company Name']}}</strong></td>
      </tr>
    </tbody>
  </table>
</div>

Example Icon layer style with popup

[
  {
    "id": "demo-symbol-style",
    "type": "symbol",
    "layout": {
      "icon-size": [
        "interpolate",
        [
          "exponential",
          2
        ],
        [
          "zoom"
        ],
        12,
        0.02,
        18,
        1
      ],
      "icon-image": "https://f.hubspotusercontent00.net/hub/7010209/hubfs/Giraffe%20OrangeRed.png?width=108&height=108"
    },
    "source": {
      "data": "https://storage.googleapis.com/feaso-prod/layer/3750/0/bcc02c32-81b1-4402-9d54-fe85f9935084.json",
      "type": "geojson"
    },
    "popupHTML": "<div style=\"display: flex;\">     <div  style=\"background-color: white;   padding: 12px;     max-width: 350px;     border-radius: 20px;     \">         <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/2560px-Test.svg.png\"  alt=\"missing logo\"             style=\"             float: right;             height: 4.5rem;             object-fit: contain;         \"/>         <div style=\"margin-bottom: 1rem;         font-weight: bold;         font-size: 1rem;         color: #15a5e5; \t\twhite-space: nowrap;         \">Heading:</div>         <div style=\"margin-bottom: 1rem;          font-size: 0.9rem;\"><b>Name: </b>{{properties.label}}</div>         </div>"
  }
]

Custom Layer Styling