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