PlantQuest is a supplier of asset mapping solutions and technology to the Life Science sector. The industry focused PlantQuest Asset Map allows users to intergrate the PlantQuest mapping technology into their technology stack. Upon doing so, users can manipulate maps and display asset information within the context of where it is generated helping workers to make smarter, quicker and more insightful decisions. In turn, increasing their operational effeciency.
npm install --save @plantquest/assetmap-reactSet window.PLANTQUEST_ASSETMAP_LOG to true to enable logging.
Set window.PLANTQUEST_ASSETMAP_DEBUG.show_coords to true to display a small box where asset info is shown, and xco-yco of cursor when clicked on the map.
width: Pixel width of map ( default:'600px')height: Pixel height of map ( default:'400px')mapImg: Map dimensions - very important for the polygons to fit the mapmapBounds: Pixel bounds of mapmapStart: Pixel start position of map ( e.g[y, x]( default:[2925, 3900]) )mapStartZoom: Starting zoom levelmapRoomFocusZoom: Zoom level for room focusmapMaxZoom: Maximum zoommapMinZoom: Minimum zoomstates: State definitions ( optional ){ [stateName]: { color: COLOR, name: STRING, marker: 'standard'|'alert'}, ...}
start.map: Starting map ( default:0)start.level: Starting level ( default:0)room.color: Room highlight color ( default:'#33f')mode: MAP MODE can either can'live'or'demo'- check out the code example below for detailsapikey: Your project api keytilesEndPoint: Endpoint to your maps ( note that use tilesets so we don't specify maps explicitly )plant_id: Your plant IDproject_id: Your project IDstage: Your stage
import { PlantQuestAssetMap } from '@plantquest/assetmap-react'
// enable logging - useful for debugging purposes
window.PLANTQUEST_ASSETMAP_LOG = true
// enable small info box for the current asset info shown, or for the position of your mouse on the map - such as xco, yco, etc.
window.PLANTQUEST_ASSETMAP_DEBUG.show_coords = true
const options = {
data: 'https://demo.plantquest.app/sample-data.js', // not needed if using: `mode: 'live'`
width: '100%',
height: '100%',
// this will enable dynamic resizing of the map widget
// it will adjust to your node ( 100% will take 100% of your parent node, etc. )
// but then the parent node of the component has to have its own width and height
// like in the example below
mapImg: [6140, 4602], // important: set the map [width, height]
states: {
up: { color: '#696', name: 'Up', marker: 'standard' },
down: { color: '#666', name: 'Down', marker: 'standard' },
missing: { color: '#f3f', name: 'Missing', marker: 'alert' },
alarm: { color: '#f33', name: 'Alarm', marker: 'alert' },
// "color" - color of the polygon of that state
// "name" - name of the state
// "marker" - type of marker ( 'standard' | 'alert' )
},
endpoint: ENDPOINT, // your endpoint: 'https://*'
apikey: '<STRING>', // your api key
tilesEndPoint: '<STRING>', // map tiles endpoint
// mode can either can 'live' or 'demo'
// if you want data to be loaded from the static demo js file (self.data here) - use 'demo' mode
// if you want 'live' data from the endpoint - use 'live' mode
mode: 'live',
plant_id: '<STRING>', // your plant_id
project_id: '<STRING>', // your project_id
stage: '<STRING>', // your stage
// room highlight color
room: {
color: 'red'
},
}
// container when showing an asset
/*
// css example
div.plantquest-assetmap-asset-state-up {
color: white;
border: 2px solid #696;
border-radius: 4px;
background-color: #696;
opacity: 0.7;
}
*/
class AssetInfo extends React.Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return <div>
<h3>{this.props.asset.tag}</h3>
<p><i>Building:</i> {this.props.asset.building}</p>
</div>
}
}
class App extends React.Component {
constructor(props) {
super(props)
// to keep track of map's state
// using listeners so we can reuse these in our app
this.state = {
map: -1,
level: '',
rooms: [],
showRoom: null,
showAsset: null,
}
}
componentDidMount() {
console.log("Mounting..")
const PQAM = window.PlantQuestAssetMap
// set up message listener
PQAM.listen((msg) => {
// put 'ready' listener to use
if('ready' === msg.state) {
// set 'rooms' for reuse
this.setState({
rooms: PQAM.data.rooms
})
}
// when a user selects a room
// "USER SELECT ROOM" example
else if ('room' === msg.select) {
// pick a room
let item = PQAM.data.roomMap[msg.room]
this.setState({ showRoom: item })
this.selectRoom(item)
}
// "USER SELECT MAP" example
else if('map' === msg.show) {
this.setState({ level: msg.level })
this.setState({ map: msg.map })
}
// Listen for "USER SHOW ASSET"
else if('asset' === msg.show) {
// use msg.asset
this.showAsset(asset)
}
})
}
selectRoom(item) {
const PQAM = window.PlantQuestAssetMap
// "SEND A MESSAGE" example
// "SHOW ROOM"
PQAM.send({
srv: 'plantquest',
part: 'assetmap',
show: 'room',
room: item.room,
focus: true,
})
}
showAsset(asset) {
const PQAM = window.PlantQuestAssetMap
// "SHOW ASSET" example
// when showing an asset
// it's important to first show the room of that asset and then the asset
PQAM.send({
srv: 'plantquest',
part: 'assetmap',
show: 'room',
room: asset.room,
focus: true,
})
PQAM.send({
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
asset: asset.id,
})
this.setState({ showRoom: asset.room })
this.setState({ showAsset: asset })
}
render() {
return (
<div className="App">
<div style={{width: '150vh', height: '100vh' }}>
<PlantQuestAssetMap
options={options}
assetinfo={AssetInfo}
/>
</div>
</div>
)
}
}{
srv: 'plantquest',
part: 'assetmap',
zoom: <INTEGER>,
}
Where:
When you zoom on a map, the scale of the map changes to showing more or less of your facility map, depending on whether you zoom in or out. The default zoom level value is between 2 and 6, with this value having the ability to be adjusted as needed.
<INTEGER>: Zoom level (default: 2 to 6)
{
srv: 'plantquest',
part: 'assetmap',
relate: 'room-asset',
}
Where:
This retrieves information and relationships regarding a room and the assets within it.
Listen: RELATION
{
srv: 'plantquest',
part: 'assetmap',
show: 'room',
room: <ROOM-ID>,
focus: <Boolean>,
}
Where:
This is used to display information regarding a particular room on the asset map. When a room is selected on the map, the asset map will focus on the room.
<ROOM-ID>: Room Identifier String
<Boolean>: either true or false - enable focus when a room is shown
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
asset: <ASSET-ID>,
}
Where:
This calls the PlantQuest asset map via an API endpoint and displays a particular asset location and asset ID on the map.
<ASSET-ID>: Asset Identifier String
{
srv: 'plantquest',
part: 'assetmap',
hide: 'asset',
asset: <ASSET-ID>,
}
Where:
This calls the PlantQuest asset map via an API endpoint and removes a particular asset from the map.
<ASSET-ID>: Asset Identifier String
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
state: <STATE>,
asset: <ASSET-ID>,
}
Where:
This indicates what asset information to show on the asset map, and in what manner to display it.
<STATE>: State String ('up', 'down', 'alarm', 'missing') - states from the options
<ASSET-ID>: Asset Identifier String
{
srv: 'plantquest',
part: 'assetmap',
show: 'map',
map: <INTEGER>,
}
Where:
This indicates what map to show. Maps are numbered 1 to n. For example, "Map 1" may be "First Floor Map", "Map 2" may be "Second Floor Map" etc.
<INTEGER>: Number of the map
{
srv: 'plantquest',
part: 'assetmap',
list: 'asset|room|building',
}
// for example - take assets
const PQAM = window.PlantQuestAssetMap
// our listener
PQAM.listen((msg) => {
if('asset' === msg.list) {
// use msg.assets
// where msg.assets is a list of all assets on the map
}
})
PQAM.send({
'srv': 'plantquest',
'part': 'assetmap',
'list': 'asset'
})
// the syntax is flexiable enough for us to just write:
PQAM.send('srv:plantquest,part:assetmap,list:asset') {
srv: 'plantquest',
part: 'assetmap',
load: 'asset|room|building',
id: <STRING>,
}
Where:
Load a single asset|room|building by id
<STRING>: ID (UUIDv4 format) of the asset|room|building to be loaded
{
srv: 'plantquest',
part: 'assetmap',
save: 'asset|room|building',
asset|room|building: <OBJECT>,
}
Where:
Save a new asset|room|building with your own metadata
<OBJECT>: Metadata of your asset|room|building to be saved
// for example
const PQAM = window.PlantQuestAssetMap
PQAM.send({
srv: 'plantquest',
part: 'assetmap',
save: 'asset',
asset: {
id: 'e565b059-8633-460a-8171-903d38720c26',
tag: 'asset001',
xco: 10,
yco: 10,
},
})
PQAM.listen((msg) => {
if('asset' === msg.save) {
// use msg.asset
// where msg.asset is the newly saved asset
}
})
{
srv: 'plantquest',
part: 'assetmap',
remove: 'asset|room|building',
id: <STRING>,
}
Where:
remove asset|room|building by id
<STRING>: ID (UUIDv4 format) of the asset|room|building
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
state: <STRING>,
asset: <ARRAY>,
}
Where:
display a list of assets by id
<STRING>: STATE is generally user-specified - for example it can be 'up'|'down'|'alarm'|'missing'
<ARRAY>: IDs (UUIDv4 format) of the assets to be shown on the map using clustering - note: if this is set to null, all assets will be rendered and displayed
{
srv: 'plantquest',
part: 'assetmap',
state: <STATE>,
}
Where:
Provides an explanation of what the "" placeholder stands for, indicating that it should be replaced with the actual state string. In this case, the only available state is 'ready'.
<STATE>: 'ready' - triggered when the map is fully rendered
{
srv: 'plantquest',
part: 'assetmap',
relate: 'room-asset',
relation: <RELATION>,
}
Where:
<RELATION>:
{ '<ROOM-ID>': { asset: [ '<ASSET-ID>', ... ] } }
ROOM-ASSET RELATION: Get all the rooms IDS containing their asset IDS in that room
// for example
const PQAM = window.PlantQuestAssetMap
PQAM.listen((msg) => {
if('room-asset' === msg.relate) {
// use msg.relation
}
}){
srv: 'plantquest',
part: 'assetmap',
select: 'room',
room: <ROOM-ID>,
}
Where:
Relates to when the user selects a room on the map and returns the rooms id and name.
<ROOM-ID>: Room Identifier String
{
srv: 'plantquest',
part: 'assetmap',
show: 'map',
map: <INTEGER>,
level: <STRING>,
}
Where:
Relates to the map that user wishes to view and manipulate. Example: User is currently viewing "Map 1 - First Floor" and wishes to view "Map 2 - Second Floor".
<INTEGER>: Number of the map user just selected
<STRING>: Name of the level of that map
{
srv: 'plantquest',
part: 'assetmap',
show: 'asset',
asset: <OBJECT>,
}
Where:
Allows the user to view an assets location on the asset map.
<OBJECT>: Metadata of the SHOWN asset
{
srv: 'plantquest',
part: 'assetmap',
list: 'asset|room|building',
assets|rooms|buildings: <ARRAY>,
}
Where:
Allows the user to list all the assets|rooms|buildings there are on the map.
<ARRAY>: List of all the assets|rooms|buildings
{
srv: 'plantquest',
part: 'assetmap',
load: 'asset|room|building',
asset: <OBJECT>,
}
Where:
Allows the user to load a single asset|room|building by id
<OBJECT>: the metadata of the loaded asset|room|building
{
srv: 'plantquest',
part: 'assetmap',
save: 'asset|room|building',
asset|room|building: <OBJECT>,
}
Where:
Allows the user to save a new asset|room|building with their own metadata
<OBJECT>: the metadata of the newly saved asset|room|building
{
srv:'plantquest',
part:'assetmap',
remove:'asset|room|building',
asset|room|building: <ID>,
}
Where:
Allows the user to see when an item is removed
<ID>: the id of the removed asset|room|building
MIT © Plantquest Ltd BSD 2-Clause © Vladimir Agafonkin, Cloudmade MIT © Justin Manley