gtfs-garage-web 0.0.1

package/dist/map.js

@@ -0,0 +1,334 @@
+var E = Object.defineProperty;
+var A = (i, t, e) => t in i ? E(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var c = (i, t, e) => A(i, typeof t != "symbol" ? t + "" : t, e);
+const f = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', h = {
+  openfreemap: {
+    kind: "vector",
+    url: "https://tiles.openfreemap.org/styles/positron",
+    attribution: `<a href="https://openfreemap.org">OpenFreeMap</a> &copy; <a href="https://www.openmaptiles.org/">OpenMapTiles</a> ${f}`
+  },
+  esri: {
+    kind: "raster",
+    url: "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
+    attribution: 'Tiles &copy; <a href="https://www.esri.com/">Esri</a>'
+  },
+  osm: {
+    kind: "raster",
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: f
+  },
+  // Needs ?api_key=... appended, otherwise the tiles carry a watermark.
+  carto: {
+    kind: "raster",
+    url: "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+    attribution: `${f} &copy; <a href="https://carto.com/attributions">CARTO</a>`
+  },
+  none: { kind: "none" }
+}, d = "openfreemap";
+function R(i) {
+  return i ? i in h ? h[i] : i.includes("{z}") && i.includes("{x}") && i.includes("{y}") ? { kind: "raster", url: i } : i.startsWith("http") ? { kind: "vector", url: i } : (console.warn(`Unknown basemap "${i}"; falling back to ${d}.`), h[d]) : h[d];
+}
+function C(i) {
+  let t = 1 / 0, e = 1 / 0, r = -1 / 0, n = -1 / 0;
+  const a = (o) => {
+    if (Array.isArray(o) && typeof o[0] == "number") {
+      const [s, l] = o;
+      t = Math.min(t, s), r = Math.max(r, s), e = Math.min(e, l), n = Math.max(n, l);
+    } else Array.isArray(o) && o.forEach(a);
+  };
+  for (const o of i.features)
+    o.geometry && a(o.geometry.coordinates);
+  return t === 1 / 0 ? null : [t, e, r, n];
+}
+const g = {
+  type: "FeatureCollection",
+  features: []
+}, T = () => ({ type: "geojson", data: g }), m = ["locations", "routes", "shapes", "stops", "highlight"];
+function D() {
+  return Object.fromEntries(m.map((i) => [i, T()]));
+}
+function M() {
+  return [
+    // Zones first, so they sit under the lines. A zone is an area a rider can
+    // be picked up in, not a thing drawn on top of the network.
+    {
+      id: "locations-fill",
+      type: "fill",
+      source: "locations",
+      paint: { "fill-color": "#7c3aed", "fill-opacity": 0.12 }
+    },
+    {
+      id: "locations-outline",
+      type: "line",
+      source: "locations",
+      paint: { "line-color": "#7c3aed", "line-width": 1, "line-opacity": 0.5 }
+    },
+    // Shapes no route claims (feeds whose trips.txt has no shape_id) still need
+    // drawing, otherwise those feeds render an empty map.
+    {
+      id: "shapes",
+      type: "line",
+      source: "shapes",
+      paint: { "line-color": "#9ca3af", "line-width": 1.5, "line-opacity": 0.6 }
+    },
+    {
+      id: "routes-white",
+      type: "line",
+      source: "routes",
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: {
+        "line-color": "#ffffff",
+        "line-width": ["match", ["get", "route_type"], "3", 5, "1", 10, 7],
+        "line-opacity": 0.8
+      }
+    },
+    {
+      id: "routes",
+      type: "line",
+      source: "routes",
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: {
+        "line-color": ["concat", "#", ["get", "route_color"]],
+        "line-width": ["match", ["get", "route_type"], "3", 1, "1", 4, 3],
+        "line-opacity": ["match", ["get", "route_type"], "1", 0.8, "3", 0.6, 0.7]
+      }
+    },
+    {
+      id: "stops",
+      type: "circle",
+      source: "stops",
+      paint: {
+        // Scaled by zoom rather than hidden at low zoom: an inspection tool has
+        // to show where the stops are before you know where to zoom.
+        "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 1.5, 12, 3, 16, 5],
+        "circle-color": "#1c1e21",
+        "circle-opacity": 0.45
+      }
+    },
+    {
+      id: "highlight-fill",
+      type: "fill",
+      source: "highlight",
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "fill-color": "#ff0066", "fill-opacity": 0.25 }
+    },
+    {
+      id: "highlight-line",
+      type: "line",
+      source: "highlight",
+      filter: ["!=", ["geometry-type"], "Point"],
+      layout: { "line-cap": "round", "line-join": "round" },
+      paint: { "line-color": "#ff0066", "line-width": 5, "line-opacity": 0.95 }
+    },
+    {
+      id: "highlight-point-outer",
+      type: "circle",
+      source: "highlight",
+      filter: ["==", ["geometry-type"], "Point"],
+      paint: { "circle-radius": 9, "circle-color": "#ffffff", "circle-opacity": 1 }
+    },
+    {
+      id: "highlight-point",
+      type: "circle",
+      source: "highlight",
+      filter: ["==", ["geometry-type"], "Point"],
+      paint: { "circle-radius": 6, "circle-color": "#ff0066", "circle-opacity": 1 }
+    }
+  ];
+}
+function S() {
+  return { version: 8, sources: {}, layers: [] };
+}
+async function P(i) {
+  let t = S();
+  if (i.kind === "vector" && i.url)
+    try {
+      const e = await fetch(i.url);
+      if (!e.ok) throw new Error(`${e.status} ${e.statusText}`);
+      if (t = await e.json(), i.attribution)
+        for (const r of Object.values(t.sources))
+          r.attribution = i.attribution;
+    } catch (e) {
+      console.error(`Basemap ${i.url} could not be loaded; continuing without one.`, e), t = S();
+    }
+  else i.kind === "raster" && i.url && (t.sources.basemap = {
+    type: "raster",
+    tiles: [i.url],
+    tileSize: 256,
+    attribution: i.attribution
+  }, t.layers.push({ id: "basemap", type: "raster", source: "basemap", minzoom: 0, maxzoom: 22 }));
+  return Object.assign(t.sources, D()), t.layers.push(...M()), t;
+}
+const x = 2, O = 5e3;
+function $(i = O, t = x) {
+  let e = i;
+  return (r) => r < e ? !1 : (e *= t, !0);
+}
+const L = "gtfs-garage.map-visible", I = ["routes", "locations", "stops", "shapes"], y = {
+  routes: "routes",
+  stops: "stops",
+  shapes: "shapes",
+  locations: "zones"
+};
+class w {
+  constructor(t, e, r, n, a) {
+    c(this, "map");
+    c(this, "ready");
+    /** Cancels an in-flight refresh when a new feed arrives mid-draw. */
+    c(this, "drawing", null);
+    /** The first full draw, while it is still running. See `highlight`. */
+    c(this, "pendingRefresh", null);
+    /** Layers the server thinned to fit, and by how much. */
+    c(this, "simplifiedLayers", /* @__PURE__ */ new Map());
+    this.maplibregl = t, this.dom = e, this.state = r, this.source = n, this.map = new t.Map({
+      // The element itself, not an id: the viewer builds its own markup and
+      // tags elements with data-el, so there is no id for MapLibre to find.
+      container: e.el("map"),
+      center: [0, 20],
+      zoom: 1,
+      attributionControl: { compact: !0 },
+      // `buildStyle` composes the style from the basemap and this viewer's own
+      // layers and is covered by layers.test.ts; it is typed as a plain record
+      // rather than against MapLibre, which until now was an untyped global.
+      style: a
+    }), this.map.addControl(new this.maplibregl.NavigationControl(), "top-right"), this.map.addControl(new this.maplibregl.ScaleControl()), this.map.on("click", "stops", (o) => {
+      const s = o.features[0].properties;
+      new this.maplibregl.Popup().setLngLat(o.lngLat).setHTML(`<strong>${s.stop_name ?? ""}</strong><br>${s.stop_id}`).addTo(this.map);
+    });
+    for (const o of ["stops", "routes"])
+      this.map.on("mouseenter", o, () => this.map.getCanvas().style.cursor = "pointer"), this.map.on("mouseleave", o, () => this.map.getCanvas().style.cursor = "");
+    this.ready = new Promise((o) => {
+      const s = () => {
+        this.map.getSource("stops") ? o() : window.setTimeout(s, 50);
+      };
+      s();
+    }), this.dom.el("toggle-map-btn").addEventListener("click", () => this.setVisible(!this.isVisible()));
+  }
+  /**
+   * A vector basemap has to be fetched before the map is constructed, and
+   * MapLibre itself is fetched here rather than imported at the top of the
+   * file.
+   *
+   * That is what keeps it optional. A host that mounts the viewer without the
+   * map part never reaches this method, so its bundler never follows the
+   * import and none of MapLibre's ~1 MB is downloaded. A static import would
+   * make it a cost every consumer pays whether or not they show a map.
+   */
+  static async create(t, e, r, n) {
+    const [a, o] = await Promise.all([
+      import("maplibre-gl").then((s) => s.default),
+      P(R(n))
+    ]);
+    return new w(a, t, e, r, o);
+  }
+  isVisible() {
+    return !this.dom.el("map-pane").hidden;
+  }
+  /** Restore the saved preference; defaults to shown. */
+  restoreVisibility() {
+    let t = null;
+    try {
+      t = localStorage.getItem(L);
+    } catch {
+    }
+    this.setVisible(t !== "0");
+  }
+  setVisible(t) {
+    this.dom.el("map-pane").hidden = !t, this.dom.el("toggle-map-btn").textContent = t ? "Hide map" : "Show map";
+    try {
+      localStorage.setItem(L, t ? "1" : "0");
+    } catch {
+    }
+    t && (this.map.resize(), this.state.mapDataLoaded || (this.pendingRefresh = this.refresh().catch((e) => console.error("Map layers failed to load:", e)).finally(() => {
+      this.pendingRefresh = null;
+    })));
+  }
+  async setSourceData(t, e) {
+    await this.ready, this.map.getSource(t).setData(e);
+  }
+  fitTo(t, e) {
+    const r = C(t);
+    r && this.map.fitBounds(r, { padding: 40, maxZoom: e, duration: 600 });
+  }
+  async highlight(t, e = {}) {
+    this.isVisible() || this.setVisible(!0), this.pendingRefresh && await this.pendingRefresh, await this.setSourceData("highlight", t), t.features.length && this.fitTo(t, e.point ? 16 : 14);
+  }
+  showProgress(t) {
+    const e = this.dom.el("map-progress");
+    e.textContent = t, e.hidden = t === "";
+  }
+  /**
+   * Draw one layer as it arrives.
+   *
+   * The features are handed over repeatedly rather than once at the end, so a
+   * large feed paints steadily instead of freezing the tab and then jumping.
+   * Returns what was collected, for the caller to frame the view with.
+   */
+  async drawLayer(t, e) {
+    const r = { type: "FeatureCollection", features: [] };
+    let n = 0, a = !1;
+    const o = $();
+    let s = 0, l = Promise.resolve();
+    await this.source.geojsonStream(
+      t,
+      (p) => {
+        if (p.type === "header") {
+          n = p.total, p.step > 1 && (s = p.step), this.showProgress(`Drawing 0 of ${n.toLocaleString()} ${y[t]}…`);
+          return;
+        }
+        const u = p.features;
+        r.features.push(...u);
+        const _ = Math.min(r.features.length, n);
+        if (this.showProgress(
+          `Drawing ${_.toLocaleString()} of ${n.toLocaleString()} ${y[t]}…`
+        ), t === "routes")
+          for (const b of u)
+            this.state.routeShapes.set(b.properties.route_id, b.properties.shape_id);
+        a || (a = !0, this.fitTo({ type: "FeatureCollection", features: u }, 13)), o(r.features.length) && (l = l.then(() => this.setSourceData(t, r)));
+      },
+      e
+    ), await l, await this.setSourceData(t, r), s && this.simplifiedLayers.set(t, s);
+  }
+  /** Names the layers the server had to reduce, once everything is drawn. */
+  simplificationNote() {
+    const t = [...this.simplifiedLayers.keys()].map((e) => y[e]);
+    return t.length ? `Showing every point of ${t.join(" and ")} would not fit in a browser, so their lines are simplified. No shape is missing.` : "";
+  }
+  /** Fetch and draw the whole feed. Skipped entirely while the map is hidden. */
+  async refresh() {
+    var e;
+    if (!this.isVisible()) return;
+    (e = this.drawing) == null || e.abort();
+    const t = new AbortController();
+    this.drawing = t, this.simplifiedLayers.clear(), this.state.routeShapes.clear();
+    for (const r of m) await this.setSourceData(r, g);
+    try {
+      for (const r of I) await this.drawLayer(r, t.signal);
+      this.state.mapDataLoaded = !0;
+    } catch (r) {
+      if (r.name !== "AbortError") throw r;
+    } finally {
+      this.drawing === t && (this.drawing = null, this.showProgress(this.simplificationNote()));
+    }
+  }
+  async clear() {
+    for (const t of m) await this.setSourceData(t, g);
+  }
+  /**
+   * Give up the map and everything holding it.
+   *
+   * An embedded viewer is unmounted and remounted by its host - React does it
+   * twice on every mount in development - and a MapLibre instance left behind
+   * keeps a WebGL context, which browsers allow only a handful of.
+   */
+  destroy() {
+    var t;
+    (t = this.drawing) == null || t.abort(), this.map.remove();
+  }
+}
+const z = {
+  create: (i, t, e, r) => w.create(i, t, e, r)
+};
+export {
+  z as mapPart
+};

package/dist/markup.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The viewer's own markup.
+ *
+ * Built here rather than written into a page, so a viewer can be mounted into
+ * any root - which is what an embedded one needs. Elements are tagged with
+ * `data-el` rather than `id`: two viewers on one page would otherwise put
+ * duplicate ids into their host's document, which is invalid and can collide
+ * with the host's own selectors. `createDom` looks them up by that attribute,
+ * so nothing outside this file cares which it is.
+ *
+ * `browse` is the part worth embedding - the file list, the grid, the filters.
+ * `load` and `report` belong to the local application: a host that already
+ * knows which dataset it is showing has nothing to open and no load to explain.
+ */
+export interface ViewerParts {
+    /** Opening a feed by drop, path or URL. Local application only. */
+    load?: boolean;
+    /** The load report in the header. Local application only. */
+    report?: boolean;
+    /** The map pane. */
+    map?: boolean;
+}
+/** Replace `root`'s contents with the viewer's markup. */
+export declare function buildViewer(root: Element, parts?: ViewerParts): void;