Installation

Get started with mapcn in your project.

Dependencies

mapcn uses MapLibre GL for the map engine and Phosphor for icons.

Terminal

npm install maplibre-gl @phosphor-icons/react

Copy the Component

Add map.tsx to components/ui/map.tsx in your project. The full source is available in the registry.

Usage

TypeScript

import { Map, MapMarker, MarkerContent, MarkerPopup } from "@/components/ui/map";

export function MyMap() {
  return (
    <div className="h-[400px] w-full">
      <Map center={[-74.006, 40.7128]} zoom={12}>
        <MapMarker longitude={-74.006} latitude={40.7128}>
          <MarkerContent />
          <MarkerPopup>
            <p>Hello NYC!</p>
          </MarkerPopup>
        </MapMarker>
      </Map>
    </div>
  );
}