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

To import vector data:

Add Your own Spatial data

Upload Vector Files as Layers

Import Esri or WMS Layers

There are 2 ways to open the layer upload applet:

Data layer → Create Your own → select layer type

Main menu (☰) → Layers → select layer type

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>