@loidolt/theme-maps 0.7.0

package/dist/components/LayerManager.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  import { tick, untrack } from 'svelte';
+  import {
+    IconButton,
+    LiveRegion,
+    Slider,
+    Switch,
+    createAnnouncer,
+    cx,
+  } from '@loidolt/theme-svelte';
+  import type { LayerState } from '../core/types.js';
+  import { requireMapContext, type LayerEntry } from '../internal/context.js';
+  import MapControl from './MapControl.svelte';
+
+  type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  interface Props {
+    /** The layers to offer, by id. Defaults to every layer placed with a layer component. */
+    layers?: string[];
+    title?: string;
+    position?: Corner;
+    /** Offer an opacity slider per layer. */
+    showOpacity?: boolean;
+    /** Offer moving layers up and down (Alt + ↑ and ↓ on a row, too). */
+    allowReorder?: boolean;
+    /** Show the list. Bindable, and toggled by the heading. */
+    open?: boolean;
+    /** Every change: visibility, opacity or order. Top of the list first. */
+    onChange?: (layers: LayerState[]) => void;
+    opacityLabel?: (label: string) => string;
+    moveUpLabel?: (label: string) => string;
+    moveDownLabel?: (label: string) => string;
+    movedMessage?: (label: string, position: number, total: number) => string;
+    class?: string;
+  }
+
+  let {
+    layers: only,
+    title = 'Layers',
+    position = 'top-right',
+    showOpacity = true,
+    allowReorder = true,
+    open = $bindable(true),
+    onChange,
+    opacityLabel = (label) => `${label} opacity`,
+    moveUpLabel = (label) => `Move ${label} up`,
+    moveDownLabel = (label) => `Move ${label} down`,
+    movedMessage = (label, place, total) => `${label} moved to position ${place} of ${total}.`,
+    class: className,
+  }: Props = $props();
+
+  const context = requireMapContext('LayerManager');
+  const announcer = createAnnouncer();
+  const id = $props.id();
+  let list = $state<HTMLUListElement | null>(null);
+  let orderVersion = $state(0);
+  let states = $state<Record<string, { visible: boolean; opacity: number }>>({});
+
+  const OPACITY: Record<string, string[]> = {
+    fill: ['fill-opacity'],
+    line: ['line-opacity'],
+    circle: ['circle-opacity', 'circle-stroke-opacity'],
+    symbol: ['text-opacity', 'icon-opacity'],
+    'fill-extrusion': ['fill-extrusion-opacity'],
+    heatmap: ['heatmap-opacity'],
+    raster: ['raster-opacity'],
+    background: ['background-opacity'],
+  };
+
+  /** Managed layers in draw order, topmost first — the order the list shows. */
+  const rows = $derived.by((): LayerEntry[] => {
+    void orderVersion;
+    void context.styleVersion;
+    const map = context.map;
+    const entries = context.layers.filter((entry) => !only || only.includes(entry.id));
+    if (!map) return entries;
+    const drawn = (map.getStyle()?.layers ?? []).map((layer) => layer.id);
+    return entries
+      .filter((entry) => drawn.includes(entry.id))
+      .sort((a, b) => drawn.indexOf(b.id) - drawn.indexOf(a.id));
+  });
+
+  // Read each layer's current state off the map as it arrives.
+  $effect(() => {
+    const map = context.map;
+    const current = rows;
+    if (!map) return;
+    untrack(() => {
+      for (const entry of current) {
+        if (states[entry.id]) continue;
+        const property = OPACITY[entry.type]?.[0];
+        const opacity = property ? map.getPaintProperty(entry.id, property as never) : undefined;
+        states[entry.id] = {
+          visible: map.getLayoutProperty(entry.id, 'visibility') !== 'none',
+          opacity: typeof opacity === 'number' ? opacity : 1,
+        };
+      }
+    });
+  });
+
+  const snapshot = (): LayerState[] =>
+    rows.map((entry) => ({
+      id: entry.id,
+      label: entry.label,
+      visible: states[entry.id]?.visible ?? true,
+      opacity: states[entry.id]?.opacity ?? 1,
+    }));
+
+  function setVisible(entry: LayerEntry, visible: boolean) {
+    context.map?.setLayoutProperty(entry.id, 'visibility', visible ? 'visible' : 'none');
+    states[entry.id] = { ...states[entry.id], visible };
+    onChange?.(snapshot());
+  }
+
+  function setOpacity(entry: LayerEntry, opacity: number) {
+    for (const property of OPACITY[entry.type] ?? []) {
+      context.map?.setPaintProperty(entry.id, property as never, opacity as never);
+    }
+    states[entry.id] = { ...states[entry.id], opacity };
+    onChange?.(snapshot());
+  }
+
+  /** Moves a layer one place up (drawn above its neighbour) or down, keeping focus with it. */
+  async function move(entry: LayerEntry, direction: 'up' | 'down') {
+    const map = context.map;
+    const index = rows.indexOf(entry);
+    const neighbour = rows[direction === 'up' ? index - 1 : index + 1];
+    if (!map || !neighbour) return;
+    if (direction === 'down') {
+      map.moveLayer(entry.id, neighbour.id);
+    } else {
+      // Above the neighbour means before whatever is drawn right after it, or on top.
+      const drawn = (map.getStyle()?.layers ?? []).map((layer) => layer.id);
+      map.moveLayer(entry.id, drawn[drawn.indexOf(neighbour.id) + 1]);
+    }
+    orderVersion += 1;
+    const place = rows.indexOf(entry) + 1;
+    announcer.announce(movedMessage(entry.label, place, rows.length));
+    onChange?.(snapshot());
+    // Reordering moves the row's DOM, which drops focus; put it back on the same control.
+    await tick();
+    const row = list?.querySelector<HTMLElement>(`[data-layer="${CSS.escape(entry.id)}"]`);
+    const preferred = row?.querySelector<HTMLButtonElement>(
+      `[data-move="${direction}"]:not(:disabled)`
+    );
+    (preferred ?? row?.querySelector<HTMLButtonElement>('[data-move]:not(:disabled)'))?.focus();
+  }
+
+  function onRowKeydown(event: KeyboardEvent, entry: LayerEntry) {
+    if (!allowReorder || !event.altKey) return;
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    void move(entry, event.key === 'ArrowUp' ? 'up' : 'down');
+  }
+</script>
+
+<MapControl {position} class={cx('ldt-layer-manager', className)}>
+  <section aria-labelledby={`${id}-title`}>
+    <h3 class="ldt-layer-manager__title" id={`${id}-title`}>
+      <button
+        type="button"
+        class="ldt-layer-manager__toggle"
+        aria-expanded={open}
+        aria-controls={`${id}-list`}
+        onclick={() => (open = !open)}>{title}</button
+      >
+    </h3>
+    <ul bind:this={list} class="ldt-layer-manager__list" id={`${id}-list`} hidden={!open}>
+      {#each rows as entry, index (entry.id)}
+        {@const state = states[entry.id] ?? { visible: true, opacity: 1 }}
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+        <li
+          class="ldt-layer-manager__row"
+          data-layer={entry.id}
+          onkeydown={(event) => onRowKeydown(event, entry)}
+        >
+          <Switch checked={state.visible} onCheckedChange={(visible) => setVisible(entry, visible)}
+            >{entry.label}</Switch
+          >
+          {#if allowReorder}
+            <span class="ldt-layer-manager__move">
+              <IconButton
+                size="sm"
+                label={moveUpLabel(entry.label)}
+                data-move="up"
+                disabled={index === 0}
+                onclick={() => move(entry, 'up')}
+              >
+                <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false"
+                  ><path
+                    d="M5 8V2M2 5l3-3 3 3"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                  /></svg
+                >
+              </IconButton>
+              <IconButton
+                size="sm"
+                label={moveDownLabel(entry.label)}
+                data-move="down"
+                disabled={index === rows.length - 1}
+                onclick={() => move(entry, 'down')}
+              >
+                <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" focusable="false"
+                  ><path
+                    d="M5 2v6M2 5l3 3 3-3"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                  /></svg
+                >
+              </IconButton>
+            </span>
+          {/if}
+          {#if showOpacity && OPACITY[entry.type]}
+            <Slider
+              class="ldt-layer-manager__opacity"
+              label={opacityLabel(entry.label)}
+              min={0}
+              max={1}
+              step={0.05}
+              value={state.opacity}
+              disabled={!state.visible}
+              formatValue={(value) => `${Math.round(value * 100)}%`}
+              onValueChange={(value) => setOpacity(entry, value as number)}
+            />
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    <LiveRegion message={announcer.message} politeness={announcer.politeness} />
+  </section>
+</MapControl>

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

@@ -0,0 +1,24 @@
+import type { LayerState } from '../core/types.js';
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props {
+    /** The layers to offer, by id. Defaults to every layer placed with a layer component. */
+    layers?: string[];
+    title?: string;
+    position?: Corner;
+    /** Offer an opacity slider per layer. */
+    showOpacity?: boolean;
+    /** Offer moving layers up and down (Alt + ↑ and ↓ on a row, too). */
+    allowReorder?: boolean;
+    /** Show the list. Bindable, and toggled by the heading. */
+    open?: boolean;
+    /** Every change: visibility, opacity or order. Top of the list first. */
+    onChange?: (layers: LayerState[]) => void;
+    opacityLabel?: (label: string) => string;
+    moveUpLabel?: (label: string) => string;
+    moveDownLabel?: (label: string) => string;
+    movedMessage?: (label: string, position: number, total: number) => string;
+    class?: string;
+}
+declare const LayerManager: import("svelte").Component<Props, {}, "open">;
+type LayerManager = ReturnType<typeof LayerManager>;
+export default LayerManager;

package/dist/components/LineLayer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { MapColors } from '@loidolt/theme-tokens';
+  import { useLayer, type LayerProps } from '../internal/use-layer.svelte.js';
+
+  /* Lines — routes, boundaries, outlines. Defaults to the accent colour. */
+  type Props = LayerProps;
+
+  let props: Props = $props();
+
+  useLayer(
+    'line',
+    () => props,
+    (colors: MapColors) => ({
+      paint: { 'line-color': colors.accent, 'line-width': 2.5 },
+      layout: { 'line-cap': 'round', 'line-join': 'round' },
+    })
+  );
+</script>

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

@@ -0,0 +1,4 @@
+import { type LayerProps } from '../internal/use-layer.svelte.js';
+declare const LineLayer: import("svelte").Component<LayerProps, {}, "">;
+type LineLayer = ReturnType<typeof LineLayer>;
+export default LineLayer;

package/dist/components/MapControl.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { IControl } from 'maplibre-gl';
+  import { cx } from '@loidolt/theme-svelte';
+  import { requireMapContext } from '../internal/context.js';
+  import { safely } from '../internal/safely.js';
+
+  type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The corner it sits in, stacked with MapLibre's own controls there. */
+    position?: Corner;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    position = 'top-left',
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const context = requireMapContext('MapControl');
+
+  $effect(() => {
+    const target = context.map;
+    const node = ref;
+    const corner = position;
+    if (!target || !node) return;
+    const control: IControl = {
+      onAdd: () => node,
+      onRemove: () => node.remove(),
+    };
+    target.addControl(control, corner);
+    return () => safely(() => target.removeControl(control));
+  });
+</script>
+
+<div hidden>
+  <div bind:this={ref} class={cx('maplibregl-ctrl ldt-map-control', className)} {...rest}>
+    {@render children?.()}
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The corner it sits in, stacked with MapLibre's own controls there. */
+    position?: Corner;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const MapControl: import("svelte").Component<Props, {}, "ref">;
+type MapControl = ReturnType<typeof MapControl>;
+export default MapControl;

package/dist/components/MapFeatureList.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Map as MapLibreMap } from 'maplibre-gl';
+  import { cx } from '@loidolt/theme-svelte';
+  import type { MapFeatureItem } from '../core/types.js';
+  import { getMapContext } from '../internal/context.js';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** The places on the map, in reading order. */
+    items: MapFeatureItem[];
+    /** Names the list, e.g. "Stops on this route". */
+    label: string;
+    /** The map to move. Found automatically inside a `MapView`; pass it when the list sits beside one. */
+    map?: MapLibreMap | null;
+    /** Zoom level to fly to. */
+    zoom?: number;
+    /** The chosen item, highlighted. Bindable. */
+    selected?: string | number | null;
+    onSelect?: (item: MapFeatureItem) => void;
+    class?: string;
+  }
+
+  let {
+    items,
+    label,
+    map = null,
+    zoom = 14,
+    selected = $bindable(null),
+    onSelect,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const context = getMapContext();
+  const reducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+  function choose(item: MapFeatureItem) {
+    selected = item.id;
+    const target = map ?? context?.map;
+    const move = { center: item.lngLat, zoom: Math.max(zoom, target?.getZoom() ?? 0) };
+    if (context?.reducedMotion ?? reducedMotion) target?.jumpTo(move);
+    else target?.flyTo(move);
+    onSelect?.(item);
+  }
+</script>
+
+<!-- Every place on the map, as a list: the non-visual way to find and go to one. -->
+<nav class={cx('ldt-map-features', className)} aria-label={label} {...rest}>
+  <ul class="ldt-map-features__list">
+    {#each items as item (item.id)}
+      <li>
+        <button
+          type="button"
+          class="ldt-map-features__item"
+          aria-current={selected === item.id ? 'true' : undefined}
+          onclick={() => choose(item)}
+        >
+          <span class="ldt-map-features__label">{item.label}</span>
+          {#if item.description}<span class="ldt-map-features__description">{item.description}</span
+            >{/if}
+        </button>
+      </li>
+    {/each}
+  </ul>
+</nav>

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Map as MapLibreMap } from 'maplibre-gl';
+import type { MapFeatureItem } from '../core/types.js';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The places on the map, in reading order. */
+    items: MapFeatureItem[];
+    /** Names the list, e.g. "Stops on this route". */
+    label: string;
+    /** The map to move. Found automatically inside a `MapView`; pass it when the list sits beside one. */
+    map?: MapLibreMap | null;
+    /** Zoom level to fly to. */
+    zoom?: number;
+    /** The chosen item, highlighted. Bindable. */
+    selected?: string | number | null;
+    onSelect?: (item: MapFeatureItem) => void;
+    class?: string;
+}
+declare const MapFeatureList: import("svelte").Component<Props, {}, "selected">;
+type MapFeatureList = ReturnType<typeof MapFeatureList>;
+export default MapFeatureList;

package/dist/components/MapLegend.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '@loidolt/theme-svelte';
+  import type { LegendGradient, LegendItem } from '../core/types.js';
+  import { getMapContext } from '../internal/context.js';
+  import MapControl from './MapControl.svelte';
+
+  type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    title: string;
+    /** Categories, each with its colour. */
+    items?: LegendItem[];
+    /** A continuous scale instead: its colours from least to most, and the two end labels. */
+    gradient?: LegendGradient;
+    /**
+     * Where it sits. Inside a `MapView` it becomes a map control in this corner; outside one it
+     * renders in the page flow, beside the map.
+     */
+    position?: Corner;
+    class?: string;
+  }
+
+  let {
+    title,
+    items = [],
+    gradient,
+    position = 'bottom-left',
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const inMap = getMapContext() !== null;
+</script>
+
+{#snippet legend()}
+  <section class={cx('ldt-map-legend', className)} aria-label={title} {...rest}>
+    <h3 class="ldt-map-legend__title">{title}</h3>
+    {#if gradient}
+      <div
+        class="ldt-map-legend__ramp"
+        style:background-image={`linear-gradient(to right, ${gradient.colors.join(', ')})`}
+        aria-hidden="true"
+      ></div>
+      <p class="ldt-map-legend__ends"><span>{gradient.min}</span><span>{gradient.max}</span></p>
+    {/if}
+    {#if items.length}
+      <ul class="ldt-map-legend__items">
+        {#each items as item (item.label)}
+          <li class="ldt-map-legend__item">
+            <span
+              class={cx('ldt-map-legend__key', `ldt-map-legend__key--${item.shape ?? 'fill'}`)}
+              style:--ldt-legend-color={item.color}
+              aria-hidden="true"
+            ></span>
+            {item.label}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+{/snippet}
+
+{#if inMap}
+  <MapControl {position}>{@render legend()}</MapControl>
+{:else}
+  {@render legend()}
+{/if}

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LegendGradient, LegendItem } from '../core/types.js';
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props extends HTMLAttributes<HTMLElement> {
+    title: string;
+    /** Categories, each with its colour. */
+    items?: LegendItem[];
+    /** A continuous scale instead: its colours from least to most, and the two end labels. */
+    gradient?: LegendGradient;
+    /**
+     * Where it sits. Inside a `MapView` it becomes a map control in this corner; outside one it
+     * renders in the page flow, beside the map.
+     */
+    position?: Corner;
+    class?: string;
+}
+declare const MapLegend: import("svelte").Component<Props, {}, "">;
+type MapLegend = ReturnType<typeof MapLegend>;
+export default MapLegend;

package/dist/components/MapLegendGroup.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '@loidolt/theme-svelte';
+  import type { LegendGradient, LegendItem } from '../core/types.js';
+  import { getMapContext } from '../internal/context.js';
+  import MapControl from './MapControl.svelte';
+
+  type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Names the group, e.g. "Layers shown". */
+    title: string;
+    /** One collapsible legend per layer. */
+    legends: Array<{
+      title: string;
+      items?: LegendItem[];
+      gradient?: LegendGradient;
+      open?: boolean;
+    }>;
+    position?: Corner;
+    class?: string;
+  }
+
+  let { title, legends, position = 'bottom-left', class: className, ...rest }: Props = $props();
+
+  const inMap = getMapContext() !== null;
+</script>
+
+{#snippet group()}
+  <section
+    class={cx('ldt-map-legend ldt-map-legend--group', className)}
+    aria-label={title}
+    {...rest}
+  >
+    <h3 class="ldt-map-legend__title">{title}</h3>
+    {#each legends as legend (legend.title)}
+      <details class="ldt-map-legend__section" open={legend.open ?? true}>
+        <summary class="ldt-map-legend__summary">{legend.title}</summary>
+        {#if legend.gradient}
+          <div
+            class="ldt-map-legend__ramp"
+            style:background-image={`linear-gradient(to right, ${legend.gradient.colors.join(', ')})`}
+            aria-hidden="true"
+          ></div>
+          <p class="ldt-map-legend__ends">
+            <span>{legend.gradient.min}</span><span>{legend.gradient.max}</span>
+          </p>
+        {/if}
+        {#if legend.items?.length}
+          <ul class="ldt-map-legend__items">
+            {#each legend.items as item (item.label)}
+              <li class="ldt-map-legend__item">
+                <span
+                  class={cx('ldt-map-legend__key', `ldt-map-legend__key--${item.shape ?? 'fill'}`)}
+                  style:--ldt-legend-color={item.color}
+                  aria-hidden="true"
+                ></span>
+                {item.label}
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </details>
+    {/each}
+  </section>
+{/snippet}
+
+{#if inMap}
+  <MapControl {position}>{@render group()}</MapControl>
+{:else}
+  {@render group()}
+{/if}

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

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LegendGradient, LegendItem } from '../core/types.js';
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Names the group, e.g. "Layers shown". */
+    title: string;
+    /** One collapsible legend per layer. */
+    legends: Array<{
+        title: string;
+        items?: LegendItem[];
+        gradient?: LegendGradient;
+        open?: boolean;
+    }>;
+    position?: Corner;
+    class?: string;
+}
+declare const MapLegendGroup: import("svelte").Component<Props, {}, "">;
+type MapLegendGroup = ReturnType<typeof MapLegendGroup>;
+export default MapLegendGroup;