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>

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 bounds = [
    [60.09113214661687, 29.372499465942653], // [west, south]
    [ 75.28846837828277,  38.490303039551236] // [east, north]
  ];



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

});


mapx.on('ready', async () => {
  mapx.ask('map', {
    method: 'setMaxBounds',
    parameters: [bounds]
  }).then(console.table);
})