TLDR: How can I change the map style using a .json file from HERE maps editor?
After creating a "custom" style in the new HERE map style editor and exporting it as a single .json file, I encountered difficulties applying this styling due to lack of clear information in the introduction docs.
#1 Setting up the map
const defaultLayers = this.platform.createDefaultLayers();
const map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, {
zoom: 10,
center: { lat: 0, lng: 0 }
});
new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
H.ui.UI.createDefault(map, defaultLayers, "de-DE");
#2.1 Attempting to apply the style with default rendering engine
Change style at load
const provider = map.getBaseLayer()?.getProvider();
const style = new H.map.Style(require('pathToMyStyle.json'))
provider?.setStyleInternal(style);
The method provider.setStyle(); does not exist as mentioned in the documentation. This is because it requires both an URL and a .yaml file which are not provided by the HERE editor. So...
#2.2 Trying to apply the style with HARP rendering engine
const engineType = H.Map.EngineType["HARP"];
const style = new H.map.render.harp.Style(require('pathToMyStyle.json'));
const vectorLayer = this.platform
.getOMVService()
.createLayer(style, { engineType });
const map = new H.Map(document.getElementById('map'), vectorLayer, {
engineType,
zoom: 10,
center: { lat: 0, lng: 0 }
});
//... continues from #1 setup
Despite following the example, this approach resulted in an error:
InvalidArgumentError: H.service.omv.Provider (Argument #1 [object Object])