Integrating the Woosmap Indoor JS Widget
Get started with the Woosmap Indoor JS Widget. View a simple example, learn the concepts, and create custom indoor maps for your site.
Overview
The Woosmap Indoor JS Widget is an extension of the Map JS library that simplifies embedding an indoor map on your website. Widget properties are customised via a JSON configuration object passed to the constructor.
Indoor JS Widget included in the Indoor JS API
The widget lets users search for POIs, calculate the shortest path between two locations, and browse POIs grouped by level.
To enable the Indoor Widget when you load the Map JS library, add libraries=widgets as a query parameter:
<div id="map"></div>
<script>
let map;
function initMap() {
const myMap = new window.woosmap.map.Map(document.getElementById("map"), {
center: { lat: 48.88143952302778, lng: 2.356075199999964 },
zoom: 17.175689366844964,
});
window.map = myMap;
const indoorWidget = new woosmap.map.IndoorWidget();
indoorWidget.setMap(myMap);
}
</script>
<script defer src="https://sdk.woosmap.com/map/map.js?libraries=widgets&key=YOUR_API_KEY&callback=initMap"></script>
IndoorWidget Configuration
The IndoorWidget constructor expects 2 parameters
Indoor Widget Options
Find its interface definition in the reference documentation: IndoorWidgetOptions Interface
Indoor Renderer Options
This constructor allows you to add an IndoorRenderer configuration JSON for setting the IndoorRenderer parameters (more information about the IndoorRenderer parameters in the dedicated section).
Find an example of how-to initialize a IndoorWidget:
const indoorRendererConfiguration = {}; // Empty object = default behavior
const indoorWidgetConfiguration = {
directionsMode: "wheelchair", // Apply a default routing profile
units: "metric", // Define the distance unit for route distance calculation
};
const indoorWidget = new woosmap.map.IndoorWidget(indoorWidgetConfiguration, indoorRendererConfiguration);
indoorWidget.setMap(myMap);
Below you can see a sample usage of a Woosmap Indoor JS Widget displaying Woosmap Office in Montpellier (France).
How-to implement Navigation Widget
After calculating the shortest route thanks to the Indoor Direction Service, you can start the navigation widget to offer a better user navigation experience. This widget provides navigation instruction and guides the user from their location to their destination:
const indoorService = new window.woosmap.map.IndoorService();
indoorService.directions(
{
venueId: indoorRenderer.getVenue().venue_id,
origin: new woosmap.map.LatLng(x.latlng),
originLevel: 0,
destination: new woosmap.map.LatLng(y.latlng),
destinationLevel: 0,
language: "en",
units: "metric",
mode: "wheelchair",
},
(result) => {
indoorRenderer.setDirections(result);
indoorNavigation = new woosmap.map.NavigationWidget(indoorRenderer, exitNavigation);
indoorNavigation.setMap(myMap);
}
);
const exitNavigation = () => {
indoorNavigation.setMap(null);
indoorNavigation = null;
indoorRenderer.setDirections(null);
};