Atribución cartográfica.

<footer class="ui-sample ui-map" data-map-attribution="true">Fuente: <a href="https://www.ide.cl">IDE Chile</a> · <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> · ODbL</footer>

<footer class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center justify-between gap-3" data-map-attribution="true">Fuente: <a class="underline underline-offset-4" href="https://www.ide.cl">IDE Chile</a> · <a class="underline underline-offset-4" href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> · ODbL</footer>

import type { ReactNode } from "react";

export interface MapAttributionSource {
  /** Nombre de la fuente tal como exige su licencia («OpenStreetMap contributors»). */
  label: string;
  /** Página de la fuente o de su licencia; sin ella el nombre va como texto. */
  href?: string;
}

export interface MapAttributionProps {
  /** Rótulo que antecede a las fuentes («Fuente:»); vacío lo omite. */
  prefix?: string;
  /** Fuentes de datos y teselas, en el orden en que se citan; se separan con « · ». */
  sources?: MapAttributionSource[];
  /** Licencia de los datos al final de la línea («ODbL», «CC BY 4.0»); vacío la omite. */
  license?: string;
  className?: string;
}

const FUENTES: MapAttributionSource[] = [
  { label: "IDE Chile", href: "https://www.ide.cl" },
  { label: "OpenStreetMap contributors", href: "https://www.openstreetmap.org/copyright" },
];

/**
 * Línea de atribución de un mapa con las fuentes enlazadas y la licencia; va bajo cada mapa que usa datos o teselas de terceros.
 *
 * Cita cada fuente con el nombre que pide su licencia. Si no quedan fuentes ni licencia, no se emite nada.
 *
 * @example <MapAttribution sources={[{ label: "CEAD, Subsecretaría de Prevención del Delito", href: "https://cead.spd.gob.cl" }, { label: "INE", href: "https://www.ine.gob.cl" }, { label: "OpenStreetMap contributors", href: "https://www.openstreetmap.org/copyright" }]} license="ODbL" />
 */
export function MapAttribution({
  prefix = "Fuente:",
  sources = FUENTES,
  license = "ODbL",
  className,
}: MapAttributionProps) {
  const partes: ReactNode[] = sources.map((fuente, i) => (fuente.href ? <a key={i} href={fuente.href}>{fuente.label}</a> : fuente.label));
  if (license) partes.push(license);
  if (!partes.length) return null;
  const linea: ReactNode[] = [];
  partes.forEach((parte, i) => {
    if (i) linea.push(" · ");
    linea.push(parte);
  });
  return (
    <footer className={["ui-map", className].filter(Boolean).join(" ")} data-map-attribution>
      {prefix ? `${prefix} ` : null}
      {linea}
    </footer>
  );
}