Skip to content

Map Editor Style / HARP Engine with UI and InfoBubbles #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
npenner opened this issue Aug 14, 2023 · 2 comments
Closed

Map Editor Style / HARP Engine with UI and InfoBubbles #149

npenner opened this issue Aug 14, 2023 · 2 comments

Comments

@npenner
Copy link

npenner commented Aug 14, 2023

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!

@npenner npenner changed the title Map Editor Style / HARP Engine with UI and Markers Map Editor Style / HARP Engine with UI and InfoBubbles Aug 14, 2023
@ThFischer
Copy link

ThFischer commented Aug 22, 2023

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
Copy link
Author

npenner commented Aug 31, 2023

Hey Thomas,
that did help.
Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants