HERE maps javascript API: How to apply styling from the style editor (.json)

Viewed 20

TLDR: How to change the map style using .json output from the HERE maps editor?

Therefore I created a "custom" style (using one of the presets) in the new HERE map style editor and exported it, receiving a single .json file.

As the introduction docs barely deliver any information on how to apply this simple styling I tried several things.:

#1 Initializing 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 Try applying 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);

Here provider.setStyle(); method does not exist as opposed in docs. But I understand this, as it 1. requires an URL + 2. a .yaml file which we don't get from the HERE editor. So...

#2.2 Try applying the style with HARP rendering engine

Change HARP style at load

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 }
});
//... continuous as in #1

This results in a InvalidArgumentError: H.service.omv.Provider (Argument #1 [object Object]) even if done as in the example.

0 Answers
Related