shadcn-map 0.1.0

package/dist/components/ClusterLayer.svelte

@@ -0,0 +1,511 @@
+<script lang='ts' module>
+  export interface ClusterPoint {
+    /** Unique identifier */
+    id: string | number
+    /** Position [lng, lat] */
+    lngLat: [number, number]
+    /** Additional properties */
+    properties?: Record<string, unknown>
+  }
+
+  export interface ClusterLayerProps {
+    /** Array of points to cluster */
+    points: ClusterPoint[]
+    /** Click callback for individual points */
+    onclick?: (point: ClusterPoint) => void
+    /** Click callback for clusters */
+    onclusterclick?: (clusterId: number, zoom: number) => void
+    /** Cluster radius in pixels */
+    clusterRadius?: number
+    /** Max zoom to cluster at */
+    clusterMaxZoom?: number
+    /** Whether to render unclustered points */
+    showUnclustered?: boolean
+    /** Callback with unclustered point ids */
+    onunclusteredchange?: (ids: Set<string>) => void
+    /** Callback when cluster source is loading */
+    onclusterloadingchange?: (loading: boolean) => void
+  }
+</script>
+
+<script lang='ts'>
+  import type { GeoJSONSource, MapLayerMouseEvent, MapLibreMap } from '../types'
+  import Supercluster from 'supercluster'
+  import { onMount } from 'svelte'
+  import { getMapContext } from '../context.svelte'
+
+  const {
+    points,
+    onclick,
+    onclusterclick,
+    clusterRadius = 50,
+    clusterMaxZoom = 14,
+    showUnclustered = true,
+    onunclusteredchange,
+    onclusterloadingchange,
+  }: ClusterLayerProps = $props()
+
+  const ctx = getMapContext()
+
+  const instanceId = `shadcn-cluster-${Math.random().toString(36).slice(2)}`
+  const sourceId = `${instanceId}-source`
+  const clusterLayerId = `${instanceId}-cluster`
+  const clusterCountId = `${instanceId}-count`
+  const unclusteredLayerId = `${instanceId}-point`
+
+  let map: MapLibreMap | null = null
+  let pointsById = new Map<string, ClusterPoint>()
+  let detachEvents: (() => void) | null = null
+  let lastConfigKey = ''
+  let unclusteredUpdateScheduled = false
+  let lastUnclusteredKey = '__initial__'
+  let pointsKey = ''
+  let detachClusterStateEvents: (() => void) | null = null
+  let clusterLoading = false
+
+  let supercluster: Supercluster<{ id: string | number }, Supercluster.AnyProps> | null = null
+  let lastSuperclusterPointsKey = ''
+
+  function getIsDarkMode(): boolean {
+    if (typeof document === 'undefined') {
+      return true
+    }
+    return document.documentElement.classList.contains('dark')
+  }
+
+  function getThemeColors() {
+    const isDark = getIsDarkMode()
+    return isDark
+      ? {
+        clusterLow: '#3f3f46',
+        clusterMid: '#52525b',
+        clusterHigh: '#71717a',
+        clusterStroke: '#09090b',
+        clusterText: '#f4f4f5',
+        point: '#38bdf8',
+        pointStroke: '#0f172a',
+      }
+      : {
+        clusterLow: '#e4e4e7',
+        clusterMid: '#d4d4d8',
+        clusterHigh: '#a1a1aa',
+        clusterStroke: '#ffffff',
+        clusterText: '#18181b',
+        point: '#0284c7',
+        pointStroke: '#ffffff',
+      }
+  }
+
+  type ClusterFeatureCollection = {
+    type: 'FeatureCollection'
+    features: Array<{
+      type: 'Feature'
+      geometry: {
+        type: 'Point'
+        coordinates: [number, number]
+      }
+      properties: Record<string, unknown> & { id: string | number }
+    }>
+  }
+
+  function buildGeoJSON(): ClusterFeatureCollection {
+    return {
+      type: 'FeatureCollection',
+      features: points.map(point => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: point.lngLat,
+        },
+        properties: {
+          id: point.id,
+          ...point.properties,
+        },
+      })),
+    }
+  }
+
+  function updatePointsLookup() {
+    pointsById = new Map(points.map(point => [String(point.id), point]))
+    const nextPointsKey = points.map(point => String(point.id)).sort().join('|')
+    if (nextPointsKey !== pointsKey) {
+      pointsKey = nextPointsKey
+      lastUnclusteredKey = '__initial__'
+    }
+  }
+
+  function updateSourceData() {
+    const source = map?.getSource(sourceId) as GeoJSONSource | undefined
+    if (!source) {
+      return
+    }
+    source.setData(buildGeoJSON())
+  }
+
+  function buildUnclusteredKey(ids: Set<string>) {
+    if (ids.size === 0) {
+      return ''
+    }
+    return Array.from(ids).sort().join('|')
+  }
+
+  function setClusterLoading(next: boolean) {
+    if (clusterLoading === next) {
+      return
+    }
+    clusterLoading = next
+    onclusterloadingchange?.(next)
+  }
+
+  function ensureSupercluster() {
+    const currentPointsKey = points.map(p => `${p.id}:${p.lngLat[0]},${p.lngLat[1]}`).join('|')
+    if (supercluster && currentPointsKey === lastSuperclusterPointsKey) {
+      return
+    }
+
+    supercluster = new Supercluster({
+      radius: clusterRadius,
+      maxZoom: clusterMaxZoom,
+      extent: 512,
+      map: props => ({ id: props.id }),
+      reduce: (acc, props) => { acc.id = props.id },
+    })
+
+    const features = points.map(point => ({
+      type: 'Feature' as const,
+      geometry: {
+        type: 'Point' as const,
+        coordinates: point.lngLat as [number, number],
+      },
+      properties: { id: point.id },
+    }))
+
+    supercluster.load(features)
+    lastSuperclusterPointsKey = currentPointsKey
+  }
+
+  function emitUnclusteredIds() {
+    if (!map || !onunclusteredchange) {
+      return
+    }
+
+    ensureSupercluster()
+    if (!supercluster) {
+      return
+    }
+
+    const currentZoom = Math.floor(map.getZoom())
+
+    const clusters = supercluster.getClusters([-180, -90, 180, 90], currentZoom)
+
+    const ids = new Set<string>()
+    for (const feature of clusters) {
+      const props = feature.properties
+      if (!('cluster' in props) || !props.cluster) {
+        const id = (props as { id?: string | number }).id
+        if (id !== undefined && id !== null) {
+          ids.add(String(id))
+        }
+      }
+    }
+
+    const key = buildUnclusteredKey(ids)
+    if (key === lastUnclusteredKey) {
+      return
+    }
+    lastUnclusteredKey = key
+    setClusterLoading(false)
+    onunclusteredchange(ids)
+  }
+
+  function scheduleUnclusteredUpdate() {
+    if (!onunclusteredchange || unclusteredUpdateScheduled) {
+      return
+    }
+    unclusteredUpdateScheduled = true
+
+    const run = () => {
+      unclusteredUpdateScheduled = false
+      emitUnclusteredIds()
+    }
+
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(run)
+    }
+    else {
+      setTimeout(run, 0)
+    }
+  }
+
+  function attachClusterStateEvents(currentMap: MapLibreMap) {
+    if (!onunclusteredchange) {
+      return
+    }
+    detachClusterStateEvents?.()
+
+    const handleZoomChange = () => {
+      emitUnclusteredIds()
+    }
+
+    const handleViewChange = () => {
+      scheduleUnclusteredUpdate()
+    }
+
+    currentMap.on('zoom', handleZoomChange)
+    currentMap.on('zoomend', handleZoomChange)
+    currentMap.on('move', handleViewChange)
+    currentMap.on('moveend', handleViewChange)
+
+    detachClusterStateEvents = () => {
+      currentMap.off('zoom', handleZoomChange)
+      currentMap.off('zoomend', handleZoomChange)
+      currentMap.off('move', handleViewChange)
+      currentMap.off('moveend', handleViewChange)
+    }
+  }
+
+  function attachLayerEvents(currentMap: MapLibreMap) {
+    detachEvents?.()
+
+    const handleClusterClick = (event: MapLayerMouseEvent) => {
+      const feature = event.features?.[0]
+      const clusterId = Number(feature?.properties?.cluster_id)
+      if (!Number.isFinite(clusterId)) {
+        return
+      }
+
+      const source = currentMap.getSource(sourceId) as GeoJSONSource | undefined
+      const coordinates = (feature?.geometry as { coordinates?: [number, number] } | undefined)?.coordinates
+      if (!source || !coordinates) {
+        return
+      }
+
+      Promise.resolve(source.getClusterExpansionZoom(clusterId))
+        .then((zoom) => {
+          const center = coordinates as [number, number]
+          currentMap.easeTo({ center, zoom })
+          onclusterclick?.(clusterId, zoom)
+        })
+        .catch(() => {})
+    }
+
+    const handlePointClick = (event: MapLayerMouseEvent) => {
+      const feature = event.features?.[0]
+      const id = feature?.properties?.id
+      const point = pointsById.get(String(id))
+      if (point) {
+        onclick?.(point)
+        return
+      }
+
+      const coordinates = (feature?.geometry as { coordinates?: [number, number] } | undefined)?.coordinates
+      if (!coordinates) {
+        return
+      }
+
+      onclick?.({
+        id: id ?? `${coordinates[0]}-${coordinates[1]}`,
+        lngLat: coordinates as [number, number],
+        properties: { ...feature?.properties },
+      })
+    }
+
+    const handleMouseEnter = () => {
+      currentMap.getCanvas().style.cursor = 'pointer'
+    }
+
+    const handleMouseLeave = () => {
+      currentMap.getCanvas().style.cursor = ''
+    }
+
+    currentMap.on('click', clusterLayerId, handleClusterClick)
+    if (showUnclustered) {
+      currentMap.on('click', unclusteredLayerId, handlePointClick)
+    }
+    currentMap.on('mouseenter', clusterLayerId, handleMouseEnter)
+    currentMap.on('mouseleave', clusterLayerId, handleMouseLeave)
+    if (showUnclustered) {
+      currentMap.on('mouseenter', unclusteredLayerId, handleMouseEnter)
+      currentMap.on('mouseleave', unclusteredLayerId, handleMouseLeave)
+    }
+
+    detachEvents = () => {
+      currentMap.off('click', clusterLayerId, handleClusterClick)
+      if (showUnclustered) {
+        currentMap.off('click', unclusteredLayerId, handlePointClick)
+      }
+      currentMap.off('mouseenter', clusterLayerId, handleMouseEnter)
+      currentMap.off('mouseleave', clusterLayerId, handleMouseLeave)
+      if (showUnclustered) {
+        currentMap.off('mouseenter', unclusteredLayerId, handleMouseEnter)
+        currentMap.off('mouseleave', unclusteredLayerId, handleMouseLeave)
+      }
+    }
+  }
+
+  function addLayers(currentMap: MapLibreMap) {
+    if (currentMap.getSource(sourceId)) {
+      return
+    }
+
+    currentMap.addSource(sourceId, {
+      type: 'geojson',
+      data: buildGeoJSON(),
+      cluster: true,
+      clusterRadius,
+      clusterMaxZoom,
+    })
+
+    const colors = getThemeColors()
+
+    currentMap.addLayer({
+      id: clusterLayerId,
+      type: 'circle',
+      source: sourceId,
+      filter: ['has', 'point_count'],
+      paint: {
+        'circle-color': [
+          'step',
+          ['get', 'point_count'],
+          colors.clusterLow,
+          10,
+          colors.clusterMid,
+          50,
+          colors.clusterHigh,
+        ],
+        'circle-radius': ['step', ['get', 'point_count'], 16, 10, 20, 50, 24],
+        'circle-stroke-width': 1,
+        'circle-stroke-color': colors.clusterStroke,
+      },
+    })
+
+    currentMap.addLayer({
+      id: clusterCountId,
+      type: 'symbol',
+      source: sourceId,
+      filter: ['has', 'point_count'],
+      layout: {
+        'text-field': '{point_count_abbreviated}',
+        'text-font': ['Noto Sans Regular'],
+        'text-size': 12,
+      },
+      paint: {
+        'text-color': colors.clusterText,
+        'text-opacity': 1,
+      },
+    })
+    currentMap.setPaintProperty(clusterCountId, 'text-opacity-transition', { duration: 0, delay: 0 })
+    currentMap.setPaintProperty(clusterCountId, 'text-color-transition', { duration: 0, delay: 0 })
+
+    if (showUnclustered) {
+      currentMap.addLayer({
+        id: unclusteredLayerId,
+        type: 'circle',
+        source: sourceId,
+        filter: ['!', ['has', 'point_count']],
+        paint: {
+          'circle-color': colors.point,
+          'circle-radius': 6,
+          'circle-stroke-width': 2,
+          'circle-stroke-color': colors.pointStroke,
+        },
+      })
+    }
+
+    attachLayerEvents(currentMap)
+  }
+
+  function removeLayers(currentMap: MapLibreMap) {
+    detachEvents?.()
+    detachEvents = null
+
+    if (currentMap.getLayer(clusterCountId)) {
+      currentMap.removeLayer(clusterCountId)
+    }
+    if (currentMap.getLayer(clusterLayerId)) {
+      currentMap.removeLayer(clusterLayerId)
+    }
+    if (currentMap.getLayer(unclusteredLayerId)) {
+      currentMap.removeLayer(unclusteredLayerId)
+    }
+    if (currentMap.getSource(sourceId)) {
+      currentMap.removeSource(sourceId)
+    }
+  }
+
+  function ensureLayers() {
+    if (!map || !map.isStyleLoaded()) {
+      return
+    }
+
+    const configKey = `${clusterRadius}-${clusterMaxZoom}-${showUnclustered}`
+    if (configKey !== lastConfigKey) {
+      removeLayers(map)
+      lastConfigKey = configKey
+    }
+
+    addLayers(map)
+  }
+
+  onMount(() => {
+    map = ctx.map
+    if (!map) {
+      return
+    }
+
+    updatePointsLookup()
+    attachClusterStateEvents(map)
+
+    const handleStyleLoad = () => {
+      lastConfigKey = ''
+      lastUnclusteredKey = '__initial__'
+      setClusterLoading(true)
+      ensureLayers()
+      updateSourceData()
+      scheduleUnclusteredUpdate()
+    }
+
+    const handleStyleData = () => {
+      if (!map || !map.isStyleLoaded()) {
+        return
+      }
+      if (!map.getSource(sourceId)) {
+        handleStyleLoad()
+      }
+    }
+
+    map.on('style.load', handleStyleLoad)
+    map.on('styledata', handleStyleData)
+
+    if (map.isStyleLoaded()) {
+      handleStyleLoad()
+    }
+
+    return () => {
+      map?.off('style.load', handleStyleLoad)
+      map?.off('styledata', handleStyleData)
+      detachClusterStateEvents?.()
+      detachClusterStateEvents = null
+      if (map) {
+        removeLayers(map)
+      }
+      map = null
+    }
+  })
+
+  // Explicitly read points to track as dependency
+  const pointsArray = $derived(points)
+
+  $effect(() => {
+    // Access pointsArray to ensure dependency tracking
+    void pointsArray
+    if (!map || !ctx.loaded) {
+      return
+    }
+
+    updatePointsLookup()
+    ensureLayers()
+    updateSourceData()
+    scheduleUnclusteredUpdate()
+  })
+</script>

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

@@ -0,0 +1,29 @@
+export interface ClusterPoint {
+    /** Unique identifier */
+    id: string | number;
+    /** Position [lng, lat] */
+    lngLat: [number, number];
+    /** Additional properties */
+    properties?: Record<string, unknown>;
+}
+export interface ClusterLayerProps {
+    /** Array of points to cluster */
+    points: ClusterPoint[];
+    /** Click callback for individual points */
+    onclick?: (point: ClusterPoint) => void;
+    /** Click callback for clusters */
+    onclusterclick?: (clusterId: number, zoom: number) => void;
+    /** Cluster radius in pixels */
+    clusterRadius?: number;
+    /** Max zoom to cluster at */
+    clusterMaxZoom?: number;
+    /** Whether to render unclustered points */
+    showUnclustered?: boolean;
+    /** Callback with unclustered point ids */
+    onunclusteredchange?: (ids: Set<string>) => void;
+    /** Callback when cluster source is loading */
+    onclusterloadingchange?: (loading: boolean) => void;
+}
+declare const ClusterLayer: import("svelte").Component<ClusterLayerProps, {}, "">;
+type ClusterLayer = ReturnType<typeof ClusterLayer>;
+export default ClusterLayer;

package/dist/components/DetailsPanel.svelte

@@ -0,0 +1,180 @@
+<script lang='ts' module>
+  import type { Snippet } from 'svelte'
+
+  export interface DetailsPanelProps {
+    /** Whether panel is visible */
+    open?: boolean
+    /** Close callback */
+    onclose?: () => void
+    /** Additional CSS classes */
+    class?: string
+    /** Accessible label */
+    ariaLabel?: string
+    /** Height mode - 'fit' for content height, 'full' for nearly full height */
+    height?: 'fit' | 'full'
+    /** Children */
+    children?: Snippet
+  }
+</script>
+
+<script lang='ts'>
+  import { onMount } from 'svelte'
+
+  const {
+    open = false,
+    onclose,
+    class: className = '',
+    ariaLabel = 'Details panel',
+    height = 'full',
+    children,
+  }: DetailsPanelProps = $props()
+
+  let isMobile = $state(false)
+
+  onMount(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const media = window.matchMedia('(max-width: 640px)')
+    const update = () => {
+      isMobile = media.matches
+    }
+
+    update()
+    media.addEventListener('change', update)
+
+    return () => {
+      media.removeEventListener('change', update)
+    }
+  })
+
+  // Keyboard escape to close
+  $effect(() => {
+    if (typeof window === 'undefined' || !open) {
+      return
+    }
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onclose?.()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeydown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeydown)
+    }
+  })
+</script>
+
+{#if open}
+  <div
+    class='shadcn-details-panel {className}'
+    data-device={isMobile ? 'mobile' : 'desktop'}
+    data-height={height}
+    role='complementary'
+    aria-label={ariaLabel}
+  >
+    <button
+      type='button'
+      class='shadcn-details-close'
+      aria-label='Close panel'
+      onclick={() => onclose?.()}
+    >
+      <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
+        <path d='M18 6 6 18' /><path d='m6 6 12 12' />
+      </svg>
+    </button>
+
+    <div class='shadcn-details-content'>
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .shadcn-details-panel {
+    position: absolute;
+    background: oklch(var(--card));
+    color: oklch(var(--card-foreground));
+    border: 1px solid oklch(var(--border));
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
+    pointer-events: auto;
+  }
+
+  /* Desktop: Left side floating panel */
+  .shadcn-details-panel[data-device='desktop'] {
+    top: 12px;
+    left: 12px;
+    width: min(90vw, 360px);
+  }
+
+  .shadcn-details-panel[data-device='desktop'][data-height='full'] {
+    bottom: 52px;
+    max-height: calc(100% - 64px);
+  }
+
+  .shadcn-details-panel[data-device='desktop'][data-height='fit'] {
+    bottom: auto;
+    max-height: calc(100% - 64px);
+  }
+
+  /* Mobile: Bottom floating card */
+  .shadcn-details-panel[data-device='mobile'] {
+    left: 12px;
+    right: 12px;
+    bottom: 52px;
+  }
+
+  .shadcn-details-panel[data-device='mobile'][data-height='full'] {
+    max-height: 45vh;
+  }
+
+  .shadcn-details-panel[data-device='mobile'][data-height='fit'] {
+    max-height: 60vh;
+    height: auto;
+  }
+
+  .shadcn-details-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: oklch(var(--muted));
+    color: oklch(var(--muted-foreground));
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s, color 0.15s;
+    z-index: 1;
+  }
+
+  .shadcn-details-close:hover {
+    background: oklch(var(--accent));
+    color: oklch(var(--accent-foreground));
+  }
+
+  .shadcn-details-close:focus-visible {
+    outline: 2px solid oklch(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .shadcn-details-content {
+    padding: 20px;
+    padding-top: 16px;
+    overflow: auto;
+    height: 100%;
+  }
+</style>