0

I'm currently using this example in my application

https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

which overlays the left side of the map with a lay that you can extend over your base map.

I need this exact functionality however flipped so that the layer that overlays is on the left.

This is the guts of the code that does the slice

this.imagery = this.createCompareLayer()

   map.addLayer(this.imagery);

    this.imagery.on('prerender', function (event) {
      const gl = <WebGLRenderingContext> event.context;
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.enable(gl.SCISSOR_TEST);

      const mapSize = map.getSize(); // [width, height] in CSS pixels

     // get render coordinates and dimensions given CSS coordinates
      const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
      const topRight = getRenderPixel(event, [mapSize[0], 0]);

      const width = (topRight[0] - bottomLeft[0]) * (Number(swipe.value) / 100);
      const height = topRight[1] - bottomLeft[1];
      gl.scissor(bottomLeft[0], bottomLeft[1], width, height);

I've tried moving the bottomLeft to the center but I'm not sure this is the right approach.

Funn_Bobby
  • 647
  • 1
  • 20
  • 57
  • Hi @Mike Please see this question and response how we can do this [stackoverflow.com](https://stackoverflow.com/q/75747476/21071747) – Beginner Mar 16 '23 at 10:23

1 Answers1

1

Either

change the layer order from [osm, imagery] to [imagery, osm]

Or

calculate the width as the width of the right side

  const width = Math.round(
    (topRight[0] - bottomLeft[0]) * (1 - swipe.value / 100)
  );

and then change the start position of the scissor

  gl.scissor(topRight[0] - width, bottomLeft[1], width, height);
Mike
  • 16,042
  • 2
  • 14
  • 30