Indoor Map Renderer

How to configure and render indoor tiles.

Initialize the Woosmap Map IndoorRenderer
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	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 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");

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

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

‹ Get Started Direction service ›

Was this article helpful?

Have more questions? Submit a request