Voxel Farm Embedded Viewer
npm install @voxelfarm/voxelfarm-react-viewer> Voxel Farm Embedded Viewer
sh
$ npm install --save @voxelfarm/voxelfarm-react-viewer
`
Usage
You can use the component the following way:
`jsx
import React from 'react'
import EmbeddedViewer from '@voxelfarm/voxelfarm-react-viewer';
/**
* React component that encapsulates a viewer to spatial data.
*/
projectId={string}
/* the url of the streaming server. /
streamingUrl={string}
/* the url of the rest server. /
restUrl={string}
/* the id of the view. /
viewId={string}
/ create a view with json /
viewJSON={string}
/* (true/false) show/hide zoomToExtent button. /
zoomToExtent={boolean}
/* (true/false) show/hide fullscreen button. /
fullscreen={boolean}
/* (true/false) show/hide home button. /
home={boolean}
/* (true/false) show/hide the options button. /
options={boolean}
/* (true/false) show the controls inside/outside of the view. /
showControlsInView={boolean}
/** Event Notification is triggered when a change in a region occurs.
* The event includes the following properties:
* voxelfarmPoints: the position of the region in Voxel Farm coordinates.
* voxelfarmMinY: min Y in Voxel Farm coordinates.
* voxelfarmMaxY: max Y in Voxel Farm coordinates.
* worldPoints: the position of the region in World coordinates.
* worldMinZ: min Z in world coordinates.
* worldMaxZ: max Z in world coordinates.
*/
onRegionChange={EventHandler}
/** Event Notification is triggered when clicking on a layer.
* The event includes the following properties:
* eventType: mousedown/mouseup
* canvasPosition: the position of the canvas.
* layerId: the layer Id where the click occured.
* position: the position of the click in the screen.
* voxelfarmPosition: the position of the layer in Voxel Farm coordinates.
* windowPosition: the position of the window.
* worldPosition: the position of the layer in world coordinates.
*
*/
onLayerClick={EventHandler}
/* Function to return authentication if it is required /
requestAuthToken={function}
/>
`
Examples
This is an example on how to retrieve layer information from the embedded view, how to change an input parameter for a layer and how to refresh the view.
`jsx
import React, {Component} from 'react';
import EmbeddedViewer from '@voxelfarm/voxelfarm-react-viewer';
/**
* React component that uses a EmbeddedViewer Component and add HTML input and a button .
*/
export default class App extends Component {
/**
* Event handler of the onClick Event
*
*/
onClick(){
/ Using the React ref of the instance of the Emebedded Viewer Component. /
if (this.viewer){
/ getLayers method is called first to retreive the list of layers with their inputs. /
const layers = this.viewer.getLayers();
/ In this example we chose "com.voxelfarm.program.view.blockmodel" as the layer's type to make the modification upon. /
if (layers.length > 0 && layers[0].type == "com.voxelfarm.program.view.blockmodel"){
/ chosing the first layer /
const firstLayer = layers[0];
/ get the first layer id /
const layerId = firstLayer.id;
/ get the list of available inputs for this particular layer. /
const inputs = firstLayer.inputs;
/ get the input for a particular id here will take query as an example. /
const inputId = "query";
const input = inputs[inputId];
/ get the label of this particular input /
const label = input.label;
/ get the type of this particular input /
const type = input.type;
/ retreive the value from the html input /
const inputValue = document.querySelector('input').value;
/ call setLayerInput method to set the value from the input string /
this.viewer.setLayerInput(layerId, inputId, inputValue);
/ call refreshView to update the view with the new value passed /
this.viewer.refreshView();
}
}
}
/**
* render function for the react component
*
*/
render(){
return (
ref={elem => this.viewer = elem}
projectId=""
streamingUrl=""
restUrl="}"
/ either property viewId or viewJSON that can be used/
viewId=""
fullscreen="true"
zoomToExtent="true"
options="true"
home="false"
showControlsInView="true"
/>
{/ adding an html input that includes the value that needs to be changed in the view. /}
{/ an html button to trigger the modification of the view. /}
)
}
}
``