Skip to content

BaseMap Tag Control

Usecase

  • Show clickable tags to toggle base maps inline with other controls.
  • Use when space is limited and a compact switcher is preferred.

Props

PropDescriptionTypeRequiredDefault Value
mapIdstringfalse--
dragIdstringfalse--
btnWidthnumberfalse40
position'top-left', 'top-right', 'bottom-left', 'bottom-right'false'bottom-right'
controlVisiblebooleanfalsetrue

and

PropDescriptionTypeRequiredDefault Value
defaultBaseMapstringfasleOpen Street Map
baseMapsBaseMapItem[]arrayfasle``

Slots

NameDescription
defaultid:string

Events

EventPayloadDescription
basemap-changeBasemapFired when basemap changes

Usage

vue
<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapTagControl } from '@hungpvq/vue-map-basemap';
import '@hungpvq/vue-map-core/style.css';
import '@hungpvq/vue-map-basemap/style.css';
const baseMaps = [];
</script>

<template>
  <Map>
    <BaseMapTagControl :baseMaps="baseMaps" />
  </Map>
</template>