Animated SVG image displayed in wrong size and position on devices with devicePixelRatio > 1

[wketting]

With example map.featureanimation.html when image is replaced from RegularShape into:

image: new ol.style.Icon({ 
        src:"data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" /></svg>" 
      }),

then during animation the SVG image is wrong positioned and displayed larger then expected. This is only happening on devices with devicePixelRatio > 1, i.e. MacBooks or HighRes monitors.

I suspect this is introduced with the fix in OpenLayers 7 referenced here: https://github.com/Viglino/ol-ext/issues/636

At the moment I haven't found a workaround for this issue.

[wketting]

The problem is here: https://github.com/Viglino/ol-ext/blob/ffe16b5ea449376fc52f3f5dd524ec3047a619a3/src/util/getVectorContextStyle.js#L16 this line should be extended to:

  if (ol_ext_olVersion > 605 && ol.ext.olVersion < 700 && ratio !== 1 && (s.getImage() instanceof ol_style_Icon)) {

since the workaround is not needed anymore with open layers 7 and above.

[nerdess]

That looks promising since I have a similar issue (#1011).

I forked the code and wanted to use npm link to use it. I followed this instruction:

https://github.com/Viglino/ol-ext/blob/master/DEVELOPING.md

But when I run the gulp command to create the build I get

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/Sissi/Sites/forks/ol-ext/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/Sissi/Sites/forks/ol-ext/gulpfile.js:3:12
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

What am I doing wrong?

[Viglino]

You have to specify the gulpfile since the project is now a JS module. You can use the build command instead:

npm run build

I've updated the doc.

PS: the build has been done in the repo (so you don't have to do it). pS2: if you're using the lib as modules (and npm) you'll have to wait for a new release or just copy and replace the content of the ./src in your ./node_modules/ol-ext directory...

[nerdess]

Good pointer to a fix, in my case I had to do:

if (ol_ext_olVersion > 605 && ol_ext_olVersion < 700 && ratio !== 1 && (s.getImage() instanceof ol_style_Icon))

ol.ext.olVersion caused a bug

[Viglino]

ol.ext.olVersion caused a bug

Fixed in the last commit. I'll publish asap.

[Viglino]

[email protected] is out.