MapX SDK - common locations

Demo of the MapX's common location feature from the sdk.

by fxi

HTML

<script src="https://app.staging.mapx.org/sdk/mxsdk.umd.js"></script>
<h1>Example common locations</h1>
  <div class="container">
    <div class="pane-left item">
    <label for="selLoc">Select a location</label>
      <select id='selLoc'></select>
     
    </div>
    <div id="mapx" class="mapx pane-right item"></div>
  </div>

CSS

html,
body {
  font-family: helvetica;
}

.container {
  width: 100%;
  min-height: 500px;
  display: flex;
}

.pane-left {
  background: #eee;
  font-size: 0.8em;
  padding: 0 1em;
  width: 200px;
  display: flex;
  flex-direction: column;
}

.pane-right {
  flex-grow: 1;
}

JavaScript

const mapx = new mxsdk.Manager({
  container: document.getElementById('mapx'),
  url: {
    host: 'app.staging.mapx.org',
    protocol: 'https',
    port: 443
  },
  static: true,
  verbose: false,
  params: {
    closePanels: true
  }
});
const elSelect = document.getElementById('selLoc');

elSelect.addEventListener('change', updateLocation);

async function updateLocation() {
  const code = elSelect.value;

  if (code === "default") {
    return;

  }
  try {
    await mapx.ask('common_loc_fit_bbox', {
      code
    });
  } catch (e) {
    console.warn(e);
  }
}


mapx.on('ready', async () => {
  const locs = await mapx.ask('common_loc_get_table_codes');
  locs.unshift({
    code: "default",
    name: 'Choose...'
  });
  const elFrag = document.createDocumentFragment();
  for (const l of locs) {
    const elOpt = document.createElement('option');
    elOpt.value = l.code;
    elOpt.innerText = l.name;
    elFrag.appendChild(elOpt);
  }
  elSelect.replaceChildren(elFrag);
})




mapx.on('message', (message) => {
  if (message.level === 'log') {
    console.info(`%c 🤓 ${message.text}`, 'color: #76bbf7');
  } else if (message.level === 'message') {
    console.info(`%c 😎 ${message.text}`, 'color: #70e497');
  } else if (message.level === 'warning') {
    console.info(`%c 🥴 ${message.text}`, 'color: #d09c23');
  } else if (message.level === 'error') {
    console.info(`%c 🤬 ${message.text}`, 'color: #F00');
  }
});