OL3: how to modify selected feature style based on zoom?

Question

I use the following code to modify the radius of a Circle marker based on the zoom level:

//add the layer to the map
map.addLayer(vectorLayer);

//add selection interactivity, using the default OL3 style
var select = new ol.interaction.Select();

map.addInteraction(select);


map.getView().on('change:resolution', function(evt) {

  var zoom = map.getView().getZoom();
  var radius = zoom / 2 + 1;

  var newStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({color: 'red'}),
        stroke: new ol.style.Stroke({color: 'black', width: 1})
    })
  })

  vectorLayer.setStyle(newStyle);

  });

But the problem I have is that if I select a feature on the map, the selected/highlighed style does not change when the map zoom changes. How can I also dynamically modify the style of selected features based on zoom/resolution?

Clarification The code above already works for changing radius of all features on the map, but in addition to that I also need the radius of selected features to change. Both selected and unselected features should be changing based on zoom level.

Do you have a `select` interaction or you highlight on `pointermove`? — Jonatas Walker, Jul 02 '15 at 10:52
I have a select interaction that is initiated before this change:resolution event. I'll update the code to show more. — bramb84, Jul 02 '15 at 11:22

score 4 · Answer 1 · answered Jul 02 '15 at 11:46

You need to set a style function on interaction constructor like:

var select = new ol.interaction.Select({
    style: function(feature, resolution){
        var zoom = map.getView().getZoom();
        var radius = zoom / 2 + 1;
        console.info(radius);

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: radius,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'black', width: 1})
            })
        });

        return [newStyle];
    } 
});

A working demo.

Thanks, but I don't want the selectStyle to be [newStyle].... that is for the code to change the size of all the markers on the map when zoom changes. I need something to add to the already working code I shared in order to also change the marker size for selected features when zoom changes. — bramb84, Jul 03 '15 at 00:07

score 1 · Answer 2 · answered Nov 30 '16 at 13:48

Use the scale base for the radius resizing when zoomed.

 map.getCurrentScale = function () {
            //var map = this.getMap();
            var map = this;
            var view = map.getView();
            var resolution = view.getResolution();
            var units = map.getView().getProjection().getUnits();
            var dpi = 25.4 / 0.28;
            var mpu = ol.proj.METERS_PER_UNIT[units];
            var scale = resolution * mpu * 39.37 * dpi;
            return scale;

        };
    map.getView().on('change:resolution', function(evt){

        var divScale = 60;// to adjusting
        var radius =  map.getCurrentScale()/divScale;
        feature.getStyle().getGeometry().setRadius(radius);
    })

score 0 · Answer 3 · answered Jul 02 '15 at 10:51

0

Did you set the radius in that other style (selected/highlighed), too?

answered Jul 02 '15 at 10:51

MichaelJS

193
1
1
10

It uses the default select style for a selected point. I tried adding a selectStyle to define the radius on the change:resolution event, since Select has a style property, but I couldn't get it to work. – bramb84 Jul 02 '15 at 11:26

OL3: how to modify selected feature style based on zoom?

3 Answers3