Map Compare

1"use client"
2 
3import type { ReactNode } from "react"
4import { Map } from "./map"
5import { cn } from "@/lib/utils"
6import type { MapProjection, MapCoordinates, MapCompareOrientation } from "./types"
7 
8const DEFAULT_CENTER: MapCoordinates = [0, 0]
9const DEFAULT_ZOOM = 2
10const DEFAULT_BEARING = 0
11const DEFAULT_PITCH = 0
12const DEFAULT_SIZE = 50
13const DEFAULT_ORIENTATION: MapCompareOrientation = "horizontal"
14 
15const LABEL_BASE_STYLES = "absolute z-10 bg-background/95 backdrop-blur-sm border rounded px-2 py-1 text-xs font-medium"
16 
17type MapCompareProps = {
18  accessToken?: string
19  loader?: ReactNode
20  beforeStyle?: string
21  afterStyle?: string
22  center?: MapCoordinates
23  zoom?: number
24  bearing?: number
25  pitch?: number
26  projection?: MapProjection
27  defaultSize?: number
28  orientation?: MapCompareOrientation
29  showLabels?: boolean
30}
31 
32export const MapCompare = ({
33  accessToken,
34  loader,
35  beforeStyle,
36  afterStyle,
37  center = DEFAULT_CENTER,
38  zoom = DEFAULT_ZOOM,
39  bearing = DEFAULT_BEARING,
40  pitch = DEFAULT_PITCH,
41  projection,
42  defaultSize = DEFAULT_SIZE,
43  orientation = DEFAULT_ORIENTATION,
44  showLabels = false,
45}: MapCompareProps) => {
46  const isVertical = orientation === "vertical"
47 
48  const beforeLabel = isVertical ? "Top" : "Before"
49  const afterLabel = isVertical ? "Bottom" : "After"
50 
51  const beforeLabelPosition = "top-3 left-3"
52  const afterLabelPosition = isVertical ? "bottom-3 right-3" : "top-3 right-3"
53 
54  return (
55    <div className={cn("relative w-full h-full", isVertical ? "flex flex-col" : "flex")}>
56      <MapPanel
57        accessToken={accessToken}
58        center={center}
59        zoom={zoom}
60        bearing={bearing}
61        pitch={pitch}
62        projection={projection}
63        style={beforeStyle}
64        loader={loader}
65        label={beforeLabel}
66        labelPosition={beforeLabelPosition}
67        isVertical={isVertical}
68        size={defaultSize}
69        showLabel={showLabels}
70      />
71      <MapPanel
72        accessToken={accessToken}
73        center={center}
74        zoom={zoom}
75        bearing={bearing}
76        pitch={pitch}
77        projection={projection}
78        style={afterStyle}
79        loader={loader}
80        label={afterLabel}
81        labelPosition={afterLabelPosition}
82        isVertical={isVertical}
83        size={100 - defaultSize}
84        showLabel={showLabels}
85      />
86    </div>
87  )
88}
89 
90type MapPanelProps = {
91  accessToken?: string
92  center: MapCoordinates
93  zoom: number
94  bearing: number
95  pitch: number
96  isVertical: boolean
97// … truncated