Indoor Map Renderer
How to configure and render indoor tiles.
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:
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)
);