0.10.8

PointMap

Source code

The PointMap component allows you to create interactive maps with clickable points and popups. It’s useful for creating image-based navigation or highlighting specific areas in images.

Image Background
Image alt
---
import { PointMap } from '@yatoday/astro-ui/astro';
---

<PointMap
  items={[
    {
      isPopupOpen: true,
      x: 25,
      y: 30,
      title: "Title 1",
      description: "Lorem ipsum dolor sit amet..."
    },
    {
      x: 75,
      y: 45,
      title: "Title 2",
      description: "Aliquam asperiores aspernatur..."
    },
    {
      x: 50,
      y: 70,
      title: "Title 3",
      description: "Aspernatur delectus eligendi et harum..."
    },
    {
      x: 85,
      y: 20,
      title: "Title 4",
      description: "Lorem ipsum dolor sit amet..."
    },
    {
      x: 15,
      y: 60,
      title: "Title 5",
      description: " Lorem ipsum dolor sit amet..."
    }
  ]}
>
  <div className="h-96 w-full"></div>
</PointMap>

Props

PropTypeDefaultDescription
itemsHotspotPoint []-Array of data items
viaComponentCard7Which card component should be used for rendering
classes.containerstringh-96CSS classes for the wrapper container
classes.cardObject-CSS classes for the Card{...} component