Polygon Overlay

VPolygonOverlay fills a closed ring of coordinates: neighborhoods, delivery zones, coverage areas. Pass an array of [lat, lng] points and a style object.

PolygonOverlay.vue

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

  const region = [
    [37.8085, -122.4101],
    [37.7956, -122.3937],
    [37.7648, -122.4186],
    [37.7793, -122.4423],
  ];
</script>

<template>
  <VMap :access-token="token">
    <VPolygonOverlay
      :coordinates="region"
      :style="{ fillColor: '#30d158', fillOpacity: 0.2, strokeColor: '#30d158' }"
    />
  </VMap>
</template>