Layer Swipe

Example of a Layer swipe map.

Example of a Layer swipe map.

<!DOCTYPE html>
    <title>Layer Swipe</title>
    <link rel="stylesheet" href="" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=",Element.prototype.classList,URL"></script>

    <div id="map" class="map"></div>
    <input id="swipe" type="range" style="width: 100%">
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import TileLayer from 'ol/layer/Tile.js';
      import BingMaps from 'ol/source/BingMaps.js';
      import OSM from 'ol/source/OSM.js';

      var osm = new TileLayer({
        source: new OSM()
      var bing = new TileLayer({
        source: new BingMaps({
          key: 'Your Bing Maps Key from here',
          imagerySet: 'Aerial'

      var map = new Map({
        layers: [osm, bing],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2

      var swipe = document.getElementById('swipe');

      bing.on('precompose', function(event) {
        var ctx = event.context;
        var width = ctx.canvas.width * (swipe.value / 100);;
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);

      bing.on('postcompose', function(event) {
        var ctx = event.context;

      swipe.addEventListener('input', function() {
      }, false);