Custom Layer Styling | Giraffe Help Center

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

Next to the layer in the left hand menu, click ⋮ → Manage

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>"

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>"
  }
]

Style Vector layers using the Data Table

Build Your First App