Software Development Kit (SDK)

Build apps, widgets and workflows for your organization, local context or for the world to use.

Overview

Customizing Giraffe with apps, widgets & workflows makes designing and developing cities more fun, fast and collaborative. Even though Giraffe comes with an array of apps to choose from, they only scratch the surface of what’s possible, and most importantly, what’s most useful for your organization.

To empower the next generation of apps, we've opened up our JavaScript SDK. Allowing web developers to easily 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.

SDK reference

Giraffe data and functions are available via API from a number of contexts. They can be accessed by:

Importing the context from
@giraffe/gimap
Accessing the API from the context using React's useContext hook

Importing context from @giraffe/gimap

import { fastUIState } from
'@giraffe/gimap';

React's useContext hook

const { stackedSections } =
useContext(fastUIState);

API

Context

Description

stackedSections

fastUIState

The "post-processed" geometries drawn on the map. Processing includes stacking, offsetting etc.

mapRef

slowUiDispatch

Ref containing the Mapbox map instance.

selectedSectionIds

uiState

Set of section ids the user has selected.

activeProject

backEndState

GeoJSON Feature of current project.

Simple use case example

In Giraffe, apps can do anything JavaScript can do, but their "home" is the right hand side of the screen. As a straight forward, simple example this live counts how many points you've drawn.

All you have to write is a React component that looks like this:

Get your token

import React, { useContext } from
'react';

import { fastUIState } from
'@giraffe/gimap';

function App() {
const { stackedSections } =
useContext(fastUIState);

const pointCount =
Object.values(stackedSections).filter(f
=> f.geometry.type === "Point").length;

return (
    <div className="w-96 p-6">
          <p> My First App </p>
          <p> I've drawn {pointCount} points.</p>
       </div>
      );
}

export default App;

Advanced use case example

As a more advanced use case, that still uses less than 150 lines of code, is a travel time catchment calculator (aka isochrone). Most of this code is copied verbatim from this Mapbox example.

Get started

Start developing by downloading the latest SDK. This includes examples and the required Giraffe libraries. Please read the included README file.

Download Now

Start creating better cities

Giraffe is free to use for property developers, architects and governments. To access our full set of capabilities, integrate apps and add additional seats learn more about our paid plans.

Get Started For Free