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
Indoor JS Widget included in the Indoor JS API
IndoorWidget Configuration
How-to implement Navigation Widget

Overview

The Woosmap Indoor JS Widget is an extension of the Map Js library that you can retrieve to simplify your integration. Our aim is to help you to integrate a powerful indoor experience on your website in the simplest way possible. To match your preferences and website’s graphic style, all the properties of your Indoor JS Widget can be customised client side thanks to the Json object dedicated to the configuration of the widget. Here is a quick overview of some of the properties you’ll be able to set in your integration code:

Woosmap Map Indoor Widget provides you a first integration that simplify integration of Woosmap Indoor Map in your web application.

Thanks to this widget, the user can search for a POI, calculate the shortest path between 2 locations and discover the map throught POI list 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

A widget configuration json can be added to the IndoorWidget constructor. Find below an example with main parameters:

Field	Type	Default	Description
units	String	metric	Define the distance unit for route distance calculation (‘metric’ or ‘imperial’).
directionsMode	String	null	Define the routing profile you want apply by default.
avoidZones	String	null	Exclude one/multiple zone from the walkbale network of the venue, expected zone format `level;lat,lng;lat,lng; ... ;lat,lng`

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

        const indoorRendererConfiguration = {};

const indoorWidgetConfiguration = {
  directionsMode: "wheelchair",
  units: "metric" // Define the distance unit for route distance calculation
};

const indoorWidget = new woosmap.map.IndoorWidget(indoorWidgetConfiguration, indoorRendererConfiguration);

indoorWidget.setMap(myMap);

Direction mode parameter can also be set after the map load:

        // Change the routing profile you want apply for calculating route.
indoorRenderer.setDirectionsMode("wheelchair");

Below you can see a sample usage of a Woosmap Indoor JS Widget displaying Woosmap Office in Montpellier (France).

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 guide the user from his location to his 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);
};

‹ Direction service References ›

Was this article helpful?

Have more questions? Submit a request

Overview

Indoor JS Widget included in the Indoor JS API

IndoorWidget Configuration

How-to implement Navigation Widget