How can I unselect a feature in custom hyperlink onclick?

Basically I have select interaction that changes style of a marker and after I click anywhere on the map, then feature is unselected (goes back to default style). This part works just fine.

Now I have hyperlink "button" which closes overlay and should also perform unselection for selected feature. Unfortunately I can't really find a way to do this.

I have tried to attach selected feature to close button and setStyle to null, but no avail. Also tried to set default style on the marker, but then marker won't change when clicked on it again.

Example can be found at http://jsfiddle.net/c3o6fy7g/5/

Explanation: red marker should change to pink and overlay is supposed to appear. Clicking on "x" closes overlay and should do unselect on the feature, after which marker should change back to green.

"x" button functionality is given at line 18 aka "closer.onclick = function() {"


You can simply add the following line within your closer click event:


select.getFeatures() will return the currently selected feature(s), and clear() will remove them from the selection.

| improve this answer | |
  • Thank You for response. Unfortunately that doesn´t work. You can try to edit fiddle and replace line "// TODO: how to perform unselect" with "select.getFeatures().clear();" and nothing happens. if You call getFeatures().clear() and later click on map, then "event.deselected" still has that selected feature. – R.P May 11 '17 at 10:51
  • Hi, I edited the Fiddle with this line and it does work for me... jsfiddle.net/c3o6fy7g/14 – rbkb May 11 '17 at 11:05
  • Got it working. I have no idea why it didn't work for me before. Thank You very much! – R.P May 11 '17 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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