Map Box Pointer

PreviousNext

An interactive map component with custom markers using Mapbox GL JS.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/mapbox-pointer.json

Setup

You'll need a Mapbox access token to use this component. Add your token to your environment variables:

NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token_here

Usage

import { MapboxPointer } from "@/components/ui/mapbox-pointer"
 
export default function Example() {
  return (
    <MapboxPointer
      latitude={53.3498}
      longitude={-6.2603}
      zoom={13}
      mapboxToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN!}
      label="Dublin, Ireland"
      className="h-96"
    />
  )
}

Features

  • Interactive Maps: Powered by Mapbox GL JS with full interactivity
  • Custom Markers: Animated markers with customizable colors
  • Click Navigation: Optional click-to-directions functionality
  • Customizable Labels: Add labels with optional links
  • Interactive Control: Enable/disable user interactions (pan, zoom, rotate)
  • No Attribution: Mapbox branding automatically hidden
  • Flexible Styling: Customize appearance through className prop

Examples

Dark Style Demo

This example shows the navigation night theme - perfect for modern interfaces. Try interacting with the map: you can zoom and pan to explore Dublin!

You can easily customize the style by changing the style prop. Try different values like:

  • "streets-v12" - Default street map
  • "satellite-v9" - Satellite imagery
  • "navigation-night-v1" - Night navigation
  • "light-v11" - Minimal light theme

Basic Map

<MapboxPointer
  latitude={40.7128}
  longitude={-74.006}
  mapboxToken={token}
  className="h-64 w-full"
/>

With Custom Styling

<MapboxPointer
  latitude={51.5074}
  longitude={-0.1278}
  mapboxToken={token}
  style="dark-v11"
  markerColor="#ef4444"
  label="London, UK"
  className="h-96 rounded-xl shadow-lg"
/>

Different Map Styles

{
  /* Satellite view */
}
;<MapboxPointer
  latitude={40.7128}
  longitude={-74.006}
  mapboxToken={token}
  style="satellite-v9"
  label="New York City"
  className="h-64"
/>
 
{
  /* Dark theme */
}
;<MapboxPointer
  latitude={48.8566}
  longitude={2.3522}
  mapboxToken={token}
  style="dark-v11"
  label="Paris"
  className="h-64"
/>
 
{
  /* Light minimal theme */
}
;<MapboxPointer
  latitude={37.7749}
  longitude={-122.4194}
  mapboxToken={token}
  style="light-v11"
  label="San Francisco"
  className="h-64"
/>

With Click Navigation

<MapboxPointer
  latitude={48.8566}
  longitude={2.3522}
  mapboxToken={token}
  clickForDirections={true}
  label="Paris, France"
  labelHref="https://en.wikipedia.org/wiki/Paris"
  className="h-80 cursor-pointer"
/>

Non-Interactive Map

For display-only maps where user interaction should be disabled:

<MapboxPointer
  latitude={37.7749}
  longitude={-122.4194}
  mapboxToken={token}
  interactive={false}
  label="San Francisco, CA"
  className="h-64"
/>

Dark Theme Maps

Use dark-themed map styles for better contrast:

{
  /* Dark theme for modern interfaces */
}
;<MapboxPointer
  latitude={40.7128}
  longitude={-74.006}
  style="dark-v11"
  className="h-64"
/>
 
{
  /* Navigation optimized for night use */
}
;<MapboxPointer
  latitude={40.7128}
  longitude={-74.006}
  style="navigation-night-v1"
  className="h-64"
/>

Custom Shadow Styling

The component has no default shadow, allowing full customization:

{
  /* No shadow (default) */
}
;<MapboxPointer className="h-96" />
 
{
  /* Simple shadow */
}
;<MapboxPointer className="h-96 shadow-lg" />
 
{
  /* Shadow with hover effect */
}
;<MapboxPointer className="h-96 shadow-lg transition-shadow hover:shadow-xl" />
 
{
  /* Custom colored shadow */
}
;<MapboxPointer className="h-96 shadow-2xl shadow-blue-500/20" />

API Reference

Props

PropTypeDefaultDescription
Required Props
latitudenumber-Latitude coordinate for the map center
longitudenumber-Longitude coordinate for the map center
Optional Props
zoomnumber13Initial zoom level of the map
googleMapsUrlstring-Custom Google Maps URL for navigation
markerColorstring"#679BFF"Color of the map marker
classNamestring""Additional CSS classes for styling
interactivebooleantrueWhether the map allows user interactions (pan, zoom, rotate)
styleMapboxStyle"streets-v12"Mapbox map style theme
mapboxTokenstring-Mapbox access token (falls back to NEXT_PUBLIC_MAPBOX_TOKEN)
labelstring-Text label to display on the map
labelHrefstring-URL to link the label to
clickForDirectionsbooleanfalseEnable click-to-directions functionality

Styling

The component uses a minimal base styling approach:

/* Base classes applied */
.mapbox-container {
  @apply bg-card relative overflow-hidden rounded-lg border;
}
 
/* No default shadow - add via className */
.with-shadow {
  @apply shadow-lg transition-shadow hover:shadow-xl;
}
 
/* Labels use less rounded corners */
.mapbox-label {
  @apply rounded border px-3 py-1 text-xs;
}

Animation

The marker includes a built-in pulse animation:

  • Duration: 4 seconds per cycle
  • Effect: Scales from 1x to 6x with fade-out
  • Timing: Ease-out infinite loop
  • Style: Centered transform with opacity transition

Environment Variables

VariableDescriptionRequired
NEXT_PUBLIC_MAPBOX_TOKENYour Mapbox access tokenYes

Get your token from Mapbox Account.

Map Styles

Available Mapbox style options:

StyleDescriptionBest For
streets-v12Default street mapGeneral purpose, navigation
outdoors-v12Outdoor/hiking focusedRecreation, trails, topography
light-v11Minimal light themeClean interfaces, overlays
dark-v11Dark themeDark mode apps, night use
satellite-v9Satellite imageryAerial views, real estate
satellite-streets-v12Satellite with street labelsHybrid satellite + navigation
navigation-day-v1Optimized for daytime navigationTurn-by-turn directions
navigation-night-v1Optimized for nighttime navigationDark navigation interfaces