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
2. accessing the API from the context using React's useContext hook

API