JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

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

CSS

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

.mapx {
  height: 100%;
  width: 100%;
}

.json {
  color: #0f0;
  position: absolute;
  top: 60px;
  left: 20px;
  pointer-events: none;
}

JavaScript

const elOut = document.getElementById('out');
const elMapx = document.getElementById('mapx');

const m = new mxsdk.Manager({
  container: elMapx,
  url: "https://app.mapx.org/static.html?language=en&p=34.24&b=85.698&z=10.591&lat=20.978&lng=16.568&t3d=false&sat=true&theme=water_light",
  static: true,
  verbose: true,
  params: {
    closePanels: true,
    zoomToViews: false,
  }
});

m.on('ready', async () => {
 

  await m.ask('map', {
    method: 'setMinZoom',
    parameters: [10]
  });

  await m.ask('map', {
    method: 'setMinZoom',
    parameters: [12]
  });


});