@loidolt/theme-maps 0.7.0

package/dist/components/MapMarker.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import type { Marker as MapLibreMarker } from 'maplibre-gl';
+  import { Marker, cx } from '@loidolt/theme-svelte';
+  import type { LngLat } from '../core/types.js';
+  import { requireMapContext } from '../internal/context.js';
+  import { safely } from '../internal/safely.js';
+  import MapPopup from './MapPopup.svelte';
+
+  interface Props {
+    /** Where the marker stands. */
+    lngLat: LngLat;
+    /** Names the marker — its button's accessible name. */
+    label: string;
+    /** A number printed in the marker, e.g. a stop's order. */
+    number?: number;
+    /** `pin` points at its spot from above; `dot` sits centred on it. */
+    shape?: 'pin' | 'dot';
+    /** Draws the marker in its selected state. */
+    active?: boolean;
+    /** Let the marker be dragged to a new spot (pointer only). */
+    draggable?: boolean;
+    /** The marker was pressed — by pointer, Enter or Space. */
+    onSelect?: () => void;
+    /** A drag ended, at this spot. */
+    onDragEnd?: (lngLat: LngLat) => void;
+    /** Content for a popup the marker opens when pressed. Focus moves in, and back on close. */
+    popup?: Snippet;
+    /** Names the popup. Defaults to `label`. */
+    popupLabel?: string;
+    /** Whether the popup is showing. Bindable. */
+    popupOpen?: boolean;
+    /** Custom marker content in place of the loidolt pin. */
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    lngLat,
+    label,
+    number,
+    shape = 'pin',
+    active = false,
+    draggable = false,
+    onSelect,
+    onDragEnd,
+    popup,
+    popupLabel,
+    popupOpen = $bindable(false),
+    children,
+    class: className,
+  }: Props = $props();
+
+  const context = requireMapContext('MapMarker');
+  let element = $state<HTMLElement | null>(null);
+  // Something to do makes it a button; otherwise it is a named picture, not a dead tab stop.
+  const interactive = $derived(Boolean(popup || onSelect || draggable));
+  let marker = $state.raw<MapLibreMarker | null>(null);
+
+  $effect(() => {
+    const target = context.map;
+    const lib = context.lib;
+    const node = element;
+    if (!target || !lib || !node) return;
+    // The pin's point is its bottom-left corner; a dot is centred on its spot.
+    const created = new lib.Marker({
+      element: node,
+      anchor: untrack(() => (shape === 'pin' ? 'bottom-left' : 'center')),
+      draggable: untrack(() => draggable),
+    })
+      .setLngLat(untrack(() => lngLat))
+      .addTo(target);
+    created.on('dragend', () => {
+      const { lng, lat } = created.getLngLat();
+      onDragEnd?.([lng, lat]);
+    });
+    marker = created;
+    return () => {
+      marker = null;
+      safely(() => created.remove());
+    };
+  });
+
+  $effect(() => {
+    marker?.setLngLat(lngLat);
+  });
+  $effect(() => {
+    marker?.setDraggable(draggable);
+  });
+</script>
+
+<div hidden>
+  {#if interactive}
+    <button
+      bind:this={element}
+      type="button"
+      class={cx('ldt-map-marker', className)}
+      aria-label={label}
+      aria-haspopup={popup ? 'dialog' : undefined}
+      aria-expanded={popup ? popupOpen : undefined}
+      onclick={(event) => {
+        // The map must not also take this as a click on the map, which closes popups.
+        event.stopPropagation();
+        if (popup) popupOpen = !popupOpen;
+        onSelect?.();
+      }}
+    >
+      {@render face()}
+    </button>
+  {:else}
+    <span bind:this={element} class={cx('ldt-map-marker', className)} role="img" aria-label={label}>
+      {@render face()}
+    </span>
+  {/if}
+</div>
+
+{#snippet face()}
+  {#if children}{@render children()}{:else}<Marker {shape} {number} {active} />{/if}
+{/snippet}
+
+{#if popup}
+  <MapPopup
+    {lngLat}
+    label={popupLabel ?? label}
+    bind:open={popupOpen}
+    offset={shape === 'pin' ? 28 : 14}
+  >
+    {@render popup()}
+  </MapPopup>
+{/if}

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

@@ -0,0 +1,32 @@
+import { type Snippet } from 'svelte';
+import type { LngLat } from '../core/types.js';
+interface Props {
+    /** Where the marker stands. */
+    lngLat: LngLat;
+    /** Names the marker — its button's accessible name. */
+    label: string;
+    /** A number printed in the marker, e.g. a stop's order. */
+    number?: number;
+    /** `pin` points at its spot from above; `dot` sits centred on it. */
+    shape?: 'pin' | 'dot';
+    /** Draws the marker in its selected state. */
+    active?: boolean;
+    /** Let the marker be dragged to a new spot (pointer only). */
+    draggable?: boolean;
+    /** The marker was pressed — by pointer, Enter or Space. */
+    onSelect?: () => void;
+    /** A drag ended, at this spot. */
+    onDragEnd?: (lngLat: LngLat) => void;
+    /** Content for a popup the marker opens when pressed. Focus moves in, and back on close. */
+    popup?: Snippet;
+    /** Names the popup. Defaults to `label`. */
+    popupLabel?: string;
+    /** Whether the popup is showing. Bindable. */
+    popupOpen?: boolean;
+    /** Custom marker content in place of the loidolt pin. */
+    children?: Snippet;
+    class?: string;
+}
+declare const MapMarker: import("svelte").Component<Props, {}, "popupOpen">;
+type MapMarker = ReturnType<typeof MapMarker>;
+export default MapMarker;

package/dist/components/MapPopup.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import type { Popup } from 'maplibre-gl';
+  import { IconButton, cx } from '@loidolt/theme-svelte';
+  import type { LngLat } from '../core/types.js';
+  import { requireMapContext } from '../internal/context.js';
+  import { safely } from '../internal/safely.js';
+
+  interface Props {
+    /** Where the popup points. */
+    lngLat: LngLat;
+    /** Bindable. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Names the popup for assistive tech, e.g. the place it describes. */
+    label: string;
+    closeLabel?: string;
+    /** Close when the map itself is clicked. */
+    closeOnClick?: boolean;
+    /** Distance from `lngLat`, in pixels. */
+    offset?: number;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    lngLat,
+    open = $bindable(false),
+    onOpenChange,
+    label,
+    closeLabel = 'Close',
+    closeOnClick = true,
+    offset = 12,
+    children,
+    class: className,
+  }: Props = $props();
+
+  const context = requireMapContext('MapPopup');
+  let content = $state<HTMLDivElement | null>(null);
+  let popup = $state.raw<Popup | null>(null);
+  let returnTo: HTMLElement | null = null;
+
+  const setOpen = (next: boolean) => {
+    if (open === next) return;
+    open = next;
+    onOpenChange?.(next);
+  };
+
+  /** Focus goes back where it came from — unless the user has already moved it elsewhere. */
+  const restoreFocus = () => {
+    const active = document.activeElement;
+    const inside = !active || active === document.body || content?.contains(active);
+    if (inside && returnTo?.isConnected) returnTo.focus();
+    returnTo = null;
+  };
+
+  $effect(() => {
+    const target = context.map;
+    const lib = context.lib;
+    const element = content;
+    if (!target || !lib || !element) return;
+    const created = new lib.Popup({
+      closeButton: false,
+      closeOnClick: untrack(() => closeOnClick),
+      focusAfterOpen: false,
+      maxWidth: 'none',
+      offset: untrack(() => offset),
+      className: 'ldt-map-popup',
+    }).setDOMContent(element);
+    created.on('close', () => {
+      setOpen(false);
+      restoreFocus();
+    });
+    popup = created;
+    return () => {
+      popup = null;
+      safely(() => created.remove());
+    };
+  });
+
+  $effect(() => {
+    const target = context.map;
+    const current = popup;
+    if (!target || !current) return;
+    current.setLngLat(lngLat);
+    if (open && !current.isOpen()) {
+      returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      current.addTo(target);
+      // Non-modal: focus moves in so its content is read and reachable, and Escape or the
+      // close button brings it back.
+      queueMicrotask(() => content?.focus());
+    } else if (!open && current.isOpen()) {
+      current.remove();
+    }
+  });
+</script>
+
+<div hidden>
+  <div
+    bind:this={content}
+    class={cx('ldt-map-popup__content', className)}
+    role="dialog"
+    aria-label={label}
+    tabindex="-1"
+    onkeydown={(event) => {
+      if (event.key !== 'Escape') return;
+      event.stopPropagation();
+      setOpen(false);
+    }}
+  >
+    <div class="ldt-map-popup__body">{@render children?.()}</div>
+    <IconButton
+      label={closeLabel}
+      size="sm"
+      class="ldt-map-popup__close"
+      onclick={() => setOpen(false)}
+    >
+      <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false"
+        ><path d="m2 2 6 6M8 2 2 8" stroke="currentColor" stroke-width="1.4" /></svg
+      >
+    </IconButton>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { LngLat } from '../core/types.js';
+interface Props {
+    /** Where the popup points. */
+    lngLat: LngLat;
+    /** Bindable. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Names the popup for assistive tech, e.g. the place it describes. */
+    label: string;
+    closeLabel?: string;
+    /** Close when the map itself is clicked. */
+    closeOnClick?: boolean;
+    /** Distance from `lngLat`, in pixels. */
+    offset?: number;
+    children?: Snippet;
+    class?: string;
+}
+declare const MapPopup: import("svelte").Component<Props, {}, "open">;
+type MapPopup = ReturnType<typeof MapPopup>;
+export default MapPopup;

package/dist/components/MapSource.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { untrack, type Snippet } from 'svelte';
+  import type { GeoJSONSource } from 'maplibre-gl';
+  import type { GeoJSON } from '../core/types.js';
+  import { requireMapContext, setSourceContext } from '../internal/context.js';
+  import { safely } from '../internal/safely.js';
+
+  interface ClusterOptions {
+    /** Pixel radius points gather within. */
+    radius?: number;
+    /** The zoom at which clusters stop forming. */
+    maxZoom?: number;
+    /** The fewest points that make a cluster. */
+    minPoints?: number;
+    /** Aggregates kept on each cluster, as MapLibre `clusterProperties`. */
+    properties?: Record<string, unknown>;
+  }
+
+  interface Props {
+    /** Unique on the map; layers name it as their `source`. */
+    id: string;
+    /** GeoJSON, or a URL to fetch it from. Replace the object to update the map. */
+    data?: GeoJSON | string;
+    /** Any other MapLibre source — vector or raster tiles, an image — as its specification. */
+    spec?: Record<string, unknown>;
+    /** Gather nearby points into clusters. */
+    cluster?: boolean | ClusterOptions;
+    /** A feature property to use as its id, for hover state and `LayerManager`. */
+    promoteId?: string;
+    /** Credit shown in the attribution control. */
+    attribution?: string;
+    /** Layers drawn from this source. They pick up its id without naming it. */
+    children?: Snippet;
+  }
+
+  let { id, data, spec, cluster = false, promoteId, attribution, children }: Props = $props();
+
+  const context = requireMapContext('MapSource');
+  let ready = $state(false);
+  let applied: unknown = undefined;
+
+  setSourceContext({
+    get id() {
+      return id;
+    },
+    get ready() {
+      return ready;
+    },
+  });
+
+  function specification(): Record<string, unknown> {
+    if (spec) return { ...spec, ...(attribution ? { attribution } : {}) };
+    const options = typeof cluster === 'object' ? cluster : {};
+    return {
+      type: 'geojson',
+      data: data ?? { type: 'FeatureCollection', features: [] },
+      ...(cluster
+        ? {
+            cluster: true,
+            clusterRadius: options.radius ?? 50,
+            clusterMaxZoom: options.maxZoom ?? 14,
+            clusterMinPoints: options.minPoints ?? 2,
+            ...(options.properties ? { clusterProperties: options.properties } : {}),
+          }
+        : {}),
+      ...(promoteId ? { promoteId } : {}),
+      ...(attribution ? { attribution } : {}),
+    };
+  }
+
+  // Added once per style: a basemap swap drops every source, and `styleVersion` says so.
+  $effect(() => {
+    const target = context.map;
+    const sourceId = id;
+    void context.styleVersion;
+    if (!target || !context.loaded) return;
+    untrack(() => {
+      if (!target.getSource(sourceId)) target.addSource(sourceId, specification() as never);
+      applied = data;
+    });
+    ready = true;
+    // A style swap re-runs this after dropping the source, and layers waiting on it pick it up
+    // as soon as it is back; only unmounting (below) takes `ready` away.
+    return () => {
+      safely(() => {
+        // Layers go first: MapLibre refuses to remove a source that is still drawn from.
+        for (const layer of target.getStyle()?.layers ?? []) {
+          if ('source' in layer && layer.source === sourceId) target.removeLayer(layer.id);
+        }
+        if (target.getSource(sourceId)) target.removeSource(sourceId);
+      });
+    };
+  });
+
+  $effect(() => () => {
+    ready = false;
+  });
+
+  // New data replaces the old in place; the layers drawing it are untouched.
+  $effect(() => {
+    const next = data;
+    if (!ready || next === applied || next === undefined) return;
+    applied = next;
+    const source = context.map?.getSource(id) as GeoJSONSource | undefined;
+    source?.setData?.(next as never);
+  });
+</script>
+
+{#if ready}{@render children?.()}{/if}

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

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { GeoJSON } from '../core/types.js';
+interface ClusterOptions {
+    /** Pixel radius points gather within. */
+    radius?: number;
+    /** The zoom at which clusters stop forming. */
+    maxZoom?: number;
+    /** The fewest points that make a cluster. */
+    minPoints?: number;
+    /** Aggregates kept on each cluster, as MapLibre `clusterProperties`. */
+    properties?: Record<string, unknown>;
+}
+interface Props {
+    /** Unique on the map; layers name it as their `source`. */
+    id: string;
+    /** GeoJSON, or a URL to fetch it from. Replace the object to update the map. */
+    data?: GeoJSON | string;
+    /** Any other MapLibre source — vector or raster tiles, an image — as its specification. */
+    spec?: Record<string, unknown>;
+    /** Gather nearby points into clusters. */
+    cluster?: boolean | ClusterOptions;
+    /** A feature property to use as its id, for hover state and `LayerManager`. */
+    promoteId?: string;
+    /** Credit shown in the attribution control. */
+    attribution?: string;
+    /** Layers drawn from this source. They pick up its id without naming it. */
+    children?: Snippet;
+}
+declare const MapSource: import("svelte").Component<Props, {}, "">;
+type MapSource = ReturnType<typeof MapSource>;
+export default MapSource;