Map Editor Style / HARP Engine with UI and InfoBubbles

[npenner]

Hi, i am trying to implement a style from the map style editor on a map with custom markers and the default UI. Somehow i cannot get it to work. Referring to this example, how would you add the UI elements? https://www.developer.here.com/documentation/examples/maps-js/style-editor/change-harp-style-at-load

I am pretty confident it is a matter of layers and having a "defaultLayer" where to add the UI.

In #135 it is suggested that the HARP engine is somehow incompatible with the default layers. Is that my problem?

My current code looks like this (pathtomystyle.json is a working path and the style is set fine) :

const defaultLayers = platform.createDefaultLayers()
const engineType = H.Map.EngineType['HARP']
const style = new H.map.render.harp.Style('pathtomystyle.json')
const vectorLayer = platform.getOMVService().createLayer(style, { engineType })

const map = new H.Map(mapDiv,
    vectorLayer,
    {   
        engineType,
        center: {lat:53.075715241653725, lng:8.827192671898858},
        zoom: 10,
        pixelRatio: window.devicePixelRatio || 1
    }
)

window.addEventListener('resize', () => map.getViewPort().resize())

const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map))
const ui = H.ui.UI.createDefault(map, defaultLayers, 'de-DE')

The error i get looks like this:

Uncaught TypeError: Cannot read properties of undefined (reading 'layer')
at gw (eval at <anonymous> (mapsjs-core.js:73:36), <anonymous>:131:231)
at dw.createDefault (eval at <anonymous> (mapsjs-core.js:73:36), <anonymous>:128:126)
at initMap (main.js:109:24)
at HTMLDocument.<anonymous> (main.js:260:23)

main.js:109:24 is the line beginning with "const ui = ..." I have a feeling it is missing the part where the defaultLayers get "attached" to the map but i cannot figure out how to do that. I tried some stuff with the "addLayer" function but unsuccessful.

Any help or hints are much appreciated. Thanks in Advance!

[ThFischer]

Hi Nils, sorry to confuse you with such cheesy error message. Please change the first two lines to

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

HTH Thomas

[npenner]

Hey Thomas, that did help. Thank you!