shadcn-map 0.1.0

package/dist/components/Popup.svelte

@@ -0,0 +1,228 @@
+<script lang='ts' module>
+  import type { Snippet } from 'svelte'
+
+  export interface PopupProps {
+    /** Popup position [lng, lat] */
+    lngLat: [number, number]
+    /** Whether popup is visible */
+    open?: boolean
+    /** Close callback */
+    onclose?: () => void
+    /** Additional CSS classes */
+    class?: string
+    /** Offset from anchor point (number = uniform, array = [x, y], or 'auto' for auto-detected) */
+    offset?: number | [number, number] | 'auto'
+    /** Children */
+    children?: Snippet
+  }
+</script>
+
+<script lang='ts'>
+  import maplibregl from 'maplibre-gl'
+  import { onMount } from 'svelte'
+  import { getMapContext } from '../context.svelte'
+
+  const {
+    lngLat,
+    open = true,
+    onclose,
+    class: className = '',
+    offset = 'auto',
+    children,
+  }: PopupProps = $props()
+
+  const ctx = getMapContext()
+
+  let popup: maplibregl.Popup | null = null
+  let contentElement: HTMLDivElement
+  let programmaticClose = false
+  let lastActiveMarkerId: string | null = null
+
+  const sizeOffsets: Record<'sm' | 'md' | 'lg', [number, number]> = {
+    sm: [0, -12],
+    md: [0, -16],
+    lg: [0, -20],
+  }
+
+  const markerAtLocation = $derived.by(() => {
+    for (const marker of ctx.markers.values()) {
+      const lngDiff = Math.abs(marker.lngLat[0] - lngLat[0])
+      const latDiff = Math.abs(marker.lngLat[1] - lngLat[1])
+      if (lngDiff < 0.000001 && latDiff < 0.000001) {
+        return marker
+      }
+    }
+    return null
+  })
+
+  const detectedMarkerSize = $derived(markerAtLocation?.size ?? 'md')
+
+  const computedOffset = $derived.by((): number | [number, number] => {
+    if (offset !== 'auto') {
+      return offset
+    }
+    return sizeOffsets[detectedMarkerSize]
+  })
+
+  function handleClose() {
+    if (!programmaticClose) {
+      ctx.setActivePopupMarker(null)
+      onclose?.()
+    }
+  }
+
+  function closePopup() {
+    if (!popup) {
+      return
+    }
+    programmaticClose = true
+    popup.remove()
+    queueMicrotask(() => {
+      programmaticClose = false
+    })
+  }
+
+  onMount(() => {
+    const map = ctx.map
+    if (!map || !contentElement) {
+      return
+    }
+
+    popup = new maplibregl.Popup({
+      closeButton: true,
+      closeOnClick: true,
+      offset: computedOffset,
+      anchor: 'bottom',
+      className: 'shadcn-map-popup',
+    })
+
+    popup.setDOMContent(contentElement)
+    popup.setLngLat(lngLat)
+    popup.on('close', handleClose)
+
+    if (open) {
+      popup.addTo(map)
+    }
+
+    return () => {
+      // If this popup is being unmounted while open, MapLibre won't necessarily emit a "close"
+      // event (we detach the listener before remove). Ensure the marker active state is cleared.
+      if (lastActiveMarkerId && ctx.activePopupMarkerId === lastActiveMarkerId) {
+        ctx.setActivePopupMarker(null)
+      }
+      popup?.off('close', handleClose)
+      popup?.remove()
+      popup = null
+    }
+  })
+
+  $effect(() => {
+    if (popup) {
+      popup.setLngLat(lngLat)
+    }
+  })
+
+  $effect(() => {
+    if (popup) {
+      popup.setOffset(computedOffset)
+    }
+  })
+
+  $effect(() => {
+    const map = ctx.map
+    if (!popup || !map) {
+      return
+    }
+
+    if (open) {
+      if (!popup.isOpen()) {
+        popup.addTo(map)
+      }
+      if (markerAtLocation) {
+        ctx.setActivePopupMarker(markerAtLocation.id)
+        lastActiveMarkerId = markerAtLocation.id
+      }
+    }
+    else if (popup.isOpen()) {
+      closePopup()
+    }
+  })
+
+  $effect(() => {
+    if (!open) {
+      if (markerAtLocation && ctx.activePopupMarkerId === markerAtLocation.id) {
+        ctx.setActivePopupMarker(null)
+      }
+    }
+  })
+</script>
+
+<div bind:this={contentElement} class='shadcn-popup-content {className}'>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .shadcn-popup-content {
+    display: grid;
+    gap: 6px;
+  }
+
+  :global(.shadcn-map-popup) {
+    z-index: 20 !important;
+  }
+
+  :global(.shadcn-map-popup .maplibregl-popup-content) {
+    background: oklch(var(--card));
+    color: oklch(var(--card-foreground));
+    border: 1px solid oklch(var(--border));
+    border-radius: 10px;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+
+  :global(.shadcn-map-popup .maplibregl-popup-close-button) {
+    color: oklch(var(--muted-foreground));
+    font-size: 16px;
+    padding: 2px 6px;
+  }
+
+  :global(.shadcn-map-popup .maplibregl-popup-close-button:hover) {
+    background: oklch(var(--muted));
+    color: oklch(var(--foreground));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip) {
+    border-top-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip) {
+    border-bottom-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip) {
+    border-right-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip) {
+    border-left-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip) {
+    border-top-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip) {
+    border-top-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip) {
+    border-bottom-color: oklch(var(--card));
+  }
+
+  :global(.shadcn-map-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip) {
+    border-bottom-color: oklch(var(--card));
+  }
+</style>

package/dist/components/Popup.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export interface PopupProps {
+    /** Popup position [lng, lat] */
+    lngLat: [number, number];
+    /** Whether popup is visible */
+    open?: boolean;
+    /** Close callback */
+    onclose?: () => void;
+    /** Additional CSS classes */
+    class?: string;
+    /** Offset from anchor point (number = uniform, array = [x, y], or 'auto' for auto-detected) */
+    offset?: number | [number, number] | 'auto';
+    /** Children */
+    children?: Snippet;
+}
+declare const Popup: import("svelte").Component<PopupProps, {}, "">;
+type Popup = ReturnType<typeof Popup>;
+export default Popup;

package/dist/components/controls/GeolocateControl.svelte

@@ -0,0 +1,141 @@
+<script lang='ts' module>
+  import type { ControlPosition } from '../../types'
+
+  export interface GeolocateControlProps {
+    /** Control position on map */
+    position?: ControlPosition
+    /** Zoom level to fly to when locating */
+    zoom?: number
+    /** High accuracy geolocation (may be slower / use more battery) */
+    enableHighAccuracy?: boolean
+    /** Maximum cached position age in ms */
+    maximumAge?: number
+    /** Timeout in ms */
+    timeout?: number
+    /** Called with found coordinates */
+    onlocate?: (lngLat: [number, number]) => void
+    /** Called when geolocation fails */
+    onerror?: (error: GeolocationPositionError | Error) => void
+    /** Accessible label */
+    ariaLabel?: string
+  }
+</script>
+
+<script lang='ts'>
+  import type { Map as MapLibreMap } from 'maplibre-gl'
+  import { onMount } from 'svelte'
+  import { getMapContext } from '../../context.svelte'
+
+  const {
+    position = 'bottom-right',
+    zoom = 14,
+    enableHighAccuracy = true,
+    maximumAge = 30_000,
+    timeout = 10_000,
+    onlocate,
+    onerror,
+    ariaLabel = 'Go to my location',
+  }: GeolocateControlProps = $props()
+
+  const ctx = getMapContext()
+
+  type ControlLike = {
+    onAdd(map: MapLibreMap): HTMLElement
+    onRemove(map: MapLibreMap): void
+  }
+
+  let control: ControlLike | null = null
+  let mountedMap: MapLibreMap | null = null
+
+  function handleClick() {
+    if (typeof navigator === 'undefined' || !navigator.geolocation) {
+      onerror?.(new Error('Geolocation is not available in this environment.'))
+      return
+    }
+
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        const lngLat: [number, number] = [pos.coords.longitude, pos.coords.latitude]
+        ctx.flyTo(lngLat, { zoom })
+        onlocate?.(lngLat)
+      },
+      (err) => {
+        onerror?.(err)
+      },
+      { enableHighAccuracy, maximumAge, timeout },
+    )
+  }
+
+  onMount(() => {
+    const map = ctx.map
+    if (!map) {
+      return
+    }
+
+    control = {
+      onAdd() {
+        const container = document.createElement('div')
+        container.className = 'maplibregl-ctrl maplibregl-ctrl-group shadcn-geolocate'
+
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.className = 'maplibregl-ctrl-icon shadcn-geolocate-btn'
+        button.setAttribute('aria-label', ariaLabel)
+
+        // Simple target icon (SVG) so we don't require icon libraries.
+        button.innerHTML = `
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="7"></circle>
+            <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"></circle>
+            <path d="M12 2v3"></path>
+            <path d="M12 19v3"></path>
+            <path d="M2 12h3"></path>
+            <path d="M19 12h3"></path>
+          </svg>
+        `
+
+        button.addEventListener('click', handleClick)
+        container.appendChild(button)
+        return container
+      },
+      onRemove(mapInstance) {
+        // MapLibre removes the container element automatically.
+        void mapInstance
+      },
+    }
+
+    mountedMap = map
+    map.addControl(control as any, position)
+
+    return () => {
+      if (control && mountedMap) {
+        mountedMap.removeControl(control as any)
+      }
+      control = null
+      mountedMap = null
+    }
+  })
+</script>
+
+<style>
+  /* Geolocate button base styles */
+  :global(.shadcn-map .shadcn-geolocate-btn) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image: none !important;
+    background-color: transparent !important;
+  }
+
+  :global(.shadcn-map .shadcn-geolocate-btn svg) {
+    display: block;
+  }
+
+  /* Dark mode: override the filter: invert(1) from Map.svelte since we use inline SVG with currentColor.
+   * Also explicitly set color so the SVG stroke inherits the light foreground. */
+  :global(.dark .shadcn-map .shadcn-geolocate-btn.maplibregl-ctrl-icon) {
+    filter: none !important;
+    color: var(--map-ui-foreground);
+  }
+</style>

package/dist/components/controls/GeolocateControl.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ControlPosition } from '../../types';
+export interface GeolocateControlProps {
+    /** Control position on map */
+    position?: ControlPosition;
+    /** Zoom level to fly to when locating */
+    zoom?: number;
+    /** High accuracy geolocation (may be slower / use more battery) */
+    enableHighAccuracy?: boolean;
+    /** Maximum cached position age in ms */
+    maximumAge?: number;
+    /** Timeout in ms */
+    timeout?: number;
+    /** Called with found coordinates */
+    onlocate?: (lngLat: [number, number]) => void;
+    /** Called when geolocation fails */
+    onerror?: (error: GeolocationPositionError | Error) => void;
+    /** Accessible label */
+    ariaLabel?: string;
+}
+declare const GeolocateControl: import("svelte").Component<GeolocateControlProps, {}, "">;
+type GeolocateControl = ReturnType<typeof GeolocateControl>;
+export default GeolocateControl;

package/dist/components/controls/NavigationControl.svelte

@@ -0,0 +1,50 @@
+<script lang='ts' module>
+  import type { ControlPosition } from '../../types'
+
+  export interface NavigationControlProps {
+    /** Control position on map */
+    position?: ControlPosition
+    /** Show compass */
+    showCompass?: boolean
+    /** Show zoom buttons */
+    showZoom?: boolean
+  }
+</script>
+
+<script lang='ts'>
+  import maplibregl from 'maplibre-gl'
+  import { onMount } from 'svelte'
+  import { getMapContext } from '../../context.svelte'
+
+  const {
+    position = 'top-right',
+    showCompass = true,
+    showZoom = true,
+  }: NavigationControlProps = $props()
+
+  const ctx = getMapContext()
+
+  let control: maplibregl.NavigationControl | null = null
+
+  onMount(() => {
+    const map = ctx.map
+    if (!map)
+      return
+
+    control = new maplibregl.NavigationControl({
+      showCompass,
+      showZoom,
+      visualizePitch: true,
+    })
+
+    map.addControl(control, position)
+
+    return () => {
+      const currentMap = ctx.map
+      if (control && currentMap) {
+        currentMap.removeControl(control)
+      }
+      control = null
+    }
+  })
+</script>

package/dist/components/controls/NavigationControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ControlPosition } from '../../types';
+export interface NavigationControlProps {
+    /** Control position on map */
+    position?: ControlPosition;
+    /** Show compass */
+    showCompass?: boolean;
+    /** Show zoom buttons */
+    showZoom?: boolean;
+}
+declare const NavigationControl: import("svelte").Component<NavigationControlProps, {}, "">;
+type NavigationControl = ReturnType<typeof NavigationControl>;
+export default NavigationControl;

package/dist/components/controls/ScaleControl.svelte

@@ -0,0 +1,49 @@
+<script lang='ts' module>
+  import type { ControlPosition } from '../../types'
+
+  export interface ScaleControlProps {
+    /** Control position on map */
+    position?: ControlPosition
+    /** Unit of measurement */
+    unit?: 'imperial' | 'metric' | 'nautical'
+    /** Maximum width in pixels */
+    maxWidth?: number
+  }
+</script>
+
+<script lang='ts'>
+  import maplibregl from 'maplibre-gl'
+  import { onMount } from 'svelte'
+  import { getMapContext } from '../../context.svelte'
+
+  const {
+    position = 'bottom-left',
+    unit = 'metric',
+    maxWidth = 100,
+  }: ScaleControlProps = $props()
+
+  const ctx = getMapContext()
+
+  let control: maplibregl.ScaleControl | null = null
+
+  onMount(() => {
+    const map = ctx.map
+    if (!map)
+      return
+
+    control = new maplibregl.ScaleControl({
+      maxWidth,
+      unit,
+    })
+
+    map.addControl(control, position)
+
+    return () => {
+      const currentMap = ctx.map
+      if (control && currentMap) {
+        currentMap.removeControl(control)
+      }
+      control = null
+    }
+  })
+</script>

package/dist/components/controls/ScaleControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ControlPosition } from '../../types';
+export interface ScaleControlProps {
+    /** Control position on map */
+    position?: ControlPosition;
+    /** Unit of measurement */
+    unit?: 'imperial' | 'metric' | 'nautical';
+    /** Maximum width in pixels */
+    maxWidth?: number;
+}
+declare const ScaleControl: import("svelte").Component<ScaleControlProps, {}, "">;
+type ScaleControl = ReturnType<typeof ScaleControl>;
+export default ScaleControl;

package/dist/components/controls/index.d.ts

@@ -0,0 +1,6 @@
+export { default as GeolocateControl } from './GeolocateControl.svelte';
+export type { GeolocateControlProps } from './GeolocateControl.svelte';
+export { default as NavigationControl } from './NavigationControl.svelte';
+export type { NavigationControlProps } from './NavigationControl.svelte';
+export { default as ScaleControl } from './ScaleControl.svelte';
+export type { ScaleControlProps } from './ScaleControl.svelte';

package/dist/components/controls/index.js

@@ -0,0 +1,3 @@
+export { default as GeolocateControl } from './GeolocateControl.svelte';
+export { default as NavigationControl } from './NavigationControl.svelte';
+export { default as ScaleControl } from './ScaleControl.svelte';

package/dist/components/index.d.ts

@@ -0,0 +1,13 @@
+export { default as ClusterLayer } from './ClusterLayer.svelte';
+export type { ClusterLayerProps, ClusterPoint } from './ClusterLayer.svelte';
+export { NavigationControl, ScaleControl } from './controls';
+export type { GeolocateControlProps, NavigationControlProps, ScaleControlProps } from './controls';
+export { GeolocateControl } from './controls';
+export { default as DetailsPanel } from './DetailsPanel.svelte';
+export type { DetailsPanelProps } from './DetailsPanel.svelte';
+export { default as Map } from './Map.svelte';
+export type { MapProps } from './Map.svelte';
+export { default as Marker } from './Marker.svelte';
+export type { MarkerProps } from './Marker.svelte';
+export { default as Popup } from './Popup.svelte';
+export type { PopupProps } from './Popup.svelte';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export { default as ClusterLayer } from './ClusterLayer.svelte';
+export { NavigationControl, ScaleControl } from './controls';
+export { GeolocateControl } from './controls';
+export { default as DetailsPanel } from './DetailsPanel.svelte';
+export { default as Map } from './Map.svelte';
+export { default as Marker } from './Marker.svelte';
+export { default as Popup } from './Popup.svelte';

package/dist/context.svelte.d.ts

@@ -0,0 +1,37 @@
+import type maplibregl from 'maplibre-gl';
+export interface MarkerRegistration {
+    id: string;
+    lngLat: [number, number];
+    clusterable: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface FlyToOptions {
+    zoom?: number;
+    duration?: number;
+    easing?: (t: number) => number;
+}
+export interface LngLatBounds {
+    sw: [number, number];
+    ne: [number, number];
+}
+export interface MapContextStore {
+    readonly map: maplibregl.Map | null;
+    readonly loaded: boolean;
+    readonly markers: Map<string, MarkerRegistration>;
+    readonly clusteredMarkerIds: Set<string>;
+    readonly clusteredVersion: number;
+    readonly activePopupMarkerId: string | null;
+    setMap: (map: maplibregl.Map | null) => void;
+    setLoaded: (loaded: boolean) => void;
+    registerMarker: (registration: MarkerRegistration) => void;
+    updateMarker: (id: string, updates: Partial<MarkerRegistration>) => void;
+    unregisterMarker: (id: string) => void;
+    setClusteredMarkers: (ids: Set<string>) => void;
+    setActivePopupMarker: (id: string | null) => void;
+    flyTo: (lngLat: [number, number], options?: FlyToOptions) => void;
+    getBounds: () => LngLatBounds | null;
+    getCenter: () => [number, number] | null;
+    getZoom: () => number | null;
+}
+export declare function createMapContext(): MapContextStore;
+export declare function getMapContext(): MapContextStore;