MapFeature

Renders a single GeoJSON feature as an SVG <path>.

Props

Parameter	Type	Default	Description
data	GeoJSON Feature	—	Rendered as an SVG path
styles?	MapObjectStyles	—	See styling guide

Use native SVG presentation attrs like fill and stroke directly on MapFeature.

Usage

<template>
  <Map :data="mapData">
    <MapFeatures #default="{ features }">
      <MapFeature
        v-for="feature in features"
        :key="feature.id"
        :data="feature"
        :fill="feature.color"
        :styles="{
          default: {
            opacity: 0.9,
          },
          hover: {
            opacity: 0.8,
          },
          active: {
            stroke: 'green'
          },
        }"
      />
    </MapFeatures>
  </Map>
</template>

Hooks

• See useMapObject