Map

An interactive geographic map with selectable markers, route lines, and camera controls.

Powered by MapLibre; applications supply their own style, geography, and prepared data.

Installation

pnpm add github:ahmadassaf/design-system

import { Map } from '@gaudi/design-system/core/Map';

Usage

'use client';
import { useState } from 'react';import { Map } from '@gaudi/design-system/core/Map';
const meeting = {  id: 'meeting',  coordinates: [-73.983, 40.7535],  label: 'Bryant Park meeting point'};
// Pass the host application's MapLibre style object or URL as mapStyle.// Load @gaudi/design-system/styles.css once in the application's stylesheet entry.export function MeetingMap({ mapStyle }) {  const [selectedId, setSelectedId] = useState(null);
  return (    <div>      <Map        label='Meeting location'        mapStyle={mapStyle}        initialViewState={{ center: meeting.coordinates, zoom: 15 }}        markers={[meeting]}        selectedMarkerId={selectedId}        onMarkerClick={setSelectedId}        style={{ height: '24rem' }}      />      <p>Bryant Park, 42nd Street and Sixth Avenue, New York.</p>      {selectedId === meeting.id && (        <p role='status'>Meet at the Sixth Avenue entrance.</p>      )}    </div>  );}

Examples

Playground

Single location

Unavailable map & recovery

API

Accessibility

The named region contains a focusable map canvas: arrows pan, plus/minus zoom. Marker buttons and controls work with Enter/Space and show focus. Selected markers expose aria-pressed. Browser touch gestures and reduced motion are supported. Geographic canvas content itself is not a screen-reader equivalent: provide a linked list or textual route summary, as the tracking example does.

Notes

• Use an app-owned basemap and preserve the provider’s attribution. Style URLs, tiles, sprites, and glyphs are only requested when configured by the host. For local demos, the bundled NYC geometry and system fonts need no external services.
• The tracking story is a composition of Map, Button, Input, Select, Icon, and Pill. Vehicles and journeys are fictional, stored locally, and do not imply live tracking, traffic, or route calculation.
• Keep markers and route IDs stable. Updating coordinates moves the existing marker and preserves its button identity. Resource failures show a recoverable state with a list fallback; WebGL support is required to draw the map.

Related