Search code examples
javascriptangularhere-apiheremaps

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

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:

blank map

I have no errors or warnings in the JS console.

no info

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:

component 2

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:

map js lib

here preview

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

example

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.

Solution

  • 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:

    preview