Comparison Slider

This example shows a range slider can be used to compare two layers. The onPrerender and onPostrender event listeners are used to clip the top layer based on the slider position.

import Map from '@planet/maps/Map.js';
import React, {useState} from 'react';
import TileLayer from '@planet/maps/layer/Tile.js';
import View from '@planet/maps/View.js';
import XYZ from '@planet/maps/source/XYZ.js';

function Slider() {
  const [percent, updatePercent] = useState(50);

  function onPrerender(event) {
    const ctx = event.context;
    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, (ctx.canvas.width * percent) / 100, ctx.canvas.height);
    ctx.clip();
  }

  function onPostrender(event) {
    event.context.restore();
  }

  return (
    <>
      <Map>
        <View options={{center: [0, 0], zoom: 1}} />
        <TileLayer>
          <XYZ
            options={{
              url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
              attributions:
                'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
            }}
          />
        </TileLayer>
        <TileLayer onPrerender={onPrerender} onPostrender={onPostrender}>
          <XYZ
            options={{
              url: 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
              attributions:
                'Imagery © <a href="https://services.arcgisonline.com/ArcGIS/' +
                'rest/services/World_Imagery/MapServer">ArcGIS</a>',
            }}
          />
        </TileLayer>
      </Map>
      <input
        type="range"
        min={0}
        max={100}
        step={0.25}
        style={{width: '100%'}}
        value={percent}
        onChange={event => updatePercent(parseInt(event.target.value))}
      />
    </>
  );
}

export default Slider;