Search code examples
selectonclickopenlayers-3double-click

Select features with click AND double-click in Openlayers 3


I would like to click and double-click select features at the same time in openlayers 3. The condition option when creating ol.interaction.Select takes only one function, so a workaround is necessary

I tried writing my own custom condition function that calls the appropriate function, I was thinking of something like...

this.selectType = (feature) => {
      if (feature){
        if(feature.onclick){
          return ol.events.condition.singleClick
        } else {
          return ol.events.condition.doubleClick
        }
      }
    }

this.selectInteraction = new ol.interaction.Select({
      condition: this.selectType(),
      toggleCondition: ol.events.condition.shiftKeyOnly,
      layers: this.layerFilter,
      features: this.features,
      style: this.selectStyle,
    });

...but without success.

I realize, I could create two separate interactions for selecting features, but would rather not because that would involve replicating a lot of code depending on the Select interaction.

Does anyone know if this is even possible in openlayers and how to handle a situation like this?

Thanx a lot


Solution

  • The condition is a function which takes a map browser event and returns a boolean. Based on Alt+Cick in the OpenLayers example https://openlayers.org/en/v4.6.5/examples/select-features.html to select on either single or double click you will need something like

    this.selectType = (mapBrowserEvent) => {
              return ol.events.condition.singleClick(mapBrowserEvent) ||
                  ol.events.condition.doubleClick(mapBrowserEvent);
        }
    
    this.selectInteraction = new ol.interaction.Select({
          condition: this.selectType, // pass the function, don't call it!
          toggleCondition: ol.events.condition.shiftKeyOnly,
          layers: this.layerFilter,
          features: this.features,
          style: this.selectStyle,
        });