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): Zoomed out - Next: Perfect size, the house should be way smaller when zoomed out though (as seen on the first picture).Perfect zoom - The house should've stayed bigger, instead of scaling down again in this last picture.Zoomed in too much.

1 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);
    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.

  • 1
    I finally got it to work, thanks to you. I've adapted your code a little bit: The source needs to include the feature itself: source: new ol.source.Vector({features:[iconFeature]}), otherwise nothing is inserted within the layer (for some reason, probably related to the geometry element of the feature).
    – Jeff Noel
    Jan 20, 2015 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.