Layer Switcher

VControlLayerSwitcher renders a dropdown bound to the map's type. Provide your own list of map types and labels, or rely on the sensible defaults. Use the selector on the map.

LayerSwitcher.vue

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

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

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