Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@wework/react-floormap
Advanced tools
React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience
React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience
yarn add @wework/react-floormap@v2
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) => {}}
/>
)
}
}
type Identifier = string | { uuid: string }
export type Props = {
configuration?: FloorMapConfiguration
buildingId?: string
floorId?: 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
// 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)
}
<FloorMapComponent
// ...
onClickSpace={event => {}}
onMouseOver={event => {}}
onMouseLeave={event => {}}
/>
onClickSpace
When user click on a spaceonMouseOver
When mouse over on a spaceonMouseLeave
When mouse leave on a spaceevent
object will be contains:
id
- ID of the spacepayload
- Event informationdata?
- If user interacts with space, the data field will presented<FloorMapComponent
// ...
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 messagedata
- Data associated with the erroroptions
- Options parameters that was passed to render functiononSessionExpired(error)
Get call when session in the map is expired
<FloorMapComponent
// ...
initialPolarAngle={0} // Vetical rotation
initialAzimuthAngle={90} // Horizontal rotation
initialFitContent={{ padding: 50 }}
maxPolarAngle={45}
maxAzimuthAngle={45}
/>
deskLayout
- Show/Hide desk layoutdeskInteractable
- Enable interaction on Desk and Chair<FloorMapComponent
// ...
deskLayout={true}
deskInteractable={true}
/>
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 selectionselectionColor
- 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"
/>
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: [] })
}
}}
/>
)
}
}
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.
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,
}
}}
/>
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[]|UUID[])
on FloorMap Instance
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])
}}
configureSpace={space => {
if (this.state.selectedUuid === space.uuid) {
return {
color: 'red',
}
} else {
return { color: '#f0f0f0' }
}
}}
/>
)
}
}
To prevent configureSpace
get called for every spaces, you can pass array of spaces/uuid to configureSpace
to reload only specific spaces.
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' }
}}
/>
)
}
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
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]}
/>
)
}
}
git clone git@github.com:WeConnect/react-floormap.git
cd react-floormap
yarn
yarn dev
yarn start:demo
FAQs
React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience
The npm package @wework/react-floormap receives a total of 1 weekly downloads. As such, @wework/react-floormap popularity was classified as not popular.
We found that @wework/react-floormap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 30 open source maintainers collaborating on the project.
Did you know?
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.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.