@riebeckite/plugin-map 0.0.6

package/dist/client.js

@@ -0,0 +1,164 @@
+// src/init.ts
+var DEFAULT_LEAFLET_SCRIPT_URL = "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js";
+var DEFAULT_LEAFLET_STYLE_URL = "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css";
+var DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+var DEFAULT_ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+var leafletPromise = null;
+async function initMap(options = {}) {
+  const figures = Array.from(
+    document.querySelectorAll('[data-rr-map="pending"]')
+  );
+  if (figures.length === 0) return;
+  const runtime = options.runtime ?? await loadLeaflet(options);
+  if (!runtime) {
+    for (const figure of figures) setError(figure);
+    return;
+  }
+  for (const figure of figures) {
+    renderMap(runtime, figure, options);
+  }
+}
+function renderMap(runtime, figure, options) {
+  const canvas = figure.querySelector("[data-rr-map-canvas]");
+  const payload = readPayload(figure);
+  if (!canvas || !payload) {
+    setError(figure);
+    return;
+  }
+  try {
+    canvas.style.display = "block";
+    const map = runtime.map(canvas, {
+      scrollWheelZoom: false,
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom
+    });
+    runtime.tileLayer(payload.tiles || options.tileUrl || DEFAULT_TILE_URL, {
+      attribution: payload.attribution || options.attribution || DEFAULT_ATTRIBUTION,
+      minZoom: options.minZoom,
+      maxZoom: options.maxZoom
+    }).addTo(map);
+    for (const marker of payload.markers) {
+      const layer = runtime.marker([marker.lat, marker.lng]);
+      const popup = formatPopup(marker);
+      if (popup && layer.bindPopup) layer.bindPopup(popup);
+      layer.addTo(map);
+    }
+    if (payload.markers.length > 1) {
+      map.fitBounds(
+        runtime.latLngBounds(
+          payload.markers.map((marker) => [
+            marker.lat,
+            marker.lng
+          ])
+        ),
+        { padding: [24, 24] }
+      );
+    } else {
+      map.setView([payload.center.lat, payload.center.lng], payload.zoom);
+    }
+    figure.dataset.rrMap = "rendered";
+  } catch {
+    setError(figure);
+  }
+}
+function readPayload(figure) {
+  const raw = figure.getAttribute("data-rr-map-payload");
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || !Array.isArray(parsed.markers) || !parsed.center) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function formatPopup(marker) {
+  const label = marker.label?.trim() || `${marker.lat}, ${marker.lng}`;
+  const parts = [`<strong>${escapeHtml(label)}</strong>`];
+  if (marker.description) {
+    parts.push(`<span>${escapeHtml(marker.description)}</span>`);
+  }
+  return parts.join("<br>");
+}
+function setError(figure) {
+  figure.dataset.rrMap = "error";
+  const canvas = figure.querySelector("[data-rr-map-canvas]");
+  if (canvas) canvas.style.display = "none";
+  const fallback = figure.querySelector("details");
+  if (fallback) fallback.open = true;
+}
+async function loadLeaflet(options) {
+  const existing = readLeafletGlobal();
+  if (existing) return existing;
+  if (!leafletPromise) {
+    const scriptUrl = options.leafletScriptUrl ?? DEFAULT_LEAFLET_SCRIPT_URL;
+    const styleUrl = options.leafletStyleUrl ?? DEFAULT_LEAFLET_STYLE_URL;
+    leafletPromise = Promise.all([loadScript(scriptUrl), loadStyle(styleUrl)]).then(() => readLeafletGlobal()).catch(() => null);
+  }
+  return leafletPromise;
+}
+function readLeafletGlobal() {
+  const value = globalThis.L;
+  return value ?? null;
+}
+function loadScript(src) {
+  const existing = document.querySelector(
+    'script[data-rr-map-script="true"]'
+  );
+  if (existing) {
+    return existing.dataset.rrMapScriptLoaded === "true" ? Promise.resolve() : waitForLoad(existing);
+  }
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = src;
+    script.async = true;
+    script.dataset.rrMapScript = "true";
+    script.addEventListener(
+      "load",
+      () => {
+        script.dataset.rrMapScriptLoaded = "true";
+        resolve();
+      },
+      { once: true }
+    );
+    script.addEventListener(
+      "error",
+      () => reject(new Error("Failed to load Leaflet")),
+      { once: true }
+    );
+    document.head.appendChild(script);
+  });
+}
+function loadStyle(href) {
+  const existing = document.querySelector(
+    'link[data-rr-map-style="true"]'
+  );
+  if (existing) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.dataset.rrMapStyle = "true";
+    link.addEventListener("load", () => resolve(), { once: true });
+    link.addEventListener(
+      "error",
+      () => reject(new Error("Failed to load Leaflet styles")),
+      { once: true }
+    );
+    document.head.appendChild(link);
+  });
+}
+function waitForLoad(element) {
+  return new Promise((resolve) => {
+    element.addEventListener("load", () => resolve(), { once: true });
+    element.addEventListener("error", () => resolve(), { once: true });
+  });
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+export {
+  initMap
+};

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import type { MapOptions } from "./src/types.js";
+export { resolveMapOptions } from "./src/options.js";
+export { describeMap, formatCoordinates, normalizeMapInput, openStreetMapUrl, parseMapSource, } from "./src/parse.js";
+export { rehypeMap } from "./src/rehype.js";
+export type { MapClientOptions, MapCoordinates, MapData, MapMarker, MapOptions, MapPayload, MapRuntime, ResolvedMapOptions, } from "./src/types.js";
+export declare const MAP_PLUGIN_NAME = "map";
+/**
+ * Turns a fenced `map` code block and/or frontmatter coordinates into an
+ * embedded OpenStreetMap.
+ *
+ * The build emits a static fallback (coordinates, place, OpenStreetMap links)
+ * and a JSON payload; `initMap` lazily loads Leaflet from the CDN only when a
+ * map is present and upgrades each figure to an interactive map.
+ */
+export declare function map(options?: MapOptions): import("@riebeckite/core").RiebeckitePlugin<MapOptions>;
+/** Alias matching the `*Plugin` suffix used by other plugin factories. */
+export declare const mapPlugin: typeof map;