Image Annotation

VImageAnnotation swaps the default pin for your own artwork. The url field maps device pixel ratios to image variants, so markers stay crisp on retina displays. Here we use inline SVG data-URIs.

ImageAnnotation.vue

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

<template>
  <VMap :access-token="token">
    <VImageAnnotation
      :coordinates="[40.7128, -74.006]"
      :annotation="{
        title: 'Lower Manhattan',
        url: { 1: '/pin.png', 2: '/pin@2x.png' },
        size: { width: 40, height: 40 },
      }"
    />
  </VMap>
</template>