useMapObject

Provides interaction-state transitions and resolved styles for custom map SVG elements.

Used internally by MapFeature, MapLine, MapAnnotation, MapMarker, and MapMesh

Usage

<script setup lang="ts">
import type { StyleValue } from 'vue'

import { useMapObject, type MapObjectProps } from '@d3-maps/vue'

interface Props {
  d: string
}

defineProps<Props>()

const styles: MapObjectProps<StyleValue>['styles'] = {
  default: {
    opacity: 0.9,
  },
  focus: {
    stroke: 'darkgreen',
  },
  hover: {
    opacity: 0.8,
  },
  active: {
    stroke: 'green',
  },
}

const { style, ...events } = useMapObject(styles)
</script>

<template>
  <path
    :d="d"
    :style="style"
    tabindex="0"
    v-bind="events"
  />
</template>