test_mapx_sdk_static

by fxi

HTML

<script src="https://app.mapx.org/sdk/mxsdk.umd.js"></script>
<div id="mapx">
  <div class="overlay">
    <span>Loading...</span>
  </div>
</div>

CSS

#mapx {
  position: relative;
  height: 350px;
}

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(192, 192, 192, 0.8);
}

#mapx.loaded .overlay {
  display: none;
}

.overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-size: xx-large;
  opacity: 0.5;
}

.overlay span.enabled {
  opacity: 1;
}

JavaScript

const mc = document.getElementById("mapx");

const m = new mxsdk.Manager({
  container: mc,
  url: {
    host: 'app.mapx.org',
    port: 443,
    protocol: 'https'
  },
  static: true,
  verbose: true,
  params: {
    closePanels: true,
    //views: ['MX-ZE4ZU-YR5PG-9Y03Z'],
    language: 'en'
  }
});

m.on("ready", async () => {
  await m.ask("set_immersive_mode", { enable: true });
  //await m.ask("view_add", { idView: "MX-ZE4ZU-YR5PG-9Y03Z" });
  await m.ask('view_add', {idView:'MX-ML9PZ-PZ1SI-WVV85'});
  mc.classList.add("loaded");
});