Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SwipeControl: Can't handle WebGLTile layer #723

Closed
m-mohr opened this issue Jan 6, 2022 · 6 comments
Closed

SwipeControl: Can't handle WebGLTile layer #723

m-mohr opened this issue Jan 6, 2022 · 6 comments
Labels
bug

Comments

@m-mohr
Copy link
Contributor

m-mohr commented Jan 6, 2022 •
edited
Loading

OpenLayers 6.8 (I think) introduced a new layer: WebGLTile

The SwipeControl works fine with all my other layers (I use), but once I add a GlTileLayer (with a GeoTiff source) it stops working correctly. It doesn't show the GlTileLayer but instead only shows the other layer on both sides.

The console shows this error:

Swipe.js:289 Uncaught TypeError: ctx.save is not a function
    at ol_control_Swipe.push../node_modules/ol-ext/control/Swipe.js.ol_control_Swipe.precomposeRight (Swipe.js:289)
    at WebGLTileLayer.Target.dispatchEvent (Target.js:111)
    at WebGLTileLayerRenderer.WebGLLayerRenderer.dispatchRenderEvent_ (Layer.js:252)
    at WebGLTileLayerRenderer.WebGLLayerRenderer.preRender (Layer.js:262)
    at WebGLTileLayerRenderer.renderFrame (TileLayer.js:381)
    at WebGLTileLayer.Layer.render (Layer.js:258)
    at CompositeMapRenderer.renderFrame (Composite.js:122)
    at Map.PluggableMap.renderFrame_ (PluggableMap.js:1517)
    at Map.<anonymous> (PluggableMap.js:254)
@m-mohr m-mohr changed the title SwipeControl: Can't handle GlTileLayer SwipeControl: Can't handle WebGLTile layer Jan 6, 2022
@m-mohr
Copy link
Contributor Author

m-mohr commented Jan 6, 2022

Here's a repro, just save as .html file on your disk:

<!DOCTYPE html>
<html>
<head>
  <title>ol-ext: Swipe control</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" href="https://viglino.github.io/ol-ext/examples/style.css" />

  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/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>

</head>
<body >
  <h1>ol-ext: Swipe control</h1>
  <hr>
  
  <div id="map" style="width:600px; height:400px;"></div>

  <script type="text/javascript">
    var osm = new ol.layer.Tile({
      source: new ol.source.OSM() 
    });
    var cog = new ol.source.GeoTIFF({
      sources: [
        { url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/2020/S2A_36QWD_20200701_0_L2A/TCI.tif' }
      ]
    });
    var gl = new ol.layer.WebGLTile({
      source: cog 
    });

    var map = new ol.Map({
      target: 'map',
      view: cog.getView(),
      layers: [ gl, osm ]
    });

    var ctrl = new ol.control.Swipe();
    map.addControl(ctrl);
    ctrl.addLayer(gl);
    ctrl.addLayer(osm, true);

  </script>

</body>
</html>

@m-mohr
Copy link
Contributor Author

m-mohr commented Jan 6, 2022

I experimented a bit myself and tried something like

var ctx = e.context instanceof WebGLRenderingContext ? ctx.canvas.getContext() : e.context;

Unfortunately, the context returned by WebGL is read-only, so that doesn't work, it seems.

@mike-000
Copy link
Contributor

mike-000 commented Jan 6, 2022

2d context methods will not work a WebGL context, but it can be done with WebGL specific code https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

@m-mohr
Copy link
Contributor Author

m-mohr commented Jan 6, 2022

Oh, nice - and thanks. I never realized there are two swipe examples available: https://openlayers.org/en/latest/examples/index.html?q=swipe

Viglino added a commit that referenced this issue Jan 8, 2022
@Viglino
[BUG] handle WebGLTile layer with SwipeControl #723
0570d6a
@Viglino
Copy link
Owner

Viglino commented Jan 8, 2022

I've updated the Swipe Control to handle WebGLTile layers as well.

@Viglino Viglino added the bug label Jan 8, 2022
@Viglino Viglino closed this as completed Mar 19, 2022
@jomisa
Copy link

jomisa commented Jan 11, 2023 •
edited
Loading

This BUG still present using WebGLTile loading GeoTIFF images. Only displays one layer in one side

`import Map from 'ol/Map.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';
import WebGLTile from 'ol/layer/WebGLTile.js';
import View from 'ol/View.js';

const url1 = 'https://url of geotiff image 1';
const webGLTile1 = new WebGLTile({
source: new GeoTIFF({
sources: [
{
url: url1,
},
],
})
});

const url2 = 'https://url of geotiff image 2';
const webGLTile2 = new WebGLTile({
source: new GeoTIFF({
sources: [
{
url: url2,
},
],
})
});

const mapa = new Map({
target: 'map',
layers: [
webGLTile1,
webGLTile2
],
view: myView,
});

var ctrl = new Swipe();
mapa.addControl(ctrl);
ctrl.addLayer(webGLTile1, false);
ctrl.addLayer(webGLTile2, true);`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Viglino @m-mohr @jomisa @mike-000