JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://app.staging.mapx.org/sdk/mxsdk.umd.js"></script>
<span id="result"></span>
<button role="button" id="toggle">test</button>
<div id="mapx"></div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#mapx {
  height: calc(100% - 20px);
  width: 100%;
}

#result {
  width: "100%";
  height: "20px";
}

JavaScript

const elResult = document.getElementById("result");
const elBtn = document.getElementById("toggle");

const mapx = new mxsdk.Manager({
  container: document.getElementById('mapx'),
  verbose: true,
  url: "https://app.staging.mapx.org",
  static : false,
  params: {
    project : 'MX-QNN-G0C-I6F-GZB-MPA',
    language: 'en',
    closePanels: false,
    zoomToViews: false,
    views : ["MX-3OE5B-HANPW-I3SQ5"]
  }

});

let count = 0;
let init = false

mapx.on('ready', async () => {
  elResult.innerText = `Reload count: ${count++}`
  
  if(!init){
  elBtn.addEventListener("click",async()=>{
 const views = await mapx.ask('get_views')
 alert(views.length);
})
  }
  init=false;
})