How to change the width and height of a map in the app.component.html

Question

in the below posted code, i am trying to change the width and height of the map as shown below in the style tag

<style>
     #map3 .map {
        width: 100%;
        height:90px;
      }

</style>

but no matter what the values of the width and height are the map's width and height never change. please let me know how to change the width and height of the map

app.component.html:

<div class="MousePosition">
  <div id="mouse-position"></div>
</div>
<form>
  <label for="projection">Projection </label>
  <select id="projection">
    <option value="EPSG:4326">EPSG:4326</option>
    <option value="EPSG:3857">EPSG:3857</option>
  </select>
  <label for="precision">Precision</label>
  <input id="precision" type="number" min="0" max="12" value="4"/>
</form>
    <div id="map"></div>
    <style>
     #map3 .map {
        width: 100%;
        height:90px;
      }

    </style>
 

app.component.ts:

    ngOnInit() {
    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      /*render: function(){
        console.log(createStringXY(7));
      },*/
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });
  
    this. map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
    target: 'map3',
    layers: [
      new TileLayer({
        source: new XYZSource({
          url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
        })
      })
    ],
    view: new View({
      center: [0, 0],
      zoom: 2
    })
  });

  var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection((event.target as HTMLSelectElement).value);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);
    mousePositionControl.setCoordinateFormat(format);
    console.log(createStringXY(format));
  });
  
  this.map.on('dblclick', function(evt){
    // Get the pointer coordinate
    //let coordinate = transform(evt.coordinate);
    var lonlat = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
    console.log(lonlat);
  });

  var zoomslider = new ZoomSlider();
  this.map.addControl(zoomslider);
 }

Answer 1

let us take a look here right. As a start your open layers map is drawing on a canvas, which cannot be resized by css once it has been rendered. So then what you need to do is resize programmatically in your component class.

So we will implement the ngAfterViewInit function since we will need an already rendered reference to the map then we have the following:

//...
ngAfterViewInit() {
  this.map.updateSize();
}
//...

This should work nicely, however the idea is the same with other map APIs as well. The canvas renders first in the browser before any other html so by the time the reset of app is loaded the canvas will be distorted so you will need to resize it once all the other components of your app are loaded in.

Example:

• map.component.html

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

• map.component.ts

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  // define a reference to the map
  map: any | undefined;

  // So you will then initialize the map as you have in your code
  ngOnInit() {
    this. map = new Map({
      target: 'map',,
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }

  // So after angular has rendered all the html stuff, it will call this function
  // down here, so then what you want to do is update the map size, now that
  // the rendering is stable
  ngAfterViewInit() {
    this.map?.updateSize();
  }

  //...
  // Then down here you will have the remaining functionality that you add to
  // your code.
}

As a reference you can check this stack exchange for more details

https://gis.stackexchange.com/questions/342309/resizing-map-width-and-height-avoid-distortion

hope it helps