Here Maps for JavaScript is always displaying a blank map in Angular 13 without errors

Question

I am building an app with Angular 13. The app has two maps powered by Here. Each map is loaded with different components (based on user sessions, you cannot see both at the same time) because they must have some specific configurations.

In one of the components, all is working perfectly, but in the other for some unknown reasons, the map is always blank and only shows the logo and its terms of usage:

I have no errors or warnings in the JS console.

The failing component has a simple code just to load the basic map:

dmap-here.component.html:

<div #map id="map"></div>

dmap-here.component.css:

#map {
  width: 300px;
  height: 300px;
}

dmap-here.component.ts:

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
//This contains my API KEY
import { GlobalConstants } from 'src/app/common/global-constants';

declare var H: any;

@Component({
  selector: 'app-dmap-here',
  templateUrl: './dmap-here.component.html',
  styleUrls: ['./dmap-here.component.css']
})
export class DMapHereComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  private map?: any;

  @ViewChild('map') mapDiv?: ElementRef;

  ngAfterViewInit(): void {
      // instantiate a platform, default layers and a map as usual
      const platform = new H.service.Platform({
        apikey: GlobalConstants.hereKey
      });
      const layers = platform.createDefaultLayers();
      const map = new H.Map(
        this.mapDiv!.nativeElement,
        layers.vector.normal.map,
        {
          pixelRatio: window.devicePixelRatio,
          center: {lat: 0, lng: 0},
          zoom: 2,
        },
      );
      this.map = map;
  }
}

The odd thing is that the other component displays the map properly (as I shared before), and the code is significantly more complex:

I'm completely lost about what I'm doing wrong in the failing component because firstly I'm just trying to display the map, and if all is fine, then I'll add the extra required configuration.

Any idea why I am getting the blank map?

Update 1:

I checked the networking tab as suggested in the comments and there is nothing special. All cases related to Here Maps returns, Status Code: 200:

Update 2:

I cannot see any restriction in the pricing section of having two components with map controls:

https://www.here.com/pricing

Update 3:

There is a relatively old tutorial that shows that adapted code should display something: https://developer.here.com/documentation/maps/3.1.30.9/dev_guide/topics/angular-practices.html

The only section that is different is this one:

import H from '@here/maps-api-for-javascript';

Because I use:

declare var H: any;

And the reason behind this is that I checked another tutorial before:

https://developer.here.com/blog/display-here-maps-angular-web-application

And the 1st option gave me odd errors, but still, it loads in one of the cases properly.

That the second map is displaying the logos means it probably is working. My guess is that the problem happens during data fetching. What does your network panel says? — brubs, Mar 23 '22 at 09:11
Hi @BrunoFenzl, I cannot see anything special or related to the map there. I'm going to attach the screenshot. — Federico Navarrete, Mar 23 '22 at 09:19
Assuming both components do the same thing and only one works, I would suggest looking at the documentation of this API and check if displaying 2 maps at the same time is supported. — , Mar 23 '22 at 09:25
Hi @MikeS., I don't think it's related because they are different users and sessions. You cannot reach both maps at the same time; I have tried to load only one map and not the other and still fails the one that I show. Also, I cannot see anything related in the restrictions: https://www.here.com/pricing — Federico Navarrete, Mar 23 '22 at 09:27
The bundle probably will not contain the data to display the map, only the engine. There are probably other rest calls to Here that will return the tiles. Have you checked the payload of those other requests? — brubs, Mar 23 '22 at 09:33
I don't think so @BrunoFenzl because I almost used the example and even tried a different lat and lng and the same result. I added the example in the **Update 3**. — Federico Navarrete, Mar 23 '22 at 14:44
Hi @BrunoFenzl, I was able to fix it. I shared my solution, but it's odd. — Federico Navarrete, Mar 24 '22 at 08:24
Hi @MikeS., I was able to fix it. I shared my solution, but it's odd. — Federico Navarrete, Mar 24 '22 at 08:24

Federico Navarrete · Accepted Answer · 2022-03-24T08:25:15.140

1

I was able to fix it. I found the solution by accident when I resized the browser by mistake. For any uncommon reason, you should trigger the resize event after some time with some code like this one in the ngAfterViewInit() event:

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

And add this section in the resize event:

@HostListener('window:resize', ['$event'])
onResize(event: any) {
    requestAnimationFrame(() => this.map.getViewPort().resize());
}

After this, all is working as expected:

edited Mar 24 '22 at 08:25

answered Mar 24 '22 at 08:18

Federico Navarrete

3,069
5
41
76

This seems odd, indeed. It seems the div you are placing the map is collapsed. Have you checked if it has a width and height when you initialize the component? Maybe you have to add some css to prevent the container of collapsing. – brubs Mar 24 '22 at 09:07
Hi @BrunoFenzl, the height and width were correct. I'm already implementing the expected code, which involves several changes. – Federico Navarrete Mar 24 '22 at 09:27

Here Maps for JavaScript is always displaying a blank map in Angular 13 without errors

1 Answers1

Linked