Basic Map

The smallest possible map: pass your MapKit token to VMap, then center it once the map is ready via the @map event. Coordinates and regions aren't props: they're applied through the live MapKit instance.

BasicMap.vue

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

  const token = 'YOUR_MAPKIT_TOKEN';

  function onMap(map) {
    // center/region are applied once the map is ready
    map.setRegionAnimated(
      new mapkit.CoordinateRegion(
        new mapkit.Coordinate(37.3349, -122.009),
        new mapkit.CoordinateSpan(0.06, 0.06),
      ),
    );
  }
</script>

<template>
  <VMap :access-token="token" color-scheme="dark" @map="onMap" />
</template>