# 2D Mode

Overview

{% columns %}
{% column %}
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).
    {% endcolumn %}

{% column %}

<figure><img src="https://2927481958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnjAXMBvJYG62hlTa1Lk%2Fuploads%2FnBu9e0qd2CW8AqAfxUI1%2F11-W-QUINCY-COURT-Floor-3%20(1).png?alt=media&#x26;token=f5490a6b-7b68-4ce8-b164-fd7966b39a88" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

*
* 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:

  ```javascript
  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

```javascript
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();
```