Skip to content
View source

Polyline Overlay

VPolylineOverlay connects coordinates into a line: routes, GPS traces, transit paths. Same coordinate-array API as polygons, but open-ended. Endpoints are marked here for clarity.

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

  const path = [
    [37.8087, -122.4098],
    [37.8024, -122.4058],
    [37.7955, -122.3937],
    [37.7857, -122.3908],
  ];
</script>

<template>
  <VMap :access-token="token">
    <VPolylineOverlay
      :coordinates="path"
      :style="{ strokeColor: '#ff375f', lineWidth: 4, lineCap: 'round' }"
    />
  </VMap>
</template>