@plantquest/assetmap-react

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.

Install

npm install --save @plantquest/assetmap-react

Usage

Debug Log

Set 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.

Options

• 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 map
• mapBounds: Pixel bounds of map
• mapStart: Pixel start position of map ( e.g [y, x] ( default: [2925, 3900] ) )
• mapStartZoom: Starting zoom level
• mapRoomFocusZoom: Zoom level for room focus
• mapMaxZoom: Maximum zoom
• mapMinZoom: Minimum zoom
• states: 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 details
• apikey: Your project api key
• tilesEndPoint: Endpoint to your maps ( note that use tilesets so we don't specify maps explicitly )
• plant_id: Your plant ID
• project_id: Your project ID
• stage: Your stage

ReactJS: Quick Example

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>
    )
  }
  
}

Messages

// 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') 

// 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
  }
})
   

<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

// for example
const PQAM = window.PlantQuestAssetMap
PQAM.listen((msg) => {
  if('room-asset' === msg.relate) {
    // use msg.relation
  }
})

Licenses

MIT © Plantquest Ltd BSD 2-Clause © Vladimir Agafonkin, Cloudmade MIT © Justin Manley