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.

1

1 Answer 1

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);
1
  • Thank You!! Can this be done with a Vector Objects layer or does it have to be a TileLayer?
    – Funn_Bobby
    Mar 16 at 19:36

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.