'Azure Maps Indoor Creator not rendering

I am following these tutorials:

I have successfully created my dataset and tileset however I cannot seem to render anything shown in the second link. It just appears as a blank page.

<!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 = "xxxxxxxxxxxxxxxxxx";
      const tilesetId = "af4e9dbf-9f7d-19c3-4d96-017353097e54";
      const statesetId = "485352c8-8cea-f1d4-ab23-17654b8b90f2";

      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: 9,
      });

      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>

Can anyone see what I'm doing wrong?

Solution 1:^[1]

According to this SO thread, if you expressed loading only exterior and unit and didn't pass the label layer which is what brings labels and allows you to add more properties to the units and if you don't see the map, try checking the conversion results which is always a good practice.
Another useful method to troubleshoot is to use the WFS API to look at the content in the dataset, for example, units via https://atlas.microsoft.com/wfs/datasets//collections/unit/items?api-version=1.0&subscription-key={{subcriptionkey}}
Also, refer this similar SO thread.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SuryasriKamini-MT

'Azure Maps Indoor Creator not rendering

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]