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.

Screen Shot 2021-08-25 at 2.27.55 pm.png

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>

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.

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