JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

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

CSS

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

.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.staging.mapx.org',
    port: 443,
    protocol: 'https'
  },
  static: false,
  verbose: true,
  params: {
    closePanels: true,
    language: 'fr',
    project: 'MX-YBJ-YYF-08R-UUR-QW6',
    views: []
  }
});

m.on("ready", async () => {
  const res = await m.ask('set_immersive_mode', {
    toggle: true
  });
  mc.classList.add('loaded');
});