Image Layer

<script setup lang="ts">
  import { VMap, VLayerMaplibreImage, VControlNavigation } from '@geoql/v-maplibre';

  const mapOptions = {
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [-80.425, 46.437],
  zoom: 4,
  };

  const imageSource = {
  type: 'image',
  url: 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
  coordinates: [
    [-80.425, 46.437], // top-left
    [-71.516, 46.437], // top-right
    [-71.516, 37.936], // bottom-right
    [-80.425, 37.936], // bottom-left
  ],
  };

  const imageLayer = {
  id: 'image-overlay',
  type: 'raster',
  source: 'image-source',
  paint: {
    'raster-opacity': 0.85,
  },
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerMaplibreImage
      source-id="image-source"
      layer-id="image-overlay"
      :source="imageSource"
      :layer="imageLayer"
    />
  </VMap>
</template>