MapPopup

Buttons 22

About

A standalone MapLibre popup component for controlled overlays at specific coordinates.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MapPopup to your project and fits it to your theme.

Code

How MapPopup is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  Map,
  MapMarker,
  MarkerContent,
  MapPopup,
  MapRoute,
  MapClusterLayer,
} from "@/components/ui/mapcn-map-popup";

const settings = {
  zoom: 11,
  opacity: 0.85,
  color: "#4285F4",
  offset: 16,
  clusterRadius: 50,
};

const route: [number, number][] = [
  [-122.42, 37.77],
  [-122.4, 37.79],
  [-122.38, 37.78],
  [-122.36, 37.8],
];

const points: GeoJSON.FeatureCollection<GeoJSON.Point> = {
  type: "FeatureCollection",
  features: Array.from({ length: 40 }, (_, i) => ({
    type: "Feature",
    properties: {},
    geometry: {
      type: "Point",
      coordinates: [
        -122.45 + (Math.sin(i * 1.7) + 1) * 0.05,
        37.74 + (Math.cos(i * 2.3) + 1) * 0.04,
      ],
    },
  })),
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen">
      <Map viewport={{ center: [-122.4, 37.78], zoom: s.zoom }}>
        <MapClusterLayer data={points} clusterRadius={s.clusterRadius} />
        <MapRoute coordinates={route} color={s.color} opacity={s.opacity} />
        <MapMarker longitude={-122.42} latitude={37.77}>
          <MarkerContent />
        </MapMarker>
        <MapPopup longitude={-122.42} latitude={37.77} offset={s.offset}>
          <div className="text-sm font-medium">San Francisco</div>
          <div className="text-muted-foreground text-xs">
            37.77° N, 122.42° W
          </div>
        </MapPopup>
      </Map>
    </div>
  );
}