<select id="selector">
  <option value="road">road</option>
  <option value="grayscale_dark">grayscale dark</option>
</select>
<div id="map"></div>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 10; bottom: 0; height: 95%; width: 100%; }

const map = new atlas.Map("map", {
  center: [-118.270293, 34.039737],
  zoom: 14,
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "JT_y66nzr4xRmDNwtrvbCeB8R3Q2Y2pCXEp7u0DZsKo"
  }
});

const selector = document.getElementById("selector");

selector.addEventListener("change", (id) => {
  console.log(selector.value)
  map.setStyle({style: selector.value});
});

External CSS

  1. https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.6/atlas.min.css

External JavaScript

  1. https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.6/atlas.min.js