Only showing indoor maps

Hide the exterior view and only show indoor maps. Use the Switch Indoor Map button to switch between indoor maps.

Loading...
<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://unpkg.com/wrld.js@1.x.x"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />

    <link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/v1/latest/css/wrld.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/v1/latest/indoor_control.js"></script>

  </head>
  
  <body>
  <div style="position: relative">
<style>
  .loading-screen {
      position: absolute;
      right: 0px;
      left: 0px;
      top: 0px;
      bottom: 0px;
      z-index: 150;
      background-color: rgb(61, 68, 71);
      height: 400px;
  }

  .hidden {
      visibility: hidden;
  }

  .loading-text {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: inherit;
      font-family: amsibold,'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  }

  .eegeo-indoor-control #eegeo-exit-interior-button-container { 
      visibility: hidden;
  }
</style>

<div id="loading-screen" class="loading-screen">
  <div class="loading-text">Loading...</div>
</div>
<div id="topRightButtons" style="position: absolute; right: 0; bottom: 20px; z-index: 20">
  <button type="button" onclick="switchIndoorMap()">Switch Indoor Map</button>
</div>
<div id="widget-container" class="wrld-widget-container"></div>
<div id="map" style="height: 400px"></div>
<script>

  const indoorMaps = ["westport_house", "EIM-e16a94b1-f64f-41ed-a3c6-8397d9cfe607", "intercontinental_hotel_8628", "70f9b00f-8c4f-4570-9a23-62bd80a76f8a"];
  var indoorMapLoaded = {};
  var currentIndoorMapIndex = 0;
  var currentIndoorMap = indoorMaps[currentIndoorMapIndex];

  var map = Wrld.map("map", "your_api_key_here", {
    center: [56.459993, -2.978231],
    indoorsEnabled: true,
    drawClearColor: "#3d4447",
    indoorMapBackgroundColor: "#3d4447"
  });

  var indoorControl = new WrldIndoorControl("widget-container", map);
  var isShowingLoadingScreen = true;

  setLoadingScreenVisibility(isShowingLoadingScreen);

  function onIndoorMapEntered(event) {
    if (isShowingLoadingScreen) {
      if (currentIndoorMap in indoorMapLoaded && indoorMapLoaded[currentIndoorMap]) {
        setLoadingScreenVisibility(false);
      }
      else {
        indoorMapLoaded[currentIndoorMap] = true;
        setTimeout(() => {
          setLoadingScreenVisibility(false);
        }, 500);
      }
    }
  }

  function onInitialStreamingComplete() {
    enterCurrentIndoorMap();
  }

  function setLoadingScreenVisibility(visible) {
    var className = visible ? "loading-screen" : "loading-screen hidden";
    var loadingScreen = document.getElementById("loading-screen");
    loadingScreen.className = className;
    isShowingLoadingScreen = visible;
  }

  function enterCurrentIndoorMap() {
    if (map.indoors.isIndoors()) {
      map.indoors.exit();
    }
    map.indoors.enter(currentIndoorMap, {
          animate: false
    });
  }

  var switchIndoorMap = function () {
    currentIndoorMapIndex = (currentIndoorMapIndex + 1) % indoorMaps.length;
    currentIndoorMap = indoorMaps[currentIndoorMapIndex];

    if (!isShowingLoadingScreen) {
      setLoadingScreenVisibility(true);
      enterCurrentIndoorMap();
    }
  }

  function onIndoorMapEnterFailed(event) {
    console.log("onIndoorMapEnterFailed");
  }

  map.on("initialstreamingcomplete", onInitialStreamingComplete)
  map.indoors.on("indoormapenter", onIndoorMapEntered);
  map.indoors.on("indoormapenterfailed", onIndoorMapEnterFailed);
</script>

  </div>
  </body>
</html>
v1.1.0