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.

  • Do you really need one layer for feature? Jun 12 '15 at 13:53
  • No the features could be all on the same layer, but that doesn't change the behavior. Once the polygon item is selected and in the foreground the pointMove condition will never evaluate for an underlying feature. Jun 12 '15 at 15:09
  • 1
    I'm doing some tests here. Jun 12 '15 at 15:10
  • Did you see this answer? Jun 12 '15 at 17:44
  • Get an idea there... I guess I need to build something around the forEachFeatureAtPixel event. Should be able to solve this and post an updated jsFiddle later today. Thanks for looking into this. Jun 12 '15 at 19:18

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.

  • Thanks a lot mate. I like that solution. That you have both items selected and then only one item as you move into the selection is exactly the behavior I was looking for. Jun 15 '15 at 19:29
  • You're welcome. It was a good challenge! Jun 16 '15 at 9:21
  • @ads I'm not sure what is your case, I guess it's better if you create your own question. Apr 28 '16 at 10:40
  • Hover interaction will kill your performance unless you've got very few features. Sep 6 '16 at 13:59

In the end I solved this selection quagmire by looking at forEachFeatureAtPixel in the pointermove event of the map object and add these to FeatureOverlay.

var featureOverlay = new ol.FeatureOverlay({
  map: map,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#0d47a1',
      width: 2}),
      image: new ol.style.Circle({
        radius: 5.5,
        stroke: new ol.style.Stroke({

map.on('pointermove', function (evt) {
  features = [];
  map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {

Here is the forked jsFiddle.

  • this is how the earthquake example works too
    – ryansstack
    Jun 12 '15 at 23:01

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.