Map Configuration

VMap exposes reactive configuration props that update the live map in place: color scheme, distance units, edge padding, and tint color for selected controls. Tweak them below.

Color scheme

Distances

Tint color

Padding

MapConfiguration.vue

<template>
  <VMap
    :access-token="token"
    :color-scheme="colorScheme"      <!-- 'light' | 'dark' -->
    :distances="distances"           <!-- 'automatic' | 'metric' | 'imperial' -->
    :tint-color="tintColor"          <!-- any CSS color -->
    :padding="{ top: 40, right: 40, bottom: 40, left: 40 }"
  />
</template>