The Giraffe Javascript SDK allows developers to write custom web apps that extend the functionality of Giraffe. Apps can read and write data from the Giraffe map such as geometries, layers and UI state (eg a user’s current selection).

An app is rendered in an Iframe on the right of the screen. It can interact with other areas of Giraffe through the SDK functions.

Screen Shot 2023-10-04 at 2.57.11 pm.png

<aside> 1️⃣ Iframe SDK Setup

</aside>

<aside> ✂️ Code Snippets

</aside>

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/e88e1557-1190-46ff-8fd5-34e9e35d18f5/1fac23a0-4557-4b0f-9b22-4a203f36b0e8/favicon-72a2cad5025aa931d6ea56c3201d1f18e68a8cd39788c7c80d5b2b82aa5143ef.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/e88e1557-1190-46ff-8fd5-34e9e35d18f5/1fac23a0-4557-4b0f-9b22-4a203f36b0e8/favicon-72a2cad5025aa931d6ea56c3201d1f18e68a8cd39788c7c80d5b2b82aa5143ef.png" width="40px" /> Git repo with full example apps

</aside>

<aside> 🤓 SDK API Documentation for all available data and functions.

</aside>

Background on Apps

Apps can make designing and developing cities more fun, fast and collaborative. Giraffe comes with a number of apps built in, but we've only scratched the surface of what's possible.

To empower technical users and reduce the cost of deploying business grade custom software, we've released a new javascript SDK$^1$ . This allows (web) developers to connect their own web app to the Giraffe platform. They can leverage Giraffe authentication, hosting, geometries, layers and more to get from prototype to production faster.

The Giraffe JS SDK is modelled around GeoJSON, because we believe simple formats like this drive automation and interesting analysis.

There are two ways to call the same set of SDK functions - the Iframe Post-message SDK and the Console JS SDK. Both of these will rapidly expand Giraffe’s analytics capacity.

Iframe Post-message SDK

Console JS SDK - examples