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.

API Key
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 woosmap.map.IndoorRenderer()

indoorRenderer.setMap(window.myMap);

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 If enabled, the map is centered each time the selected floor is updated.
venue String null If the related Woosmap project is a multi venue project, the defined venue is loaded
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.
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:

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

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

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

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:

indoorRenderer.setUserLocation(
        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