CODEWITHSUNDEEP
javascriptangular
Pedro Suárez
Pedro Suárez

Reputation: 51

HERE maps in angular show a blank map

even when I use the exact example of here map official site I received a blank view, only with HERE logo and the rest of this layer. I received a "WebGL warning: uniform setter: No active linked Program." warning on my firefox and VSC debug console. I changed the navigator to Chrome and Opera, and I received the same result.

My apikey is alright, I test it on postman and it worked.

This my code

import { Component, ElementRef, OnInit, ViewChild, Input } from '@angular/core';

declare var H: any;

@Component({
  selector: 'here-map',
  templateUrl: './heremap.component.html',
  styleUrls: ['./heremap.component.scss'],
})
export class HeremapComponent implements OnInit {

  @ViewChild("map") public mapElement: ElementRef;

  @Input() private _apikey: any;
  @Input() public lat: any;
  @Input() public lng: any;
  @Input() public width: any;
  @Input() public height: any;

  private map: any;

  constructor() { }

  ngOnInit() {}

  public ngAfterViewInit() {
    console.log('HERE apikey: ', this._apikey);
    let platform = new H.service.Platform({
        apikey: this._apikey
    });
    let defaultLayers = platform.createDefaultLayers();
    this.map = new H.Map(this.mapElement.nativeElement,
        defaultLayers.vector.normal.map,
        {
            zoom: 10,
            center: { lat: this.lat, lng: this.lng }
        }
    );
    this.map.setCenter({lat: 52.5159, lng: 13.3777});
    this.map.setZoom(14);
  }

}

<div class="here-maps" #map [style.width]="width" [style.height]="height"></div>

Upvotes: 2

Views: 494

Answers (1)

Federico Navarrete
Federico Navarrete

Reputation: 3284

I was having the same issue, and I fixed it by resizing the map after it was fully loaded.

You must trigger the resize event after 500ms (or something like that) at the end of the ngAfterViewInit() event:

This is an example of my code:

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

In the resize event, you should resize the map:

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

After this, all is working as expected:

preview

Upvotes: 1

Related Questions