Use the Azure Maps Indoor Maps module

The Azure Maps Web SDK includes the Azure Maps Indoor module. The Azure Maps Indoor module allows you to render indoor maps created in Azure Maps Creator services.

Prerequisites

  1. Make an Azure Maps account
  2. Create a Creator resource
  3. Obtain a primary subscription key, also known as the primary key or the subscription key.
  4. Get a tilesetId and a statesetId by completing the tutorial for creating Indoor maps. You'll need to use these identifiers to render indoor maps with the Azure Maps Indoor Maps module.

Embed the Indoor Maps module

You can install and embed the Azure Maps Indoor module in one of two ways.

To use the globally hosted Azure Content Delivery Network version of the Azure Maps Indoor module, reference the following JavaScript and Style Sheet references in the <head> element of the HTML file:

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>
<script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>

Or, you can download the Azure Maps Indoor module. The Azure Maps Indoor module contains a client library for accessing Azure Maps services. Follow the steps below to install and load the Indoor module into your web application.

  1. Install the azure-maps-indoor package.

    >npm install azure-maps-indoor
    
  2. Reference the Azure Maps Indoor module JavaScript and Style Sheet in the <head> element of the HTML file:

    <link rel="stylesheet" href="node_modules/azure-maps-drawing-tools/dist/atlas-indoor.min.css" type="text/css" />
    <script src="node_modules/azure-maps-drawing-tools/dist/atlas-indoor.min.js"></script>
    

Instantiate the Map object

First, create a Map object. The Map object will be used in the next step to instantiate the Indoor Manager object. The code below shows you how to instantiate the Map object:

const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13203, 47.63645],
  //or, you can use bounds: [# west, # south, # east, # north] and replace # with your map's bounds
  style: "blank",
  view: 'Auto',
  authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,
});

Instantiate the Indoor Manager

To load the indoor tilesets and map style of the tiles, you must instantiate the Indoor Manager. Instantiate the Indoor Manager by providing the Map object and the corresponding tilesetId. If you wish to support dynamic map styling, you must pass the statesetId. The statesetId variable name is case-sensitive. Your code should like the JavaScript below.

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: tilesetId,
    statesetId: statesetId // Optional
});

To enable polling of state data you provide, you must provide the statesetId and call indoorManager.setDynamicStyling(true). Polling state data lets you dynamically update the state of dynamic properties or states. For example, a feature such as room can have a dynamic property (state) called occupancy. Your application may wish to poll for any state changes to reflect the change inside the visual map. The code below shows you how to enable state polling:

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: tilesetId,
    statesetId: statesetId // Optional
});

if (statesetId.length > 0) {
    indoorManager.setDynamicStyling(true);
}

Indoor Level Picker Control

The Indoor Level Picker control allows you to change the level of the rendered map. You can optionally initialize the Indoor Level Picker control via the Indoor Manager. Here's the code to initialize the level control picker:

const levelControl = new atlas.control.LevelControl({ position: "top-right" });
indoorManager.setOptions({ levelControl });

Indoor Events

The Azure Maps Indoor module supports Map object events. The Map object event listeners are invoked when a level or facility has changed. If you want to run code when a level or a facility have changed, place your code inside the event listener. The code below shows how event listeners can be added to the Map object.

map.events.add("levelchanged", indoorManager, (eventData) => {

  //code that you want to run after a level has been changed
  console.log("The level has changed: ", eventData);
});

map.events.add("facilitychanged", indoorManager, (eventData) => {

  //code that you want to run after a facility has been changed
  console.log("The facility has changed: ", eventData);
});

The eventData variable holds information about the level or facility that invoked the levelchanged or facilitychanged event, respectively. When a level changes, the eventData object will contain the facilityId, the new levelNumber, and other metadata. When a facility changes, the eventData object will contain the new facilityId, the new levelNumber, and other metadata.

Example: Use the Indoor Maps Module

This example shows you how to use the Azure Maps Indoor module in your web application. Although the example is limited in scope, it covers the basics of what you need to get started using the Azure Maps Indoor module. The complete HTML code is below these steps.

  1. Use the Azure Content Delivery Network option to install the Azure Maps Indoor module.

  2. Create a new HTML file

  3. In the HTML header, reference the Azure Maps Indoor module JavaScript and style sheet styles.

  4. Initialize a Map object. The Map object supports the following options:

    • Subscription key is your Azure Maps primary subscription key.
    • center defines a latitude and longitude for your indoor map center location. Provide a value for center if you don't want to provide a value for bounds. Format should appear as center: [-122.13315, 47.63637].
    • bounds is the smallest rectangular shape that encloses the tileset map data. Set a value for bounds if you don't want to set a value for center. You can find your map bounds by calling the Tileset List API. The Tileset List API returns the bbox, which you can parse and assign to bounds. Format should appear as bounds: [# west, # south, # east, # north].
    • style allows you to set the color of the background. To display a white background, define style as "blank".
    • zoom allows you to specify the min and max zoom levels for your map.
  5. Next, create the Indoor Manager module. Assign the Azure Maps Indoor tilesetId, and optionally add the statesetId.

  6. Instantiate the Indoor Level Picker control.

  7. Add Map object event listeners.

Your file should now look similar to the HTML below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Indoor Maps App</title>
    
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>

    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
      
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #map-id {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map-id"></div>
    <script>
      const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";
      const tilesetId = "<your tilesetId>";
      const statesetId = "<your statesetId>";

      const map = new atlas.Map("map-id", {
        //use your facility's location
        center: [-122.13315, 47.63637],
        //or, you can use bounds: [# west, # south, # east, # north] and replace # with your Map bounds
        style: "blank",
        view: 'Auto',
        authOptions: { 
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey
        },
        zoom: 19,
      });

      const levelControl = new atlas.control.LevelControl({
        position: "top-right",
      });

      const indoorManager = new atlas.indoor.IndoorManager(map, {
        levelControl: levelControl, //level picker
        tilesetId: tilesetId,
        statesetId: statesetId // Optional
      });

      if (statesetId.length > 0) {
        indoorManager.setDynamicStyling(true);
      }

      map.events.add("levelchanged", indoorManager, (eventData) => {
        //put code that runs after a level has been changed
        console.log("The level has changed:", eventData);
      });

      map.events.add("facilitychanged", indoorManager, (eventData) => {
        //put code that runs after a facility has been changed
        console.log("The facility has changed:", eventData);
      });
    </script>
  </body>
</html>

To see your indoor map, load it into a web browser. It should appear like the image below. If you click on the stairwell feature, the level picker will appear in the upper right-hand corner.

indoor map image

See live demo

Next steps

Read about the APIs that are related to the Azure Maps Indoor module:

Learn more about how to add more data to your map: