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.

  • You will not get answers if you don't add some code. There si different ways to do that, the easier is to use ol.interaction.Select see this example
    – oterral
    Feb 9 '17 at 13:18
  • Thanks. I extended the description, see above. I managed to select and un-select a feature and change the color in this case. But I don't know how to access the original color (style) of a feature. Feb 10 '17 at 13:43

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

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:


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.