Configuration

<VMap> exposes Apple MapKit's map-level configuration as reactive props. Every prop below is optional and updates live — change it and the map reflects the new value without a remount.

Color Scheme

Drive the map's light/dark appearance. Bind it to your app's color mode so the map matches the surrounding UI.

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

  const mode = useColorMode();
  const scheme = computed(() => (mode.value === 'dark' ? 'dark' : 'light'));
</script>

<template>
  <VMap :access-token="token" :color-scheme="scheme" />
</template>

• colorScheme — 'light' | 'dark'
• tintColor — CSS color string for the map's accent (controls, user location, selection)

Distances & Padding

<VMap
  :access-token="token"
  distances="metric"
  :padding="{ top: 16, right: 16, bottom: 16, left: 16 }"
/>

• distances — 'automatic' | 'metric' | 'imperial'
• padding — mapkit.Padding insets applied to the visible region

Camera

Constrain and position the camera. These map directly to MapKit's camera APIs.

<VMap
  :access-token="token"
  :camera-distance="1500"
  :camera-zoom-range="new mapkit.CameraZoomRange(500, 40000)"
/>

• cameraBoundary — mapkit.CameraBoundary restricting how far the map can pan
• cameraDistance — number (meters) from the camera to the ground
• cameraZoomRange — mapkit.CameraZoomRange min/max camera distance

Points of Interest

<VMap
  :access-token="token"
  :shows-points-of-interest="true"
  :point-of-interest-filter="
    mapkit.PointOfInterestFilter.including([
      mapkit.PointOfInterestCategory.Restaurant,
      mapkit.PointOfInterestCategory.Cafe,
    ])
  "
/>

• showsPointsOfInterest — boolean
• pointOfInterestFilter — mapkit.PointOfInterestFilter to include/exclude categories

Selectable Map Features

Make buildings, points of interest, and territories selectable. Pair with VMapFeatureAnnotation to render the selection.

<VMap
  :access-token="token"
  :selectable-map-features="[
    mapkit.MapFeatureType.PointOfInterest,
    mapkit.MapFeatureType.Territory,
  ]"
/>

Control Toggles

Show or hide MapKit's built-in chrome. showsCompass and showsScale accept a visibility mode; the rest are booleans.

<VMap
  :access-token="token"
  shows-compass="adaptive"
  shows-scale="adaptive"
  :shows-zoom-control="true"
  :shows-map-type-control="true"
  :shows-user-location-control="true"
  :shows-user-location="true"
  :tracks-user-location="true"
/>

Init Options

init-options and map-options are passed straight through to mapkit.init() and the mapkit.Map constructor for anything not surfaced as a dedicated prop.

<VMap
  :access-token="token"
  language="en"
  :map-options="{ isRotationEnabled: false }"
/>

• version — MapKit JS version string (default '5.x.x')
• language — BCP-47 language code (default 'en')
• initOptions — mapkit.MapKitInitOptions
• mapOptions — mapkit.MapConstructorOptions