Search code examples
javascriptopenlayersswipeinteraction

Select interaction with swipe in Openlayers

I'm using swipe control https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html to show two layers on the map: right and left side.

[EDIT]

I have two iterations selected, one for each side of the swipe. I changed the style just to check: left side black and right side red. There are two different layers one on each side. When I mouse over, it shows both styles, that is, the iteration is not working only for the side set, but for both layers, even if the mouse is passed on a single side. Does anyone know how to solve?

Change the select iteration code according to Mike's answer, and when I move the mouse on the right side, it doesn't show the style, but when I move on the left side, it shows both styles, because it's like running both iterations. Does anyone know how to solve?

var selectPointerMove1 = new ol.interaction.Select({
    condition: function(e) {
        return (
            ol.events.condition.pointerMove(e) &&
            e.pixel[0] < map.getSize()[0] * swipe_control.get('position')
        );
    multi: false,
    layers: [layer1],
    style: function(feature) {
        feature.changed();
        return selectedStyle;
    }
  
});

var selectPointerMove2 = new ol.interaction.Select({
    condition: function(e) {
        return (
            ol.events.condition.pointerMove(e) &&
            e.pixel[0] < map.getSize()[0] * swipe_control.get('position')
        );
    multi: false,
    layers: [layer2 ],
    style: function(feature) {
        feature.changed();
        return selectedStyle2;
    }
  
});

enter image description here

Solution

  • Yu need to test the event pixel in a custom condition. So the first interaction only selects and deselects when used left of the swipe, and the second interaction only selects and deselects when used right of the swipe:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <style>
      html, body, .map {
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
    <link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css" />
    <script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

      var selectedStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 1,
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.1)',
        }),
      });

      var layer1 = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'https://openlayers.org/en/v6.10.0/examples/data/geojson/countries.geojson',
          format: new ol.format.GeoJSON(),
        }),
      });

      var layer2 = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'https://openlayers.org/data/vector/ecoregions.json',
          format: new ol.format.GeoJSON(),
        }),
      });

      var map = new ol.Map({
        target: 'map',
        layers: [layer1, layer2],
        view: new ol.View({
          center: ol.proj.fromLonLat([10, 45]),
          zoom: 5
        })
      });
      var swipe = new ol.control.Swipe();
      map.addControl(swipe);
      swipe.addLayer(layer1);
      swipe.addLayer(layer2, true);

      var selectPointerMove1 = new ol.interaction.Select({
        condition: function(e) {
          return (
            ol.events.condition.pointerMove(e) &&
            e.pixel[0] < map.getSize()[0] * swipe.get('position')
          );
        },
        multi: false,
        layers: [layer1],
        style: selectedStyle
      });

      var selectPointerMove2 = new ol.interaction.Select({
        condition: function(e) {
          return (
            ol.events.condition.pointerMove(e) &&
            e.pixel[0] > map.getSize()[0] * swipe.get('position')
          );
        },
        multi: false,
        layers: [layer2],
        style: selectedStyle
      });

      map.addInteraction(selectPointerMove1);
      map.addInteraction(selectPointerMove2);

    </script>
  </body>
</html>