Before / After Comparison

<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VLayerCog } from '@geoql/v-maplibre/geotiff';
import { Slider } from '~/components/ui/slider';

const BEFORE_COG = 'https://.../S2A_2018.tif';
const AFTER_COG  = 'https://.../S2B_2024.tif';

const splitPosition = ref<[number]>([50]);

const mapOptions = {
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
  center: [-73.0, 44.5],
  zoom: 8,
};
</script>

<template>
  <div class="relative">
    <VMap :options="mapOptions" class="h-125 w-full">
      <VControlNavigation position="top-right" />
      <VLayerCog id="before" :geotiff="BEFORE_COG" />
      <VLayerCog
        id="after"
        :geotiff="AFTER_COG"
        :bounds-clip="{ leftRatio: splitPosition[0] / 100 }"
      />
    </VMap>
    <Slider v-model="splitPosition" :min="0" :max="100" />
  </div>
</template>