Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wework/react-floormap

Package Overview
Dependencies
Maintainers
30
Versions
363
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wework/react-floormap

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

  • 2.0.1-v2.459
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-66.67%
Maintainers
30
Weekly downloads
 
Created
Source

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
  // ...
  initialPolarAngle={0} // Vetical rotation
  initialAzimuthAngle={90} // Horizontal rotation
  initialFitContent={{ 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

FAQs

Package last updated on 02 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc