Overlays

Overlays draw shapes and raster tiles on the map. Like annotations, each is a child of <VMap> and is added, restyled, and removed automatically with its lifecycle.

VCircleOverlay

Draws a circle of a given radius (in meters) around a center coordinate.

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

<template>
  <VMap :access-token="token">
    <VCircleOverlay
      :coordinates="[37.3349, -122.009]"
      :radius="500"
      :style="{
        strokeColor: '#0a84ff',
        fillColor: '#0a84ff',
        fillOpacity: 0.15,
        lineWidth: 2,
      }"
    />
  </VMap>
</template>

Prop	Type	Description
`coordinates`	`[number, number]`	Circle center `[latitude, longitude]` (required)
`radius`	`number`	Radius in meters
`style`	`mapkit.StyleConstructorOptions`	Stroke, fill, opacity, line width

VPolygonOverlay

Draws a filled polygon from an array of coordinates.

<VMap :access-token="token">
  <VPolygonOverlay
    :coordinates="[
      [37.80, -122.42],
      [37.80, -122.40],
      [37.78, -122.40],
      [37.78, -122.42],
    ]"
    :style="{ strokeColor: '#ff375f', fillColor: '#ff375f', fillOpacity: 0.2 }"
  />
</VMap>

Prop	Type	Description
`coordinates`	`[number, number][]`	Polygon vertices (required)
`style`	`mapkit.StyleConstructorOptions`	Stroke and fill styling

VPolylineOverlay

Draws a line through an array of coordinates — ideal for routes (see Directions).

<VMap :access-token="token">
  <VPolylineOverlay
    :coordinates="path"
    :style="{ strokeColor: '#0a84ff', lineWidth: 5, lineCap: 'round' }"
  />
</VMap>

Prop	Type	Description
`coordinates`	`[number, number][]`	Line points (required)
`style`	`mapkit.StyleConstructorOptions`	Stroke color, width, cap, join

VTileOverlay

Overlays custom raster tiles from a URL template or callback. Tile overlays use MapKit's dedicated tile collection (not the vector overlay list).

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

<template>
  <VMap :access-token="token">
    <VTileOverlay
      url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      :options="{ opacity: 0.6, maximumZ: 19 }"
    />
  </VMap>
</template>

A callback form gives you full control over each tile URL:

<VTileOverlay
  :url="(x, y, z, scale) => `https://tiles.example.com/${z}/${x}/${y}.png`"
/>

Prop	Type	Description
`url`	`string \| mapkit.URLTemplateCallback`	Tile URL template (`{x}`/`{y}`/`{z}`) or callback (required)
`options`	`mapkit.TileOverlayConstructorOptions`	Opacity, zoom bounds, data overrides

Tip

Style props update live — change radius, coordinates, or style and the overlay redraws without a remount.