Map

import Map from '@/components/composites/Map';

export default function StaticPreviewDemo() {
  return (
    <div className="h-36 w-full">
      <Map
        center={[-97.7431, 30.2672]}
        zoom={14}
        interactive={false}
        attributionControl={false}
        className="h-full min-h-0 shadow-none"
      >
        <Map.Marker longitude={-97.7431} latitude={30.2672}>
          <Map.MarkerContent />
        </Map.Marker>
      </Map>
    </div>
  );
}

import Map from '@/components/composites/Map';

export default function PopupsLabelsDemo() {
  return (
    <div className="h-80 w-full">
      <Map center={[-122.42, 37.778]} zoom={13}>
        <Map.Marker longitude={-122.43} latitude={37.78}>
          <Map.MarkerContent />
          <Map.MarkerLabel>HQ</Map.MarkerLabel>
        </Map.Marker>
        <Map.Marker longitude={-122.41} latitude={37.77}>
          <Map.MarkerContent />
          <Map.MarkerTooltip>Warehouse — 12 units in stock</Map.MarkerTooltip>
        </Map.Marker>
        <Map.Popup longitude={-122.4} latitude={37.785}>
          <div className="font-semibold text-foreground">Zone closed</div>
          <p className="text-muted-foreground">
            Scheduled maintenance until Friday.
          </p>
        </Map.Popup>
      </Map>
    </div>
  );
}

import Map from '@/components/composites/Map';

export default function ControlsDemo() {
  return (
    <div className="h-80 w-full">
      <Map center={[-122.3321, 47.6062]} zoom={11}>
        <Map.Controls
          position="top-right"
          showZoom
          showCompass
          showLocate
          showFullscreen
        />
      </Map>
    </div>
  );
}

import Map from '@/components/composites/Map';

const routeCoordinates: [number, number][] = [
  [-122.4194, 37.7749],
  [-122.4094, 37.7799],
  [-122.4008, 37.7852],
  [-122.3937, 37.7955],
];

export default function RouteDemo() {
  const [start, ...rest] = routeCoordinates;
  const end = rest[rest.length - 1];

  return (
    <div className="h-80 w-full">
      <Map center={[-122.406, 37.783]} zoom={10}>
        <Map.Route coordinates={routeCoordinates} interactive width={4} />
        <Map.Marker longitude={start[0]} latitude={start[1]}>
          <Map.MarkerContent />
        </Map.Marker>
        <Map.Marker longitude={end[0]} latitude={end[1]}>
          <Map.MarkerContent className="bg-success after:bg-success-foreground" />
        </Map.Marker>
      </Map>
    </div>
  );
}

import Map from '@/components/composites/Map';

const hubs = {
  sf: [-122.4194, 37.7749] as [number, number],
  newYork: [-74.006, 40.7128] as [number, number],
  london: [-0.1276, 51.5074] as [number, number],
  tokyo: [139.6917, 35.6895] as [number, number],
  sydney: [151.2093, -33.8688] as [number, number],
};

const arcData = [
  { id: 'sf-london', from: hubs.sf, to: hubs.london },
  { id: 'sf-tokyo', from: hubs.sf, to: hubs.tokyo },
  { id: 'sf-sydney', from: hubs.sf, to: hubs.sydney },
  { id: 'newyork-london', from: hubs.newYork, to: hubs.london },
];

export default function ArcDemo() {
  return (
    <div className="h-80 w-full">
      <Map center={[0, 20]} zoom={1}>
        <Map.Arc data={arcData} interactive />
      </Map>
    </div>
  );
}

import Map from '@/components/composites/Map';

const storeCoordinates: [number, number][] = [
  [-122.42, 37.77], [-122.41, 37.78], [-122.44, 37.76],
  [-122.39, 37.75], [-122.43, 37.8], [-122.4, 37.73],
  [-118.24, 34.05], [-118.29, 34.02], [-118.2, 34.08],
  [-118.33, 34.06], [-118.22, 34.01], [-118.27, 34.09],
  [-117.16, 32.72], [-117.2, 32.75], [-117.12, 32.7],
  [-117.18, 32.68], [-117.1, 32.74], [-117.22, 32.71],
  [-121.49, 38.58], [-121.45, 38.55], [-121.52, 38.6],
  [-121.47, 38.62], [-121.53, 38.56], [-121.44, 38.59],
];

const storeLocations: GeoJSON.FeatureCollection<GeoJSON.Point> = {
  type: 'FeatureCollection',
  features: storeCoordinates.map((coordinates, index) => ({
    type: 'Feature',
    properties: { storeId: index },
    geometry: { type: 'Point', coordinates },
  })),
};

export default function ClusterLayerDemo() {
  return (
    <div className="h-80 w-full">
      <Map center={[-119.4179, 36.7783]} zoom={5}>
        <Map.ClusterLayer data={storeLocations} />
      </Map>
    </div>
  );
}

import { useState } from 'react';
import Segment from '@/components/ui/Segment';
import Map from '@/components/composites/Map';

const cities = [
  { label: 'New York', center: [-74.006, 40.7128] as [number, number] },
  { label: 'London', center: [-0.1276, 51.5074] as [number, number] },
  { label: 'Tokyo', center: [139.6917, 35.6895] as [number, number] },
  { label: 'Sydney', center: [151.2093, -33.8688] as [number, number] },
];

export default function ControlledViewportDemo() {
  const [active, setActive] = useState(cities[0].label);
  const [viewport, setViewport] = useState({
    center: cities[0].center,
    zoom: 11,
    bearing: 0,
    pitch: 0,
  });

  const handleChange = (label: string) => {
    const city = cities.find((c) => c.label === label);
    if (!city) return;
    setActive(label);
    setViewport({ center: city.center, zoom: 11, bearing: 0, pitch: 0 });
  };

  return (
    <div className="w-full space-y-4">
      <div className="flex justify-center">
        <Segment value={active} onChange={handleChange}>
          {cities.map((city) => (
            <Segment.Item key={city.label} value={city.label}>
              {city.label}
            </Segment.Item>
          ))}
        </Segment>
      </div>
      <div className="h-72">
        <Map viewport={viewport} onViewportChange={setViewport} className="h-full" />
      </div>
      <div className="text-xs text-muted-foreground">
        {viewport.center[1].toFixed(2)}, {viewport.center[0].toFixed(2)} ·
        zoom {viewport.zoom.toFixed(1)}
      </div>
    </div>
  );
}