<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 URLS = {
  default: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/f96d70703c7486e91cd3707c35c65ded7ca6f5b0/default.yaml',
  custom: 'https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/2f0ded386fb59b58ef7dcdf6bc735c8ca53c41bc/custom.yaml',
};

const platform = new H.service.Platform({
    apikey: 'VF3dECM64igOgk6k73EuS1pimnH_fZfGcC4Dh650gvQ'
  });

const style = new H.map.render.webgl.Style(URLS['default'], 'https://js.api.here.com/v3/3.1/styles/omv/');
const layer = platform.getOMVService().createLayer(style);

const map = new H.Map(document.getElementById('map'), layer, {
    center: {lat: 52.496, lng: 13.382},
    zoom: 11,
});

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

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

selector.addEventListener("change", () => {
    const style = new H.map.render.webgl.Style(URLS[selector.value], 'https://js.api.here.com/v3/3.1/styles/omv/');
    const provider = map.getBaseLayer().getProvider();
    provider.setStyle(style);
});