OpenLayers apply old feature style

Question

I am trying to show or hide features on click.

I have many points with different colors, I am trying to change opacity to 0/1.

What I managed to do is set 2 different feature styles and use setStyle on click.

I can hide a feature but when I try to unhide it is styled as default OpenLayers feature. See examples here:

Picture of point when map is loaded

Picture of point when I hide it

Picture of point when I try to unhide it (I want it to be back to orange but its default style)

This is the code snippet:

selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector") {
                feature.setStyle(style); // Apply OLD STYLE (style before hiding the feature)
              }

              if (e.target.className === "menu-selector2") {
                var style = feature.getStyle(); // Get current style (so I can reapply it later)
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                ); // hide the feature
              }
            }
          });

I found this also:

feature.getStyle().getImage().setOpacity(0);

But that function shows/hides all points with same Style, not just the selected one. For example, if I want to hide 1 feature and its a grey circle, it will hide all grey circles in extent.

You would need to clone the style before changing it feature.setStyle(feature.getStyle().clone()); (you only need do it once, when changing back it is already cloned) — Mike
@Mike Thanks for your reply, sadly it's cloning the hidden feature style instead of old one — Dominik
I would like to suggest that removing and adding the layer back will give you result. — Basil
Thanks for suggestion @BasilMohammed I used selectedLayer.redraw(); but I get results like in the OP. — Dominik
You must call it before you hide, there's no need to call before before restoring — Mike

Dominik Dominik · Accepted Answer · 2020-07-09T14:19:49

I had to declare variable outside function, store the old styles in a list, then loop through the list and apply old styles for each feature.

Hope the code helps someone else.

      var clone = [];
      var brojTocaka = 0;
      var i = 0;
      window.onclick = (e) => {
        if (
          e.target.className === "menu-selector2" ||
          e.target.className === "menu-selector"
        )
          $("#" + e.target.id).toggleClass("menu-selector menu-selector2");

        var t = e.target.innerText || e.target.textContent;

        selectedLayer
          .getSource()
          .forEachFeatureInExtent(extent, function (feature) {
            if (
              Object.values(Object.values(feature.get("info"))[0][2])[1] === t
            ) {
              if (e.target.className === "menu-selector2") {
                clone.push(feature.getStyle());
                console.log(clone[brojTocaka]);
                brojTocaka++;
                feature.setStyle(
                  new ol.style.Style({
                    image: new ol.style.Circle({
                      radius: 0,
                      fill: new ol.style.Fill({
                        color: "rgba(0, 0, 0, 0)",
                      }),
                      stroke: new ol.style.Stroke({
                        color: [0, 0, 0, 0],
                        width: 0,
                      }),
                    }),
                  })
                );
              }
              if (e.target.className === "menu-selector") {
                console.log(clone[i]);
                feature.setStyle(clone[i]);
                i++;
              }
            }
          });
      };
    });

OpenLayers apply old feature style

1 Answers