Controls

Controls are slot-based overlays rendered inside <VMap>. Each accepts a position prop ('top-left', 'top-right', 'bottom-left', 'bottom-right') and floats over the map content. These are the library's own components — distinct from MapKit's built-in chrome toggled via configuration props.

VControlGeolocate

Centers the map on the visitor's location using the browser Geolocation API. Emits the resolved position (or an error if permission is denied).

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

  function onLocate(position: GeolocationPosition) {
    console.log(position.coords.latitude, position.coords.longitude);
  }
</script>

<template>
  <VMap :access-token="token">
    <VControlGeolocate
      position="top-right"
      :track-user-location="false"
      @locate="onLocate"
      @error="(e) => console.warn(e)"
    />
  </VMap>
</template>

Prop	Type	Description
`position`	`ControlPosition`	Corner placement
`trackUserLocation`	`boolean`	Continuously follow the user after locating

Event	Payload	When
`@locate`	`GeolocationPosition`	Location resolved
`@error`	`GeolocationPositionError`	Permission denied / lookup failed

VControlFullscreen

Toggles the map into and out of the browser's fullscreen mode.

<VMap :access-token="token">
  <VControlFullscreen position="top-right" />
</VMap>

Prop	Type	Description
`position`	`ControlPosition`	Corner placement

VControlLayerSwitcher

Renders a dropdown bound to the map's type. Provide your own list of map types and labels, or rely on the defaults.

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

  const mapTypes = [
    { type: 'standard' as const, label: 'Standard' },
    { type: 'mutedStandard' as const, label: 'Muted' },
    { type: 'hybrid' as const, label: 'Hybrid' },
    { type: 'satellite' as const, label: 'Satellite' },
  ];
</script>

<template>
  <VMap :access-token="token">
    <VControlLayerSwitcher position="top-left" :map-types="mapTypes" />
  </VMap>
</template>

Prop	Type	Description
`position`	`ControlPosition`	Corner placement
`mapTypes`	`Array<{ type: mapkit.MapType; label: string }>`	Selectable map types

VControlLegend

Positions a panel over the map and renders whatever you put in its default slot — ideal for explaining marker colors or data sources.

<VMap :access-token="token">
  <VControlLegend position="bottom-right">
    <div class="legend">
      <span style="background: #0a84ff"></span> Offices
      <span style="background: #30d158"></span> Parks
    </div>
  </VControlLegend>
</VMap>

Prop	Type	Description
`position`	`ControlPosition`	Corner placement

The default slot is the legend's content.

ControlPosition

All controls share the position type, exported from the package:

import type { ControlPosition } from '@geoql/v-mapkit';
// 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'