MapFeatures

Renders normalized map features from source data: GeoJSON Feature objects and geometries.

Features with geometry: null are preserved and receive no path data.

Props

Parameter	Type	Default	Description
data?	MapData	—	TopoJSON or GeoJSON
objectKey?	string	—	TopoJSON object key for data
transformer?	MapFeatureTransformer	—	Optional transform for normalized features
styles?	InteractionProps['styles']	—	Forwarded to default-rendered MapFeature instances

Use native SVG presentation attrs like fill and stroke directly on MapFeatures

Usage

<template>
  <MapBase>
    <MapFeatures
      :data="mapData"
      object-key="countries"
      fill="darkorange"
      :styles="{
        default: { opacity: 0.9 },
        hover: { opacity: 0.7 },
        active: { stroke: '#1f2937', strokeWidth: 1.5 },
      }"
    />
  </MapBase>
</template>

Slots

<template>
  <MapFeatures :data="mapData">
    <template #default="{ features }">
      <MapFeature
        v-for="feature in features"
        :key="feature.key"
        :d="feature.d"
        :aria-label="String(feature.properties.name ?? 'Feature')"
        fill="darkorange"
      />
    </template>
  </MapFeatures>
</template>