6

Sometimes the map is blurry when I add my map (same html, css, js) to a different page. The different page may have other html, css and js inside of it. The clear picture on the left is inside a page with added CSS from a third party. The one on the right is without someone else's html, css, and js.

How do I fix this issue?

Comparison of sharp vs blurry

One thing I noticed when inspecting their details is that the canvas dimensions for the second example is much smaller.

Sharp map width and height is correct Blurry map width and height is smaller

Edit [Fixed!]:

I found the problem looking at the ol.js source. On console, the blurry image has map.frameState_.pixelRatio = 0.89 (defaults to window.devicePixelRatio), while the clear image had map.frameState_.pixelRatio = 1. If I set pixelRatio = 1 when I initialize the map, it fixes the problem:

var map = new ol.Map({pixelRatio: 1, ...});

It turns out that if you your internet browser is zoomed in (eg, to 90%), window.devicePixelRatio will change, which causes the blurriness. However, when you zoom back to 100%, the map is still zoomed until you refresh the page.

Jose Gómez
  • 2,891
  • 2
  • 28
  • 52
Alan
  • 257
  • 3
  • 12

1 Answers1

0

This is a well known issue that has not been fixed yet.
I would suggest detecting if the browser has been zoomed and post an alert to the user like - "Hey. The map will suck if you don't have browser zoomed at 100%".
And a little offtopic - if you change the container size and the map if blury, just call map.updateSize() to fix it.

Community
  • 1
  • 1
Mike B
  • 2,590
  • 2
  • 12
  • 26