0

after creating the map and showing it up there is something weird happening which is the map buttons "Zoom rectangular, map settings and the scale bar" is being visible below the map as large icons also I'm facing a problem when i set the map width and height as 100% if i set the map height in pixels map works perfectly other wise it's only visible when i resize my chrome page.

I've tried to set different default layer types such as normal and satellite maps and about the width and height problem I've tried to set it fixed with different heights and it works perfectly but once i set it as 100% it the map disappears and I'm able to see large map buttons "zoom rectangular, scale bar and map settings" 

public ngAfterViewInit() {
    let defaultLayers = this.platform.createDefaultLayers();
    defaultLayers.normal.map.setMin(5);

    this.map = new H.Map(
      document.getElementById("mapId"),
      defaultLayers.normal.map,
      {
        center: { lat: "0", lng: "0" }
      }
    );   
    this.ui = H.ui.UI.createDefault(this.map, defaultLayers);

    this.ui.getControl('mapsettings').setAlignment('top-left');
    this.ui.getControl('zoom').setAlignment('top-left');
    this.ui.getControl('scalebar').setAlignment('top-left');
  }

Expected is to be able to see map buttons on the map it self not under the main map also to be able to set height as 100%

Mohammad Kahhaleh
  • 3
  • 3

1 Answers1

0

You cannot specify the height of the map container (div) in percentage, since it defaults to zero (a 'div' gets its default height based on it contents. So an empty 'div' has zero height and therefore the map is not visible). You can specify the height as 100vh and the map should cover the whole viewport vertically.