Legend

VControlLegend positions a panel over the map and renders whatever you put in its slot. Use it to explain marker colors, overlay meaning, or data sources.

Legend.vue

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

<template>
  <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>
</template>