CODEWITHSUNDEEP
angulartypescripthere-api
Mathieu
Mathieu

Reputation: 1677

Here maps with Angular: error when hiding UI controls

I have a HERE map that I'm using in my Angular application. I have followed the doc to set it up

I want to hide some controls from the map, mainly the scalebar and the zoom control. However, I get a setEnabled is not a function error.

Here's my code:

public ngAfterViewInit() {
  const defaultLayers = this.platform.createDefaultLayers();
  if (this.mapElement) {
  this.map = new H.Map(
    this.mapElement.nativeElement,
    defaultLayers.normal.map,
    {
      zoom: 10
    });

    this.ui = H.ui.UI.createDefault(this.map, defaultLayers, 'en-US');

    // This line throws a `setEnabled is not a function` error
    let scalebar = this.ui.getControl('scalebar').setEnabled(false);
  }
}

I'm doing what's written in the doc so I don't understand why this won't work. Any ideas?

Additional Infos: this.ui.getControl('scalebar') is not undefined. And I can see that the setEnabled method is not part of the prototype. (see screenshot)

enter image description here

Upvotes: 1

Views: 898

Answers (2)

Michel
Michel

Reputation: 28349

You can hide the scalebar with the following line of code:

this.ui.getControl('scalebar').setVisibility(false)

Side note:

I don't see any setEnabled method in the API reference, so this may be a typo in the documentation guide.

Source: H.ui.Control API reference

Upvotes: 4

Shruti Kuber
Shruti Kuber

Reputation: 121

If you have the line: 

<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" />

in the head section of your code, comment it. You will not see the scale bar and zoom control on the map. This line is responsible for the default UI controls on the map.

Upvotes: 2

Related Questions