First import the SDK libraries.
import { giraffeState, rpc } from '@gi-nx/iframe-sdk';
import { useGiraffeState } from '@gi-nx/iframe-sdk-react';
Examples:
Below are some snippets covering some common use cases.
Subscribe to changes in user draw geometries
// in a react component
const rawSections = useGiraffeState('rawSections');
// or in vanilla JS
giraffeState.addListener(['rawSections'], () => {
console.log(giraffeState.get('rawSections'));
});
Save GeoJSON as a layer
This will create a new layer if one with the provided name does not already exist. Layer is temporary in that it won’t persist on refresh.
rpc.invoke('updateTempLayerGeoJSON', [
'My Layer Name',
{ type: 'FeatureCollection', features: [...] }
]);
Get the contents of a layer as GeoJSON
Layer name as it appears in left hand layer menu.
const layerContents = await rpc.invoke('getLayerContents', [
'Some Layer Name'
]);
Save app specific unstructured data
const setData = changes => {
// every "app" has access to an unstructured JSON store called "public"
// note: it's "public" to other apps the user has added to that Giraffe project
const activePa = giraffeState.get('selectedProjectApp');
rpc.invoke('updateProjectApp', [
activePa.app,
{
...activePa,
public: {
...activePa.public,
...changes
}
}
]);
};
Load app specific unstructured data
const data = useGiraffeState("selectedProjectApp")?.public;
Get user info
const user = useGiraffeState('giraffe_user');