Apps can make designing and developing cities more fun, fast and collaborative.

Giraffe comes with a bunch of apps, but we've only scratched the surface of what's possible.

To empower the next generation of apps we've opened up our javascript SDK. 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.

Guide Contents

<aside> 👉 Download the SDK here:

giraffe-sdk-main.zip

Please read the included README file and contact us here if you have any questions.

</aside>

Simple Example

In Giraffe, apps can do anything javascript can do, but their "home" is the right hand side of the screen. This is what a trivial example looks like which live counts how many points you've drawn.

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

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;

Extended Example

A little more complex, but in less than 150 lines of code we can make a travel time catchment calculator (aka isochrone). Most of this code is copied verbatim from this Mapbox example.

isochrone.mov

SDK Reference

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

1. importing the context from @giraffe/gimap
   1. eg. import { fastUIState } from '@giraffe/gimap';
2. accessing the API from the context using React's useContext hook
   1. eg. const { stackedSections } = useContext(fastUIState);

API

Return to Giraffe Knowledge Base