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

Question

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.

Answer 1

#2.2 is the way to go, and it is working when I try it. Is the sample working out of the box for you? Perhaps it is an issue with path?

Answer 2

#1 For default WebGL engine we have only this style editor

Example or

https://alexisad.github.io/jsapi31/road-labels.html?apikey=your_apikey

#2 HARP HARP style editor

Example - Please don't forget to add

<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-harp.js"></script>

to head html element!

/**
 * Adds a polyline between Dublin, London, Paris and Berlin to the map
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addPolylineToMap(map) {
  var lineString = new H.geo.LineString();

  lineString.pushPoint({lat: 58.906905, lng: 6.054719});
  lineString.pushPoint({lat:51.026163, lng:1.590833});
  lineString.pushPoint({lat:49.376177, lng:-5.16166});
  lineString.pushPoint({lat:25.767796, lng:-160.836078});
  lineString.pushPoint({lat:7.068211, lng:157.826714});
  

  map.addObject(new H.map.Polyline(
    lineString, { style: { lineWidth: 4 }}
  ));
}

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});

var defaultLayers = platform.createDefaultLayers();
var engineType = H.Map.EngineType['HARP'];

// Create the style object from the style configuration
// exported from the HERE Style Editor. The argument is a style path
var style = new H.map.render.harp.Style('https://alexisad.github.io/vector-styles/harp/normal-day.json');

// Step 4: create a layer with the style object:
var vectorLayer = platform.getOMVService().createLayer(style, { engineType });

//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  vectorLayer,{
  engineType: engineType,
  center: {lat:52, lng:5},
  zoom: 5,
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);


 ui.removeControl("mapsettings");
// create custom one
var ms = new H.ui.MapSettingsControl( {
    baseLayers : [ { 
      label:"normal",layer:defaultLayers.raster.normal.map
    },/*{ 
      label:"dark",layer:darkBaseLayer
    },*/{
      label:"satellite",layer:defaultLayers.raster.satellite.map
    }, {
      label:"terrain",layer:defaultLayers.raster.terrain.map
    }
    ],
  layers : [{
        label: "layer.traffic", layer: defaultLayers.vector.normal.traffic
    },
    {
        label: "layer.incidents", layer: defaultLayers.vector.normal.trafficincidents
    }
]
  });
ui.addControl("customized",ms);

// Now use the map as required...
addPolylineToMap(map);