Giraffe SDK

Appearance

Giraffe SDK

Documentation for the Giraffe iframe SDK

GiraffeState
RPC Functions

Read From Giraffe ​

Iframes can listen to data from the parent Giraffe window using GiraffeState.

ts
import { giraffeState } from '@gi-nx/iframe-sdk';

giraffeState.addListener(['mapContent'], (key: string) => {
  console.log('mapContent has changed', giraffeState.get('mapContent'));
});

For React apps, use the useGiraffeState hook:

ts
import { useGiraffeState } from '@gi-nx/iframe-sdk-react';

export const MyComponent = () => {
  const stackedSections = useGiraffeState('stackedSections');
  return <div>...</div>;
};

Commands / Functions ​

RPC Functions can be invoked via the postmessage SDK.

ts
import { rpc } from '@gi-nx/iframe-sdk';
rpc.invoke('setTiles', [sourceId, newTiles]);

Panels ​

Apps open their own panels around the map with openAppPanel. Anchor one to the bottom of the map for a full-width strip under the map — a dashboard, a chart, a table.

ts
import { rpc } from '@gi-nx/iframe-sdk';

const { panelKey } = await rpc.invoke('openAppPanel', [
  {
    url: '/dashboard.html',
    anchorAppKey: 'map',
    placement: { position: 'bottom', size: 0.3 }
  }
]);

size is the fraction of the map panel the new panel takes, and the user can resize, move or close it from there. The page must be same-origin with your app; it receives the same state events and can call the same RPC functions.

Follow where the panel ends up with the appPanels state, and close it with closeAppPanel.

ts
import { giraffeState } from '@gi-nx/iframe-sdk';

giraffeState.addListener(['appPanels'], () => {
  const panel = giraffeState.get('appPanels').find(p => p.panelKey === panelKey);
  if (!panel) return; // the user closed it
  console.log(panel.visible, panel.rect);
});

await rpc.invoke('closeAppPanel', [{ panelKey }]);