Source: https://developers.woosmap.com/products/indoor-api/guides/map-renderer/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Indoor Map Renderer



You need to integrate the [Map Js library](/products/map-api/get-started/) to use the Indoor Renderer and render indoor map into your webpages.

**API Key**  
The Map JS API requires authorization via API Key for initialization and API calls. You can obtain it by following [this steps](/api-reference/authentication/#registering-a-woosmap-public-api-key).

## Initialize the Woosmap Map IndoorRenderer

As soon as you initialize the Map Js library, you can overlay World map with indoor of your venue.

```javascript
const indoorRenderer = new woosmap.map.IndoorRenderer();

indoorRenderer.setMap(window.myMap);
```

Here is a basic sample of Woosmap offices in Montpellier (France):

https://demo.woosmap.com/js-samples/samples/indoor-map-advanced/app/dist/
[](https://demo.woosmap.com/js-samples/samples/indoor-map-advanced/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/indoor-map-advanced/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/indoor-map-advanced/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/indoor-map-advanced)

## IndoorRenderer Configuration

You can add a configuration json in the IndoorRenderer constructor. Find below an example with main parameters:

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| centerMap | Boolean | true | Center the map each time the selected floor is updated. |
| venue | String | null | Choose which venue to open if the project is composed of multiple venues |
| defaultFloor | Integer | 0 | Define the default floor level that will be selected during the map load. |
| highlightPOIByRef | String | null | Set the `ref` of the POI to highlight it during the map load. |
| icon | Object | null | Define the icon you want use in the venue selector view. |
| disablePOIInfowindow | Boolean | false | Disable the info window automatically displayed when a POI is selected |
| forceExtrusion | Boolean | false | Force the extrusion of polygon even if tilt is null |
| hideLevelSelector | Boolean | false | Hide the default floor level selector |

```javascript
const indoorRendererConfiguration = {
  centerMap: false,
  venue: "wgs", // venue identifier
  defaultFloor: 3, // floor level number
  highlightPOIByRef: "elevator1", // `ref` value of the elevator
  icon: {
    url: "https://url-to-your-icon/icon.png",
    scaledSize: { height: 40, width: 40 },
    anchor: { x: 20, y: 20 },
  },
};

const indoorRenderer = new woosmap.map.IndoorRenderer(indoorRendererConfiguration);
```

Some parameters can also be set after the map load:

```javascript
// Change the defined venue
indoorRenderer.setVenue("wgs");

// Change the selected floor level
indoorRenderer.setFloor(0);

// Highlight a POI
indoorRenderer.highlightFeatureByRef("meeting_room_001");

// Unselect a POI
indoorRenderer.unselectFeature();
```

### Define the user location

Render a blue dot to represent the user location. Location data is required (latitude, longitude and floor level) and two additional parameters can be defined to improve the user experience:

- `bearing` - The compass bearing of the location is the direction, in degrees, that an object is going in.
- `forceFocus` - true: center the map and change the selected floor level / false: update the blue dot location without change the selected floor level and the bounding box

```javascript
indoorRenderer.setUserLocation(
  48.88019613436609, // latitude
  2.355090580556663, // longitude
  0, // floor level
  70, // bearing (in degrees)
  true // force the focus (boolean)
);
```