Floor plans

The floor plan shows desks, meeting rooms, seats, parking bays and lockers where they really are, with their state now — available, yours, booked, in use, reserved or not bookable — told apart by colour and by pattern, and who has each one. People choose one or several by click, tap, keyboard or the list beside the map, and your page books them.

Filter by kind, equipment, size and availability; tint team zones underneath; switch floors; zoom and pan with the wheel, a pinch, the buttons or the keys. The floor's drawing is an image or an SVG, cleaned of anything that could run, and marked shapes in a drawing become bookable spaces. An editor draws, moves and resizes spaces, with undo. Availability is separate from the plan and can change live.

Book a desk

An office floor with three team zones, desks, meeting rooms and a sofa. Choose up to three places, or use the list; arrow keys move to the nearest space in each direction. Change the day above the map and the bookings change with it.

Day

Choose up to three desks or rooms, then Book.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-floor-plan id="fp-desks" selection-mode="multiple" max-selection="3" style="inline-size: 100%; --bmx-floor-plan-height: 30rem">
  <label slot="header" class="fp-day">Day
    <select id="fp-day">
      <option value="0">Today</option>
      <option value="1">Tomorrow</option>
      <option value="2">Friday</option>
    </select>
  </label>
</bmx-floor-plan>

A meeting room for eight

The second floor's rooms, filtered by the page for eight people with video. Spaces that do not fit are dimmed and left out of the list. Clear the filter in the toolbar to see the floor again.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-floor-plan id="fp-rooms" selection-mode="single" style="inline-size: 100%; --bmx-floor-plan-height: 24rem"></bmx-floor-plan>

Live, from the sensors

A car park and its lockers, coloured by desk sensors and barrier readers through the day. Start the feed: the page merges in a change every second, and the map and the counts in the key follow without redrawing the plan.

Start the feed

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-floor-plan id="fp-live" display="map" style="inline-size: 100%; --bmx-floor-plan-height: 20rem"></bmx-floor-plan>

Drawing the plan

Edit mode, for facilities teams. Draw desks, rooms and seats, or outline an odd-shaped space corner by corner; drag to move, pull a handle to resize, and change names, capacity and equipment beside the map. Everything snaps to a 10 cm grid; Ctrl + Z undoes.

Show the plan as JSON

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-floor-plan id="fp-edit" mode="edit" snap-to="10" display="map" style="inline-size: 100%; --bmx-floor-plan-height: 26rem"></bmx-floor-plan>

From an architect's drawing

An SVG floor drawing whose desks and rooms are marked with data-space, a name and a kind — one is rotated, one is a polygon. Import it: the shapes become spaces in the right places, and anything in the drawing that could run (a script, an event handler, an outside link) is removed first.

Import the drawing

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-floor-plan id="fp-imported" selection-mode="single" display="map" style="inline-size: 100%; --bmx-floor-plan-height: 22rem"></bmx-floor-plan>