It is not recommended to have multiple select interactions in Openlayers. I can create a hover interaction using the select function with the pointMove condition to highlight features and display a popup if required. The interaction targets multiple layers and the styling is defined by the source of the feature. The problem which I am having is with overlapping features. In particular with lines and points from separate layers which intersect polygon features.
If for example I run with cursor along a line into a polygon the line stays highlighted as expected. The same is true if I highlight a polygon but then want to highlight a point inside the polygon or a line which crosses the polygon. This seems to be impossible with the current library. The pointer condition is still true for the polygon geometry but I would like to assign an index to the other overlays with point or line features to highlight these features if the pointerMove condition validates.
Here is jsfiddle to show the issue.
Best Answer
I don't know if you're yet interested but I came up with this plunker. I've learnt a lot doing this.
It looks like yours but I didn't remove
ol.interaction.Select.