Raster Layer

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

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

  // maps.guru satellite raster tiles (get a key at maps.guru/signup).
  // tile.openstreetmap.org is not used: the OSM tile usage policy
  // requires a valid HTTP Referer and blocks requests without one.
  const rasterSource = {
  type: 'raster',
  tiles: ['https://tiles.maps.guru/v1/planet-raster/{z}/{x}/{y}.jpg?key=YOUR_MAPS_GURU_API_KEY'],
  tileSize: 256,
  maxzoom: 13,
  attribution: '© maps.guru © MapTiler © OpenStreetMap contributors',
  };

  const rasterLayer = {
  id: 'satellite-raster',
  type: 'raster',
  source: 'satellite-source',
  paint: {
    'raster-opacity': 0.7,
  },
  };
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerMaplibreRaster
      source-id="satellite-source"
      layer-id="satellite-raster"
      :source="rasterSource"
      :layer="rasterLayer"
    />
  </VMap>
</template>