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.

Step 1: Import the data

Open the Import Layer applet.

Navigate to the Layer Palette, then click “New data layer”

When the Layer Library opens, click “Create new Layer” on the right hand side

The dropdown displays all of the layer type options. Select one to open the layer create applet.

To import vector data:

Add Your own Spatial data

Upload Vector Files as Layers

Import Esri or WMS Layers

Step 2: Customize the style 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.

Note:

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