HERE Maps API randomly goes blank on Chromium 80

Question

For some reason HERE Maps API goes blank on Chromium Version 80.0.3987.149 (Official Build) snap (64-bit) on Ubuntu 19.10. I've opened it in Firefox and it all works fine. Could this be some kind of bug?

Screenshot of one of the code examples on HERE website

When this happens, can you open devtools and see if anything is reported? — Raymond Camden, Mar 27 '20 at 14:10
Also, are you seeing this elsewhere or just on https://developer.here.com/develop/javascript-api? — Raymond Camden, Mar 27 '20 at 14:13
The console says nothing about it, and this same effect happened to me on my website where I've tried to use the API with geocoding. Funny thing is that when you try to zoom in or move camera while it's black, it all comes back like nothing happened, but after that it just randomly goes black again. — TheDrunkRat, Mar 27 '20 at 14:41
Can you share the URL? If it's private, you can DM me on Twitter (@raymondcamden) — Raymond Camden, Mar 27 '20 at 14:54
I'm sorry, but I can't share as the project is in local development. However, I think it's something about my Chromium because I've tested it on Edge and Chrome on other Linux-based device, and it works just okay. — TheDrunkRat, Mar 28 '20 at 22:48

score 0 · Answer 1 · answered Mar 31 '20 at 14:18

0

What you could do is to load legacy packages and use legacy rendering engine (no tilt/rotation, no vector data).

Here I already answered how to properly set-up legacy rendering engine:

Here Maps Api for Javascript 3.1 - Very Slow

answered Mar 31 '20 at 14:18

Tomas

1,849
1
13
13

score 0 · Answer 2 · answered Apr 13 '22 at 06:54

I am not so sure if your issue is exactly the same issue (when I was running the examples as you), but I was facing something suspiciously similar. I fixed it by resizing the map after it was fully loaded.

You must trigger the resize event after 500ms (or something like that).

This is an example of my code:

window.addEventListener('resize', onResize);

window.onload = function() {
    setTimeout(function () {
        window.dispatchEvent(new Event('resize'));
    }, 500);
};

In the resize event, you should resize the map:

onResize(event) {
    requestAnimationFrame(() => this.map.getViewPort().resize());
}

After this, all is working as expected:

HERE Maps API randomly goes blank on Chromium 80

2 Answers2