openlayers3 restore original style of specific feature

Question

I have a map with LineStrings. There are different types of lines, the vector layer contains a style-class and the styles are dynamically loaded via ajax, i.e. stroke color and width.

My map is interactive, I can select some line strings to assign attributes in my data base. When I select a line string with the mouse, I set the color of the line to red to visulaize all selected line strings on the map.

Now the question: If I un-select a line string, how can I restore the original style for this specific feature (line string)?

A simplified page can be found here: http://mapit.ch/test/map_line_style.html

It uses "Geo Admin API" which is based on openlayers 3. Geo Admin API is used to show different maps from Switzerland, this is removed in the example above. The only function which is used from the API is ga.style.StylesFromLiterals(data) "data" is the json file with the styles, retrieved via ajax (the style file can be changed interactively by the user)

The vector layer is also retrieved via json, each feature has its stlye-class, as a reference to the style file.

I didn't manage to run this in a fiddle, because of the ajax requests and the API which requires a license.

Answer 1

Well, as oterral told you, to perform a simple color change for selected features with a click you just need to use the an ol.interaction.Select with the selected style and the click condition instead of the map.on('singleclick' that you are using. It automatically will return to the original color whe the feature is unselected:

var selection = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: selectedStyle
    });
map.addInteraction(selection);

If you need something more complex (or in your actual code), you just need to save the original color into the feature when applying the original style in order to access to it when you restore it:

var originalStyle = function(feature, resolution){
    ...
    feature.set('originalColor', 'red');
    ...
}

And just access to it when you need it:

...
feature.get('originalColor');
...