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

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

const engineType = H.Map.EngineType['HARP'];
const style = new H.map.render.harp.Style(URLS['default']);
const layer = platform.getOMVService().createLayer(style, { engineType });

const map = new H.Map(
    document.getElementById('map'),
    layer,
    {
        engineType,
        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 engineType = H.Map.EngineType['HARP'];
    const style = new H.map.render.harp.Style(URLS[selector.value]);
    const provider = map.getBaseLayer().getProvider();
    provider.setStyle(style);
});