heremaps/maps-api-for-javascript-examples

Map Editor Style / HARP Engine with UI and InfoBubbles

npenner opened this issue · 2 comments

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!

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

Hey Thomas,
that did help.
Thank you!