Have ideas to improve npm?Join in the discussion! »

    @wework/react-floormap
    TypeScript icon, indicating that this package has built-in type declarations

    1.8.7 • Public • Published

    React FloorMap Component

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

    Installation

    yarn add @wework/react-floormap
    

    FloorMap Components

    Display Floormap by providing buildingId and floorId

    import React from 'react'
    import { FloorMap } from `@wework/react-floormap`
     
    class MyMap extends React.Component {
      render() {
        return (
          <FloorMap
            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) => {}}
          />
        )
      }
    }

    Events

    User Event and Data Change

    <FloorMap
      // ...
      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

     
    <FloorMap
      // ...
      onDataChange={(event) => {}}
      onLoad={({ loading }) => {}}
      onRender={({ 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)

    Get call when the map start loading data

    onLoad: function({ buildingId, floorId })

    onRender(event)

    Get call when the map finished rendering

    onError(error)

    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

    <FloorMap
      // ...
      polarAngle={0} // Vetical rotation
      azimuthAngle={90} // Horizontal rotation
      fitContent={{ padding: 50 }}
    />

    Desk Layout

    • deskLayout - Show/Hide desk layout
    • deskInteractable - Enable interaction on Desk and Chair
    <FloorMap
      // ...
      deskLayout={true}
      deskInteractable={true}
    />

    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

    <FloorMap
      // ...
      selectedSpaces={[uuid1, uuid2]}
      highlightedSpaces={[uuid3]}
      selectionColor="#acc3fe"
      highlightColor="#ffffff"
    />
    Example
    class MyMap extends React.Component {
      state = { selected: []}
      render() {
        return (
          <FloorMap
            // ...
            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: [] })
              }
            }}
          />
        )
      }
    }

    Advance Styling and Configure spaces

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

    <FloorMap
      // ...
      configureSpace={(space) => {
        // Hide all DESK and CHIAR
        if (space.type === 'object') {
          return { visible: fales }
        }
     
        // All work type will be #f0f0ff
        if (space.programType === 'WORK') {
          return {
            style: { color: '#f0f0ff' },
            interactable: true,
          }
        }
     
        // otherwise set color to #d0d0d0
        // and set interactable to false
        return {
          style: { color: '#d0d0d0' }
          interactable: false,
        }
      }}
    />

    configureSpace 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[]?) on FloorMap Instance

    example

    Use configureSpace to style space when user click

    class MyMap extends React.Component {
      floorMapRef = React.createRef()
     
      render() {
        return (
          <FloorMap
            // ...
            ref={this.floorMapRef}
            onClickSpace={({ data }) => {
              this.setState({ currentSelection: data })
              this.floorMapRef.invalidate()
            }}
            configureSpace={(space) => {
              // Has currectSelection and uuid === space.uuid
              if (
                this.currentSelection 
                && this.currentSelection.uuid === space.uuid
              ) {
                return { style: { color: 'green' }}
              } else {
                // Otherwise
                return { style: { color: '#f0f0f0' }}
              }
            }}
          />
        )
      }
    }

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

    Access Floormap SDK Instance

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

    To use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling getInstance() on the ref

    class MyMap extends React.Component {
      floorMapRef = React.createRef()
     
      render() {
        return (
          <FloorMap
            // ...
            ref={this.floorMapRef}
            onRender={(space) => {
              const floorMap = this.floorMapRef.current.getInstance()
              
              floormap.addOverlay(...)
            }}
          />
        )
      }
    }

    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 (
          <FloorMap
            // ...
            extensions={[this.occupancyExtension]}
          />
        )
      }
    }

    Development

    git clone git@github.com:WeConnect/react-floormap.git
    cd react-floormap
     
    yarn
    yarn dev

    Demo

    yarn start:demo

    Keywords

    none

    Install

    npm i @wework/react-floormap

    DownloadsWeekly Downloads

    60

    Version

    1.8.7

    License

    none

    Unpacked Size

    274 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar