Tile Overlay

VTileOverlay layers custom raster tiles on top of the base map using a {z}/{x}/{y} URL template: weather, terrain, or third-party basemaps. Toggle the OpenStreetMap layer below.

TileOverlay.vue

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

  const url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
</script>

<template>
  <VMap :access-token="token">
    <VTileOverlay :url="url" :options="{ opacity: 0.8 }" />
  </VMap>
</template>