# 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="/files/PiwMafLdRhChzf8GX5He" 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();
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.gospace.com/floorplan-sdk/2d-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.