Indoor Map Renderer

How to configure and render indoor tiles.

  1. Initialize the Woosmap Map IndoorRenderer
  2. IndoorRenderer Configuration

You need to integrate the Map Js library to use the Indoor Renderer and render indoor tiles into your webpages.

Map JS API requires authorization via API Key for initialization and API calls. You can obtain it by following this steps.

Initialize the Woosmap Map IndoorRenderer

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

        const indoorRenderer = new



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

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
        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;


Some parameters can also be set after the map load:

        // Change the defined venue

// Change the selected floor level

// Highlight a POI

// Unselect a POI


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:

        48.88019613436609,  // latitude
        2.355090580556663,  // longitude
        0,                  // floor level
        70,                 // bearing (in degrees)
        true                // force the focus (boolean)

Was this article helpful?
Have more questions? Submit a request