0

I'm trying to let the Map/Canvas height of OpenLayers 100%, but I'm not able to do it.

I've already tried putting in several places the "height: 100%;" and used the "map.updateSize()" function, but without success. I already tried to use "height: 100vh;" as well, but it stretches the map instead of increasing the canvas.

I send print screen below illustrating what happens:

enter image description here

I would like the height of the map/canvas to be 100% on the page

That piece of code showed on the image:

<div id="map" class="olMap">
    <div class="ol-viewport" data-view="146" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;">

        <canvas class="ol-unselectable" width="937" height="480" style="width: 100%; height: 100%; display: block;"></canvas>

        <div class="ol-overlaycontainer"></div>
        <div class="ol-overlaycontainer-stopevent">
        <div class="ol-zoom ol-unselectable ol-control">
        <button class="ol-zoom-in" type="button" title="Zoom in">+</button>
        <button class="ol-zoom-out" type="button" title="Zoom out">−</button>
        </div>
        <div class="ol-rotate ol-unselectable ol-control ol-hidden">                
        <button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button>
        </div>
        <div class="ol-attribution ol-unselectable ol-control ol-collapsed" style="display: none;"><ul></ul><button type="button" title="Attributions"><span>i</span></button>
</div>
</div>
</div>
</div>

Code where I create the map (Explore.vue):

export default {
  ...
  methods: {
    initMap: function () {
      // eslint-disable-next-line
      this.map = new Map({
        target: 'map',
        layers: [
          layerGroupBaseMap
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 5
        })
      })
    }
  },
  mounted: function () {
    this.initMap()
  },
  ...
}

Source code: https://github.com/rmmariano/executive_frontend/tree/dev-rodrigo

Does someone have any idea?

  • 1
    It is automatically set to 100% of the map div (which will 100% of the available page when you have devtools open). The actual size in pixels depends on the pixel ratio of the device (which can be overridden with the pixelRatio option in the Map() constructor). You can check it using a browser such as Edge where the undocked devtools don't reduce the size of the page available to the application. – Mike Mar 1 at 14:35
  • Even when I'm with full screen (without devtools), the map does not fill entire page in both Chrome and Firefox. (example [1]). Maybe is it because of the monitor resolution? I've tried to change the pixelRatio, but no success. [1] github.com/rmmariano/executive_frontend/blob/dev-rodrigo/docs/… – rmmariano Mar 1 at 18:08
  • Try with this: <style> html, body {height: 100%; padding: 0; margin: 0; } #map { height: 100%; width: 100vw;} </style> – TomazicM Mar 1 at 20:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.