useMapObject

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

Used internally by MapFeature, MapMarker, and MapMesh

Usage

<script setup lang="ts">
import type { MapObjectStyles } from '@d3-maps/vue'

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

interface Props {
  d: string
}

defineProps<Props>()

const styles: MapObjectStyles = {
  default: {
    opacity: 0.9,
  },
  hover: {
    opacity: 0.8,
  },
  active: {
    stroke: 'green',
  },
}

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

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