### MarkerPopup and MarkerTooltip Example
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Use MarkerPopup for click-triggered popups and MarkerTooltip for hover-triggered tooltips attached to map markers. Supports custom styling and positioning.
```tsx
import {
Map,
MapMarker,
MarkerContent,
MarkerPopup,
MarkerTooltip,
MarkerLabel
} from "@/registry/map";
function PopupsAndTooltipsDemo() {
const places = [
{
id: 1,
name: "The Met",
category: "Museum",
rating: 4.8,
hours: "10:00 AM - 5:00 PM",
lng: -73.9632,
lat: 40.7794,
},
{
id: 2,
name: "Brooklyn Bridge",
category: "Landmark",
rating: 4.9,
hours: "Open 24 hours",
lng: -73.9969,
lat: 40.7061,
},
];
return (
);
}
```
--------------------------------
### Standalone MapPopup Example
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Use MapPopup to render a popup at any coordinates, independent of markers. Useful for showing information on map clicks or programmatically. Configure close behavior and focus.
```tsx
import { useState } from "react";
import { Map, MapPopup } from "@/registry/map";
function StandalonePopupDemo() {
const [popup, setPopup] = useState<{
lng: number;
lat: number;
content: string;
} | null>({
lng: -74.006,
lat: 40.7128,
content: "New York City - Population: 8.3 million",
});
return (
{!popup && (
)}
);
}
```
--------------------------------
### Add Custom GeoJSON Source and Fill Layer with useMap
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Use the `useMap` hook to get the map instance and load state. Add a custom GeoJSON source and a fill layer to the map. Ensure to clean up the source and layer when the component unmounts.
```tsx
import { useEffect } from "react";
import { Map, useMap, MapMarker, MarkerContent } from "@/registry/map";
function CustomMapLayer() {
const { map, isLoaded } = useMap();
useEffect(() => {
if (!isLoaded || !map) return;
// Add custom GeoJSON source
map.addSource("custom-source", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [[
[-74.02, 40.70],
[-73.98, 40.70],
[-73.98, 40.74],
[-74.02, 40.74],
[-74.02, 40.70],
]],
},
},
],
},
});
// Add fill layer
map.addLayer({
id: "custom-layer",
type: "fill",
source: "custom-source",
paint: {
"fill-color": "#3b82f6",
"fill-opacity": 0.3,
},
});
return () => {
if (map.getLayer("custom-layer")) map.removeLayer("custom-layer");
if (map.getSource("custom-source")) map.removeSource("custom-source");
};
}, [map, isLoaded]);
return null;
}
function CustomLayerDemo() {
return (
);
}
```
--------------------------------
### Common Development Commands
Source: https://github.com/anmolsaini16/mapcn/blob/main/AGENTS.md
Provides essential npm commands for running the development server, building the project, linting, and building the distributable registry.
```bash
npm run dev # Start dev server
npm run build # Production build
npm run lint # ESLint
npm run registry:build # Build distributable registry to public/r/
```
--------------------------------
### Project Structure Overview
Source: https://github.com/anmolsaini16/mapcn/blob/main/AGENTS.md
Illustrates the directory layout of the mapcn project, including app, components, registry, and lib folders.
```tree
src/
├── app/
│ ├── layout.tsx # Root layout (fonts, metadata, providers)
│ ├── (main)/ # Main layout group (header + content)
│ │ ├── layout.tsx # Header wrapper
│ │ ├── (home)/ # Landing page
│ │ │ └── _components/ # Homepage examples grid
│ │ ├── docs/ # Documentation pages
│ │ │ └── _components/ # Docs layout, sidebar, TOC, code blocks
│ │ └── blocks/ # Full-page block demos
│ └── (view)/ # Standalone block viewer
├── components/ # Shared app components (header, footer, logo, nav)
│ └── ui/ # shadcn/ui primitives
├── registry/ # Core map components (the library itself)
│ ├── map.tsx # Main map component + all sub-components
│ └── blocks/ # Full-page block examples
├── lib/ # Utilities, navigation config, helpers
└── styles/
└── globals.css # Theme tokens, animations, base styles
```
--------------------------------
### Map with Custom Styles and Ref Access
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Demonstrates how to apply custom light and dark map styles, set a globe projection, and access the map instance via a ref for programmatic control like flying to a location. Requires a MapRef instance.
```tsx
import { useState } from "react";
import { Map, type MapViewport, type MapRef } from "@/registry/map";
import { useRef } from "react";
// Map with custom styles and ref access
function CustomStyledMap() {
const mapRef = useRef(null);
const flyToLocation = () => {
mapRef.current?.flyTo({
center: [-0.1276, 51.5074],
zoom: 14,
duration: 2000,
});
};
return (
);
}
```
--------------------------------
### Displaying Routes and Markers with MapRoute
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Demonstrates how to use the MapRoute component to draw a primary route and an alternate dashed route, along with placing markers at specific stops. Requires Map, MapRoute, MapMarker, MarkerContent, and MarkerTooltip components.
```tsx
import {
Map,
MapRoute,
MapMarker,
MarkerContent,
MarkerTooltip
} from "@/registry/map";
function RouteDemo() {
const route: [number, number][] = [
[-74.006, 40.7128], // NYC City Hall
[-73.9857, 40.7484], // Empire State Building
[-73.9772, 40.7527], // Grand Central
[-73.9654, 40.7829], // Central Park
];
const stops = [
{ name: "City Hall", lng: -74.006, lat: 40.7128 },
{ name: "Empire State Building", lng: -73.9857, lat: 40.7484 },
{ name: "Grand Central Terminal", lng: -73.9772, lat: 40.7527 },
{ name: "Central Park", lng: -73.9654, lat: 40.7829 },
];
return (
);
}
```
--------------------------------
### Map Markers with Custom Content and Interactions
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Shows how to add multiple static markers with custom visual content and a draggable marker to a map. Includes event handlers for clicks, hovers, and drag operations. Requires MapMarker and MarkerContent components.
```tsx
import { useState } from "react";
import {
Map,
MapMarker,
MarkerContent
} from "@/registry/map";
import { MapPin } from "lucide-react";
function MarkersDemo() {
const [markerPosition, setMarkerPosition] = useState({
lng: -73.98,
lat: 40.75,
});
const locations = [
{ id: 1, name: "Empire State Building", lng: -73.9857, lat: 40.7484 },
{ id: 2, name: "Central Park", lng: -73.9654, lat: 40.7829 },
{ id: 3, name: "Times Square", lng: -73.9855, lat: 40.758 },
];
return (
);
}
```
--------------------------------
### Add Interactive Map Controls with MapControls
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Integrate MapControls to provide users with zoom, compass, geolocation, and fullscreen toggles. Customize control positions and visibility.
```tsx
import { Map, MapControls } from "@/registry/map";
function ControlsDemo() {
return (
);
}
```
```tsx
// Multiple control groups at different positions
function MultipleControlsDemo() {
return (
);
}
```
--------------------------------
### Basic Uncontrolled Map Component
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Renders a basic interactive MapLibre map with default settings. No explicit state management is required for the viewport.
```tsx
import { useState } from "react";
import { Map, type MapViewport, type MapRef } from "@/registry/map";
import { useRef } from "react";
// Basic uncontrolled map
function BasicMap() {
return (
);
}
```
--------------------------------
### Display Clustered GeoJSON Data with MapClusterLayer
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Use MapClusterLayer to render clustered point data from GeoJSON or remote URLs. Configure cluster appearance and behavior, and handle point clicks for popups.
```tsx
import { useState } from "react";
import { Map, MapClusterLayer, MapPopup, MapControls } from "@/registry/map";
interface EarthquakeProperties {
mag: number;
place: string;
tsunami: number;
}
function ClusterDemo() {
const [selectedPoint, setSelectedPoint] = useState<{
coordinates: [number, number];
properties: EarthquakeProperties;
} | null>(null);
// Local GeoJSON data
const localData: GeoJSON.FeatureCollection = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: { name: "Point 1", value: 100 },
geometry: { type: "Point", coordinates: [-74.006, 40.7128] },
},
{
type: "Feature",
properties: { name: "Point 2", value: 200 },
geometry: { type: "Point", coordinates: [-73.98, 40.75] },
},
// ... more features
],
};
return (
);
}
```
--------------------------------
### Controlled Map Component with Viewport State
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Implements a controlled map where the viewport state (center, zoom, bearing, pitch) is managed by React's useState hook. Use this when you need to programmatically control or react to map view changes.
```tsx
import { useState } from "react";
import { Map, type MapViewport, type MapRef } from "@/registry/map";
import { useRef } from "react";
// Controlled map with viewport state
function ControlledMap() {
const [viewport, setViewport] = useState({
center: [-74.006, 40.7128],
zoom: 12,
bearing: 0,
pitch: 0,
});
return (
);
}
```
--------------------------------
### Render Curved Lines with MapArc
Source: https://context7.com/anmolsaini16/mapcn/llms.txt
Use MapArc to draw curved lines between points on a map. Configure line appearance, hover effects, and interactivity. Requires Map and MapArc components from '@/registry/map'.
```tsx
import { useState } from "react";
import {
Map,
MapArc,
MapMarker,
MarkerContent,
MarkerLabel,
MapPopup,
type MapArcDatum,
type MapArcEvent
} from "@/registry/map";
interface FlightArc extends MapArcDatum {
airline: string;
duration: string;
}
function ArcDemo() {
const [hoveredArc, setHoveredArc] = useState | null>(null);
const hub = { name: "London", lng: -0.1276, lat: 51.5074 };
const destinations = [
{ name: "New York", lng: -74.006, lat: 40.7128 },
{ name: "Tokyo", lng: 139.6917, lat: 35.6895 },
{ name: "Sydney", lng: 151.2093, lat: -33.8688 },
{ name: "Dubai", lng: 55.2708, lat: 25.2048 },
];
const arcs: FlightArc[] = destinations.map((dest) => ({
id: dest.name,
from: [hub.lng, hub.lat],
to: [dest.lng, dest.lat],
airline: "British Airways",
duration: "8h 30m",
}));
return (
);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.