2D Mode

Overview

In 2D Mode, the floorplan is rendered as a bird’s-eye view, providing a flat, top-down perspective of a specific layer of the location. This mode is optimised for detailed navigation and interaction with individual spaces.Key Features

• Bird’s-Eye View: Displays a 2D top-down view of the specified layer.

• Zoom and Pan Navigation: Users can zoom in/out and pan across the floorplan for detailed exploration.

• Space Interaction: Clicking a space triggers the SPACE_CLICKED event, returning the space_id.

• Zone/Room Highlighting: Highlights a specific zone or room if zone_id or room_id is provided.

• Space Allocations: Displays none, one, or multiple space allocations based on the spaces array.

Configuration

• Trigger: Activated when layer_id is provided in the SDK configuration.

• Required Parameters:

  • key: ID of the container element.

  • access_token: Valid JWT for authentication.

  • location_id: Unique identifier for the location.

  • layer_id: Unique identifier for the specific layer (e.g., a floor).

• Optional Parameters:

  • zone_id: Highlights a specific zone if provided.

  • room_id: Highlights a specific room if provided.

  • spaces: Array of space IDs to highlight (e.g., ['space1', 'space2']).

  • dark_mode, class_name, title: For UI customisation and accessibility.

Behavior

• The floorplan renders a 2D view of the specified layer (layer_id).

• Users can zoom and pan to navigate the floorplan.

• Clicking a space emits a SPACE_CLICKED event with the space_id:

  sdk.on('SPACE_CLICKED', ({ space_id }) => {
    console.log('Space clicked:', space_id);
  });

• Specific zones or rooms are highlighted if zone_id or room_id is provided.

• Space allocations are visualised if the spaces array is included.

Use Case

Perfect for applications requiring precise interaction with spaces, such as desk booking, meeting room selection, or space management within a specific floor.

Example

const sdk = new gospaceFloorplan.FloorplanSDK({
  key: 'floorplan-container',
  access_token: 'client-specific-access-token',
  location_id: '12345',
  layer_id: 'abc123',
  zone_id: 'abc1234',
  spaces: ['space1', 'space2']
});
sdk.on('SPACE_CLICKED', ({ space_id }) => {
  console.log('Space clicked:', space_id);
});
sdk.init();