How to resize a feature and prevent it from scaling when zooming in OpenLayers 3

Question

I have initialized a custom OpenLayers 3 map (used to show houses for sale in the neighborhood) with an image as the map.

Then, I create additionnal features and layers dynamically for each house (each feature's anchor is set as the middle of its image).

I've been trying to use the size property when initializing the feature, but what it does is crop the image instead of resizing it.

I think I have seen the resize function for layers somewhere in OL2, but I can't find it in OL3... would that kind of function achieve the result I want?

There's also the problem that the features are scaling way too big when zoomed out of the map, and scaling down too small when zoomed in a lot. Is there a way to specify the feature's coordinates then do some kind of invisible margins/padding around it to prevent it from going too big or too small (some kind of static size) ?

Here is the actual behavior of features (the feature seen here is the black house): - Next: Perfect size, the house should be way smaller when zoomed out though (as seen on the first picture). - The house should've stayed bigger, instead of scaling down again in this last picture..

Answer 1

I assume you use an ol.style.Icon. ol.style.Icon has a scale option that you can use to scale the icon image.

For example, if you want to scale an image down you'll use something like this:

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

Now, if you want different scale values based on the current resolution, you can pass a style function to the vector layer:

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

Note that, as an optimization, the above code reuses the ol.style.Icon object, the ol.style.Style object and the array of styles, to avoid creating objects each time the style function is called.