Viglino / ol-ext

Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, charts for statistical map (pie/bar), layer switcher, wikipedia layer, animations, canvas filters.
https://viglino.github.io/ol-ext/
Other
1.24k stars 462 forks source link

Swipe not showing right layer #518

Closed kesslerf closed 4 years ago

kesslerf commented 4 years ago

Hello, I tried several of the examples I found online and had the same problem using all of them: the right layer in my layer-swipe is not showing. Here is my full code and the resulting picture:


<head>
    <title> Hallo </title>
<!--
  Copyright (c) 2015-2019 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Openlayers -->
<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>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

<!-- ol-ext -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script>

</head>
<body >

<!-- Map div -->
<div id="map" style="width:600px; height:400px;background-color: grey"></div>

<script type="text/javascript">       
// Layers
// Stemen Watercolor
var osm = new ol.layer.Tile({
    source: new ol.source.OSM() 
    });
var stamen = new ol.layer.Tile({
    source: new ol.source.Stamen({ layer: 'watercolor' }) 
    });
var label = new ol.layer.Tile({
    source: new ol.source.Stamen({ layer: 'terrain-labels' }) 
    });

    // The map
var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        zoom: 12,
        center: [270701, 6247637]
      }),
    layers: [stamen,osm,label]
    });

    // Control
const ctrl = new ol.control.Swipe();
// Set Watercolor on left
//ctrl.addLayer(tileLayer, false);
ctrl.addLayer(stamen);
ctrl.addLayer(label, true);

map.addControl(ctrl);
</script>
</body>
</html>```
kesslerf commented 4 years ago

swipe

Viglino commented 4 years ago

New bug introduce in last commit... It should work now : https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html