<select id="selector">
  <option value="default">Default</option>
  <option value="custom">Custom</option>
</select>
<div id='map'></div>

body { margin: 0; padding: 0; }
#map { position: absolute; top: 10; bottom: 0; height: 95%; width: 100%; }

const custom = (async () => {
  const response = await fetch('https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/d220f74a6425ccda1d24da6c3594f7677683b6ac/tomtom_custom.json');

  const custom = await response.json();
  
  const URLS = {
  default: 'https://api.tomtom.com/style/1/style/21.1.0-*?map=basic_main&traffic_incidents=incidents_day&traffic_flow=flow_relative0&poi=poi_main',
  custom: custom,
};

  const map = tt.map({
    key: 'cTZtlEL3WqMhPeK6t29BSh0q5hdNGQ9t',
    container: 'map',
    style: URLS['day'],
    center: [139.768435, 35.681054],
    zoom: 8,
  });

  map.addControl(new tt.FullscreenControl());
  map.addControl(new tt.NavigationControl());

  selector.addEventListener("change", () => {
    map.setStyle(URLS[selector.value]);
  });
})();