Circle Overlay

VCircleOverlay draws a geographic circle from a center coordinate and a radius in meters: ideal for service ranges, geofences, and proximity bubbles. Adjust the radius below.

Radius

CircleOverlay.vue

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

<template>
  <VMap :access-token="token">
    <VCircleOverlay
      :coordinates="[37.7749, -122.4194]"
      :radius="1200"
      :style="{
        fillColor: '#0a84ff',
        fillOpacity: 0.18,
        strokeColor: '#0a84ff',
        lineWidth: 2,
      }"
    />
  </VMap>
</template>