@wework/floormap-utils

Floormap Utils

These are utility functions to be used for rendering floor map using FloormapGL

createRenderObjects(params)

Returns an array of renderer objects to be used for FloormapGL render() function

Example usage

import FloormapGL from '@wework/floormap.gl';
import { createRenderObjects } from '@wework/floormap-utils';

let objs = createRenderObjects({
  id: '83719599-420f-11e8-9d13-0642b0acf810',
  shapes: [
    [
      { x: 74.5, y: 31.00 },
      { x: 71.8, y: 30.29 },
      { x: 57.4, y: 30.5 },
      ...
    ],
    [
      { x: 86.2, y: 31.0 },
      { x: 74.4, y: 31.0 },
      { x: 56.4, y: 30.5 },
      ...
    ]
  ],
  type: 'space',
  subType: 'PRIVATE OFFICE',
  programType: 'WORK',
  roomNumber: '04-104',
  hasWindow: true
});

let renderer = new FloormapGL({
  target: document.getElementById('my-map'),
  size: {
    width: 1024,
    height: 768
  },
  antialias: true,
  pixelRatio: 2,
  backgroundColor: 'rgb(248,248,248)'
});

renderer.render(objs);

applyInstancing(objs, renderer)

This will enable mesh instancing for those mesh with similar geometries

Example usage

import FloormapGL from '@wework/floormap.gl';
import { createRenderObjects, applyInstancing } from '@wework/floormap-utils';

...

let renderer = new FloormapGL({
  target: document.getElementById('my-map'),
  size: {
    width: 1024,
    height: 768
  },
  antialias: true,
  pixelRatio: 2,
  backgroundColor: 'rgb(248,248,248)'
});

let renderObjects = []
rooms.forEach((room) => {
  const objectType = room.attributes.objectType;
  const roomType = room.attributes.roomType;
  let objs = createRenderObjects({
    id: room.id,
    shapes: room.attributes.boundaries,
    type: room.type,
    subType: objectType ? objectType : roomType,
    programType: room.attributes.programType,
    roomNumber: room.attributes.number,
    hasWindow: room.attributes.content.hasWindow,
    centroid: room.attributes.centroid,
    locationAngle: room.attributes.locationAngle,
  });
  objs.forEach((o) => {
    renderObjects.push(o);
  })
})

applyInstancing(renderObjects, renderer);

renderer.render(renderObjects);

getCenter(points)

Returns the { x, y } center of the geometry. Sample use case is, if you want to place an image or a text on the center of the room.

getSize(points)

Returns the box { width, height } given the points.