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>
<pre id="out" class="json">Click on features</pre>

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: {
    host: 'app.staging.mapx.org',
    port: 443,
    protocol: 'https'
  },
  static: true,
  verbose: true,
  params: {
    closePanels: true,
    zoomToViews: false,
    project: 'MX-QNN-G0C-I6F-GZB-MPA',
    views: ['MX-CRPXN-W8IAC-XWFLU'],
    language: 'en',
    lockProject: true,
    viewsListFlatMode: true,
    z: 10.686,
    lat: 9.018,
    lng: 38.749,
    theme : 'smartgray'
  }
});

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

  await m.ask('set_features_click_sdk_only', {
    enable: true
  });
});

// handle click
m.on('click_attributes', (o) => {

  elOut.innerText = JSON.stringify(o, 0, 2);

});