Fixed size of an icon. OpenLayers3

Question

I'm using OpenLayers3 library. I would like to have fixed icon size. I'm using this code to set size 38x38px:

 new ol.style.Style({
       image: new ol.style.Icon({
           src: icon,
           size: [38, 38]
       })
});

I have an error in firebug:

IndexSizeError: Index or size is negative or greater than the allowed amount

What is wrong?

Answer 1

I have managed to replicate your problem in IE and Firefox by using an image size that is greater than the actual icon size, see jsFiddle .

This runs fine when the image is set to its actual size, [32, 48], or anything smaller, but as soon as you go above that, you get errors in Firefox and IE.

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    size: [32, 48],
    anchorXUnits: 'pixels',
    anchorYUnits: 'pixels',
    opacity: 0.75,
    src: 'http://ol3js.org/en/master/examples/data/icon.png'
  }))
});

Looking at the iconstyle source it would seem that the size has more to do with anchor position than size, as you suggested.

As Karl-Johan has said this appears to be a bug. Given that OL3 is now in gamma, it might be a good time to report it.

I realize that this doesn't solve your issue, but does at least replicate it with a cause.

Answer 2

There seem to have been a bug in OpenLayers that was fixed early May that could give this error. It seems to have been specific to Firefox aswell (and since you mention Firebug I assume you are using Firefox) so it sounds plausible in your case.

So just try updating to the latest release of OpenLayers3 (as of writing v3.0.0-gamma.2 ) and see if that helps.

Answer 3

have a look to my issue opened to OL GitHub:

https://github.com/openlayers/ol3/issues/2861#issuecomment-68133807

Answer 4

for cross browser use src : iconUrl,scale : 1.3, instead. also if size is used it should not be above [32, 48] as already mentioned.