1

I am trying to show a map on a page via OpenLayers and it looks ok, but I have noticed that when I save map using toBlob as a .png image size is wrong. Then I have taken a look into html code and I have noticed that the actual size of the layer is not the same as its div-container.

Div container is 512x512 pixels but the layer is 384x384 pixels. And the transform matrix of the layer has values 1.33333 but not 1.

Here is the screenshot: https://ibb.co/X25cMpd

I need a way to make my layer fit exactly size of its container but I failed to understand how to achieve this so far.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      html, body
      {
        height: 100%;
        width: 100%;
      }
      .container
      {
        margin: 0;
        height: 512px;
        width: 512px;
        font-family: sans-serif;
        background-color: rgb(23, 46, 107);
        position: absolute;
      }

    </style>
  </head>
  <body>
    <div id="map" class="container"></div>
     </body>
</html>

And js:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';

 var layer = new VectorLayer
 ({
  source: new VectorSource
  ({
    format: new GeoJSON(),
    url: './data/countries.json'
  })
});

var map = new Map({
layers: [layer],
target: 'map',
view: new View({
  center: [0, 0],
  zoom: 2
})
});
Milten
  • 11
  • 2
  • Maybe related to tile pixel ratio. The only place I've seen anything other than one is this OL6 beta example https://openlayers.org/en/master/examples/xyz-retina.html Can you produce a working example and/or all the relevant code and CSS? – Mike Feb 28 '19 at 13:49
  • I have added code to the first post. It's fairly simple though. – Milten Feb 28 '19 at 13:56
  • It seems to be device related. Using a regular Windows display and Chrome's emulation for various devices I can get 1, 0.5 and 0.333333 https://i.stack.imgur.com/zs683.png but haven't managed to get 1.333333 – Mike Feb 28 '19 at 14:27
  • adding `pixelRatio: 1,` to the Map() options seems to fix it. – Mike Feb 28 '19 at 14:40
  • It worked! Thank you very much. – Milten Feb 28 '19 at 14:43

0 Answers0