Search code examples
javascriptangularopenlayersopenlayers-6

OpenLayers VectorLayers skewed from map element


All layers in my web application work except vectorlayers.

If i add a draw feature, a GeoJSON layer or a pure VectorLayer to my map, they show up skewed from the map element itself. Upon inspection we can see that the canvas that is apparently used for vectorlayers, does not abide by the map elements actual location.

The issue only exists on certain devices without any logical connection. it exists on some macs, some windows 10 machines but not others.

i was hoping someone here could point me in the right direction as to what i should start looking at in order to fix this issue.

vector layer off

skewed canvas


Solution

  • You might see the same problem in some of the examples such as https://openlayers.org/en/latest/examples/select-features.html with older browsers on some devices. It is related to the pixel ratio (which can be the device or browser zoom). Setting pixelRatio: 1 in the map options should fix it (but that would not allow best quality on devices which don't have the problem).