@wework/react-floormap

For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)

React FloorMap Component

React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience

• React FloorMap Component
• Installation
• FloorMap Components
  • Props
  • Events
    • User Event and Data Change
    • Mpa and Data Events
  • Rotate the map
  • Desk Layout
  • Default Map Appearance
  • Styling - Example
  • Advanced Styling
    • ConfigureStyle
      • example
    • Overriding Style using ApplyStyle
  • Access Floormap SDK Instance
  • Extension Support
• Development
• Demo

Installation

yarn add @wework/react-floormap@v2

FloorMap Components

Display Floormap by providing buildingId and floorId

import React from 'react'
import { FloorMapComponent } from `@wework/react-floormap`

class MyMap extends React.Component {
  render() {
    return (
      <FloorMapComponent
        configuration={{
          appId: configuration.appId,
          appSecret: configuration.appSecret,
          baseUrl: configuration.baseUrl,
          spacemanToken: configuration.spacemanToken, // optional
          mwAccessToken: configuration.mwAccessToken, // optional
        }}
        buildingId="b308b94c-bca6-4318-b906-1c148f7ca183"
        floorId="54c2fe02-180f-11e7-9312-063c4950d72"
        onClickSpace={(e) => {}}
        onMouseOver={(e) => {}}
        onMouseLeave={(e) => {}}
      />
    )
  }
}

Props

type Identifier = string | { uuid: string }

export type Props = {
  configuration?: FloorMapConfiguration

  // Render a floorplan
  floorId?: string

  // Provide only buildingId will render the lowest floor
  buildingId?: string

  // For rendering single room
  spaceId?: string

  deskLayout?: boolean
  deskInteractable?: boolean
  extensions?: Extension[]
  manager?: Manager

  selectedSpaces?: Identifier[]
  highlightedSpaces?: Identifier[]

  selectionColor?: string
  highlightColor?: string
  backgroundColor?: string

  onClickSpace?: EventHandler
  onDataChange?: EventHandler
  onMouseLeave?: EventHandler
  onMouseOver?: EventHandler

  initialFitContent: { padding: number }
  initialAzimuthAngle?: number
  initialPolarAngle?: number
  maxPolarAngle?: number
  minPolarAngle?: number
  maxAzimuthAngle?: number
  minAzimuthAngle?: number
  maxZoom?: number
  minZoom?: number

  enabledZoom?: boolean
  enabledPan?: boolean
  enabledRotate?: boolean

  // Deprecated use configureStyle
  configureStyle?: ConfigureSpaceFunction
  onError?(e: FloorMapError): void
  onSessionExpired?: (e?: Error) => void
  onLoad?(result: FloorMapResult): Promise<any> | undefined | void
  didLoad?(result: FloorMapResult): Promise<any> | undefined | void
  onRender?(result: FloorMapResult): Promise<any> | undefined | void
  didRender?(result: FloorMapResult): Promise<any> | undefined | void

  onAuthenticated(token?: MilkyWayAccessToken): void
  renderOptions?: object

  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>

  renderHoles?: boolean
  mapAppearance?: Partial<MapAppearance>
  floorOutline?: FloorOutlineOptions

  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)
}

Events

User Event and Data Change

<FloorMapComponent
  // ...
  onClickSpace={event => {}}
  onMouseOver={event => {}}
  onMouseLeave={event => {}}
/>

• onClickSpace When user click on a space
• onMouseOver When mouse over on a space
• onMouseLeave When mouse leave on a space

event object will be contains:

• id - ID of the space
• payload - Event information
• data? - If user interacts with space, the data field will presented

Mpa and Data Events

<FloorMapComponent
  // ...
  onDataChange={event => {}}
  onLoad={({ loading }) => {}}
  didRender={({ building, floor, spaces, objects, options }) => {}}
  onError={e => {
    console.log(e.message)
    console.log(e.data)
    console.log(e.options)
  }}
/>

onDataChange(event)

Gets triggered when data inside the map change via floorMap.updateData(id, data) (An floorMap SDK instance, can via access via ref.current.getInstance())

onDataChange: function(space: Space)

onLoad(event) - Map Lifecycle

Get call when the map start loading data

onLoad: function({ buildingId, floorId })

onLoad(event) - Map Lifecycle

Get call when the map start loading data

didLoad(event) - Map Lifecycle

Get call when the map finished loading data (but not yet render any spaces)

onRender(event) - Map Lifecycle

Get call when the map start rendering

didRender(event) - Map Lifecycle

Get call when the map finished rendering spaces

onError(error) - Map Lifecycle

Get call when an error occured during the map loading/rendering process

onError: function({ message, data, options })

• message - An error message
• data - Data associated with the error
• options - Options parameters that was passed to render function

onSessionExpired(error)

Get call when session in the map is expired

Rotate the map

<FloorMapComponent
  // ...
  initialPolarAngle={0} // Vetical rotation
  initialAzimuthAngle={90} // Horizontal rotation
  initialFitContent={{ padding: 50 }}
  maxPolarAngle={45}
  maxAzimuthAngle={45}
/>

Desk Layout

• deskLayout - Show/Hide desk layout
• deskInteractable - Enable interaction on Desk and Chair

These properties will get overridden from configureStyle

<FloorMapComponent
  // ...
  deskLayout={true}
  deskInteractable={true}
/>

Default Map Appearance

<FloorMapComponent
  // ...
  mapAppearance={{
    mapIcons: false, // disable defatch map icons
    mapColor: false, // disable default map color
    roomNumbers: false, // disable room numbers
  }}
/>

Styling

We provide simple way to make a selection and highlight styling to spaces by passing:

• selectedSpaces - Array of uuid of space (or space object) you want to style as selection
• selectionColor - Color to use style when space is in selection state (selectedSpaces)
• highlightedSpaces - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)
• highlightColor - Color to use style when space is in selection state (highlightedSpaces)

The different between selection and highlight is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of highlightedSpaces

<FloorMapComponent
  // ...
  selectedSpaces={[uuid1, uuid2]}
  highlightedSpaces={[uuid3]}
  selectionColor="#acc3fe"
  highlightColor="#ffffff"
/>

Example

class MyMap extends React.Component {
  state = { selected: [] }
  render() {
    return (
      <FloorMapComponent
        // ...
        selectedSpaces={this.state.selected}
        selectionColor="#acc3fe"
        onClickSpace={({ data }) => {
          if (data) {
            this.setState({ selected: [data.uuid] })
          } else {
            // No data means click outside any space
            this.setState({ selected: [] })
          }
        }}
      />
    )
  }
}

Advanced Styling

ConfigureStyle

In case you want to take more control of styling or configure each space (eg. visible, interactable). You can use configureStyle props to config each space in the Map.

For supported properties, please refer to Floormap SDK's styling

<FloorMapComponent
  // ...
  configureStyle={space => {
    // Hide all DESK and CHIAR
    if (space.type === 'object') {
      return { visible: fales }
    }

    // All work type will be #f0f0ff
    if (space.programType === 'WORK') {
      return {
        color: '#f0f0ff',
        interactable: true,
      }
    }

    // otherwise set color to #d0d0d0
    // and set interactable to false
    return {
      color: '#d0d0d0',
      interactable: false,
    }
  }}
/>

configureStyle will get called everytime when to map need to style a space or you can force the map to re-configure space by call invalidate(space?: Space[]|UUID[]) on FloorMap Instance

example

Combine configureStyle and invalidate to highlight space

class MyMap extends React.Component {
  floorMapRef = React.createRef()

  state = { selectedUuid: undefined }

  render() {
    return (
      <FloorMapComponent
        // ...
        floorMapRef={this.floorMapRef}
        onClickSpace={({ data }) => {
          if (!data) {
            return
          }
          const currentSelection = this.state.selectedUuid
          const newSelection = data.uuid
          this.setState({ selectedUuid: newSelection })

          // Reload 2 space the previous one and new one
          this.floormapRef.current.invalidate([newSelection, currentSelection])
        }}
        configureStyle={space => {
          if (this.state.selectedUuid === space.uuid) {
            return {
              color: 'red',
            }
          } else {
            return { color: '#f0f0f0' }
          }
        }}
      />
    )
  }
}

To prevent configureStyle get called for every spaces, you can pass array of spaces/uuid to configureStyle to reload only specific spaces.

Overriding Style using ApplyStyle

To override the style from configureStyle, We can applyStyle, revertStyle, and resetStyle functions from the FloormapSDK instance

const Map = () => {
  const floorMapRef = React.createRef()

  return (
    <FloorMapComponent
      onClickSpace={({ data }) => {
        this.floorMap.current?.applyStyle({
          uuid: data.uuid,
          style: {
            color: 'red',
          },
        })
      }}
      configureStyle={() => {
        // Every spaces will be white
        return { color: 'white' }
      }}
    />
  )
}

Access Floormap SDK Instance

React Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.

To use functions inside Floormap SDK such as applyStyle, addObject, controlling the camera - You can access to the FloormapSDK instance by passing ref to floorMapRef

class MyMap extends React.Component {
  floorMapRef = React.createRef()

  render() {
    return (
      <FloorMapComponent
        // ...
        floorMapRef={this.floorMapRef}
        didRender={space => {
          const floorMap = this.floorMapRef.current

          floormap.fitContent()
        }}
      />
    )
  }
}

See more on Floormap SDK Documentation

Extension Support

Register extensions to the floormap, passing array of extension instances as a props to the component.

import { OccupancyExtension } from '@wework/floormap-extensions'

class MyMap extends React.Component {
  occupancyExtension = new OccupancyExtension()

  render() {
    return (
      <FloorMapComponent
        // ...
        extensions={[this.occupancyExtension]}
      />
    )
  }
}

---

Development

git clone [e-mail]:WeConnect/react-floormap.git
cd react-floormap

yarn
yarn dev

Demo

yarn start:demo