@phila/layerboard 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/index.mjs

@@ -1,125 +1,17 @@
-import { defineComponent as we, ref as C, watch as Pe, computed as I, onMounted as Ve, onUnmounted as Lt, createElementBlock as w, openBlock as p, createVNode as K, unref as _, withCtx as Ee, createBlock as Y, createCommentVNode as O, Fragment as ie, renderList as se, useAttrs as Ft, toRef as zt, normalizeClass as ne, createElementVNode as P, toDisplayString as j, renderSlot as ae, withDirectives as St, mergeProps as tt, vModelDynamic as Tt, createTextVNode as me, normalizeProps as dt, guardReactiveProps as ft, withModifiers as Et, normalizeStyle as ee, readonly as W, provide as U, resolveComponent as _t, vShow as Ot } from "vue";
-import { Map as It, DrawTool as Rt, RasterLayer as pt, CircleLayer as yt, FillLayer as Dt, LineLayer as Ye, MapMarker as Zt, MapPopup as Bt } from "@phila/phila-ui-map-core";
-import { cn as ot, Icon as ue, BaseLink as Vt, ActionContent as gt } from "@phila/phila-ui-core";
-function Ne(e, n, t = {}) {
-  const o = { type: "Feature" };
-  return (t.id === 0 || t.id) && (o.id = t.id), t.bbox && (o.bbox = t.bbox), o.properties = n || {}, o.geometry = e, o;
-}
-function At(e, n, t = {}) {
-  for (const a of e) {
-    if (a.length < 4)
-      throw new Error(
-        "Each LinearRing of a Polygon must have 4 or more Positions."
-      );
-    if (a[a.length - 1].length !== a[0].length)
-      throw new Error("First and last Position are not equivalent.");
-    for (let l = 0; l < a[a.length - 1].length; l++)
-      if (a[a.length - 1][l] !== a[0][l])
-        throw new Error("First and last Position are not equivalent.");
-  }
-  return Ne({
-    type: "Polygon",
-    coordinates: e
-  }, n, t);
-}
-function Nt(e, n, t = {}) {
-  if (e.length < 2)
-    throw new Error("coordinates must be an array of two or more positions");
-  return Ne({
-    type: "LineString",
-    coordinates: e
-  }, n, t);
-}
-function Ut(e, n, t = {}) {
-  return Ne({
-    type: "MultiLineString",
-    coordinates: e
-  }, n, t);
-}
-function Wt(e, n, t = {}) {
-  return Ne({
-    type: "MultiPolygon",
-    coordinates: e
-  }, n, t);
-}
-function jt(e) {
-  return e.type === "Feature" ? e.geometry : e;
-}
-function qt(e, n, t) {
-  var o = e.length, a = Me(e[0], n), l = [], c, h, f;
-  let M, m;
-  for (t || (t = []), c = 1; c < o; c++) {
-    for (M = e[c - 1], m = e[c], h = f = Me(m, n); ; )
-      if (a | h) {
-        if (a & h)
-          break;
-        a ? (M = nt(M, m, a, n), a = Me(M, n)) : (m = nt(M, m, h, n), h = Me(m, n));
-      } else {
-        l.push(M), h !== f ? (l.push(m), c < o - 1 && (t.push(l), l = [])) : c === o - 1 && l.push(m);
-        break;
-      }
-    a = f;
-  }
-  return l.length && t.push(l), t;
-}
-function Gt(e, n) {
-  var t, o, a, l, c, h, f;
-  for (o = 1; o <= 8; o *= 2) {
-    for (t = [], a = e[e.length - 1], l = !(Me(a, n) & o), c = 0; c < e.length; c++)
-      h = e[c], f = !(Me(h, n) & o), f !== l && t.push(nt(a, h, o, n)), f && t.push(h), a = h, l = f;
-    if (e = t, !e.length) break;
-  }
-  return t;
-}
-function nt(e, n, t, o) {
-  return t & 8 ? [e[0] + (n[0] - e[0]) * (o[3] - e[1]) / (n[1] - e[1]), o[3]] : t & 4 ? [e[0] + (n[0] - e[0]) * (o[1] - e[1]) / (n[1] - e[1]), o[1]] : t & 2 ? [o[2], e[1] + (n[1] - e[1]) * (o[2] - e[0]) / (n[0] - e[0])] : t & 1 ? [o[0], e[1] + (n[1] - e[1]) * (o[0] - e[0]) / (n[0] - e[0])] : null;
-}
-function Me(e, n) {
-  var t = 0;
-  return e[0] < n[0] ? t |= 1 : e[0] > n[2] && (t |= 2), e[1] < n[1] ? t |= 4 : e[1] > n[3] && (t |= 8), t;
-}
-function Ht(e, n) {
-  const t = jt(e), o = t.type, a = e.type === "Feature" ? e.properties : {};
-  let l = t.coordinates;
-  switch (o) {
-    case "LineString":
-    case "MultiLineString": {
-      const c = [];
-      return o === "LineString" && (l = [l]), l.forEach((h) => {
-        qt(h, n, c);
-      }), c.length === 1 ? Nt(c[0], a) : Ut(c, a);
-    }
-    case "Polygon":
-      return At(ht(l, n), a);
-    case "MultiPolygon":
-      return Wt(
-        l.map((c) => ht(c, n)),
-        a
-      );
-    default:
-      throw new Error("geometry " + o + " not supported");
-  }
-}
-function ht(e, n) {
-  const t = [];
-  for (const o of e) {
-    const a = Gt(o, n);
-    a.length > 0 && ((a[0][0] !== a[a.length - 1][0] || a[0][1] !== a[a.length - 1][1]) && a.push(a[0]), a.length >= 4 && t.push(a));
-  }
-  return t;
-}
-var Jt = Ht;
-const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
+import { defineComponent as ye, ref as k, watch as Oe, computed as z, nextTick as Ne, onMounted as et, onUnmounted as _t, createElementBlock as $, openBlock as m, createVNode as H, unref as d, withCtx as Ge, createBlock as q, createCommentVNode as A, Fragment as ue, renderList as ve, useAttrs as jt, toRef as qt, normalizeClass as re, createElementVNode as P, toDisplayString as G, renderSlot as pe, withDirectives as Rt, mergeProps as yt, vModelDynamic as Gt, createTextVNode as xe, normalizeProps as kt, guardReactiveProps as xt, normalizeStyle as fe, withModifiers as Ht, readonly as j, provide as Z, onBeforeUnmount as Jt, useId as $t, resolveComponent as Kt, vShow as Qt } from "vue";
+import { Map as Xt, DrawTool as Yt, RasterLayer as Mt, CircleLayer as Pt, FillLayer as Tt, LineLayer as ft, MapMarker as eo, MapPopup as to } from "@phila/phila-ui-map-core";
+import { cn as mt, Icon as ke, BaseLink as oo, ActionContent as Ft } from "@phila/phila-ui-core";
+const ao = { class: "map-panel" }, io = /* @__PURE__ */ ye({
   __name: "MapPanel",
   props: {
     visibleLayers: {},
     layerOpacities: {},
     layerList: {},
-    tiledLayers: {},
-    visibleTiledLayers: {},
-    tiledLayerOpacities: {},
-    cyclomediaConfig: {},
-    pictometryCredentials: {},
+    tiledLayers: { default: void 0 },
+    visibleTiledLayers: { default: void 0 },
+    tiledLayerOpacities: { default: void 0 },
+    cyclomediaConfig: { default: void 0 },
+    pictometryCredentials: { default: void 0 },
     basemapControlPosition: { default: "top-right" },
     navigationControlPosition: { default: "bottom-right" },
     geolocationControlPosition: { default: "bottom-right" },
@@ -127,462 +19,514 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
     drawControlPosition: { default: "bottom-left" },
     cyclomediaButtonPosition: { default: "top-right" },
     pictometryButtonPosition: { default: "top-right" },
-    initialZoom: {},
-    initialCenter: {}
+    initialZoom: { default: void 0 },
+    initialCenter: { default: void 0 }
   },
   emits: ["zoom", "layerLoading", "layerError"],
-  setup(e, { emit: n }) {
-    const t = e, o = n, a = C(null), l = C(null), c = C(0);
-    function h(i) {
-      o("zoom", i), l.value && (c.value = f(l.value));
-    }
-    function f(i) {
-      const u = i.getZoom(), x = i.getCenter().lat, k = 559082264028e-3, z = x * Math.PI / 180;
-      return k * Math.cos(z) / Math.pow(2, u);
-    }
-    const M = C({}), m = C(null), v = C(/* @__PURE__ */ new Set()), s = ["fema-100-year-floodplain", "fema-500-year-floodplain"];
-    async function d(i, u, r, x) {
-      const k = encodeURIComponent(x || "1=1"), z = JSON.stringify({
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = k(null), n = k(null), c = k(0);
+    function w(t) {
+      o("zoom", t), n.value && (c.value = p(n.value));
+    }
+    function p(t) {
+      const u = t.getZoom(), b = t.getCenter().lat, C = 559082264028e-3, F = b * Math.PI / 180;
+      return C * Math.cos(F) / Math.pow(2, u);
+    }
+    const x = k({}), h = k(null), g = k(/* @__PURE__ */ new Set());
+    async function a(t, u, s, b, C) {
+      const F = encodeURIComponent(b || "1=1"), B = JSON.stringify({
         xmin: u.west,
         ymin: u.south,
         xmax: u.east,
         ymax: u.north,
         spatialReference: { wkid: 4326 }
-      }), R = 2e3;
-      let V = 0, N = [], X = !0;
-      for (; X; ) {
-        const G = `${i}/query?where=${k}&geometry=${encodeURIComponent(z)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${R}&resultOffset=${V}&f=geojson`, Z = await fetch(G);
-        if (!Z.ok)
-          throw new Error(`HTTP ${Z.status}: ${Z.statusText}`);
-        const H = await Z.json();
-        H.features && H.features.length > 0 ? (N = N.concat(H.features), V += H.features.length, X = H.features.length === R) : X = !1;
-      }
-      if (s.includes(r)) {
-        const G = [u.west, u.south, u.east, u.north];
-        N = N.map((Z) => {
-          if (Z.geometry && (Z.geometry.type === "Polygon" || Z.geometry.type === "MultiPolygon"))
-            try {
-              return Jt(Z, G);
-            } catch {
-              return Z;
-            }
-          return Z;
-        });
+      }), Y = C !== void 0 && C < 14 ? `&maxAllowableOffset=${360 / (Math.pow(2, C) * 512)}` : "", V = 2e3;
+      let oe = 0, R = [], K = !0;
+      for (; K; ) {
+        const W = `${t}/query?where=${F}&geometry=${encodeURIComponent(B)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=*&returnGeometry=true&resultRecordCount=${V}&resultOffset=${oe}${Y}&f=geojson`, ae = await fetch(W);
+        if (!ae.ok)
+          throw new Error(`HTTP ${ae.status}: ${ae.statusText}`);
+        const ce = await ae.json();
+        ce.features && ce.features.length > 0 ? (R = R.concat(ce.features), oe += ce.features.length, K = ce.features.length === V) : K = !1;
       }
-      return {
+      return R = R.map((W) => {
+        if (W.properties) {
+          const ae = {};
+          for (const ce of Object.keys(W.properties))
+            ae[ce.toLowerCase()] = W.properties[ce];
+          return { ...W, properties: ae };
+        }
+        return W;
+      }), {
         type: "FeatureCollection",
-        features: N
+        features: R
       };
     }
-    async function $(i, u) {
-      const r = u.map(async (x) => {
-        const k = t.layerList.find((z) => z.config.id === x)?.config;
-        if (k) {
-          o("layerLoading", x, !0);
+    async function v(t, u, s) {
+      const b = u.map(async (C) => {
+        const F = l.layerList.find((B) => B.config.id === C)?.config;
+        if (F && !(s !== void 0 && F.minZoom !== void 0 && s < F.minZoom)) {
+          o("layerLoading", C, !0);
           try {
-            const z = await d(k.url, i, x, k.where);
-            M.value = { ...M.value, [x]: z }, o("layerError", x, null);
-          } catch (z) {
-            const R = z instanceof Error ? z.message : "Failed to load";
-            o("layerError", x, R);
+            const B = await a(F.url, t, C, F.where, s);
+            x.value = { ...x.value, [C]: B }, o("layerError", C, null);
+          } catch (B) {
+            const Y = B instanceof Error ? B.message : "Failed to load";
+            o("layerError", C, Y);
           } finally {
-            o("layerLoading", x, !1);
+            o("layerLoading", C, !1);
           }
         }
       });
-      await Promise.all(r);
+      await Promise.all(b);
     }
-    async function y(i) {
-      const u = [...t.visibleLayers];
-      await $(i, u);
+    async function f(t, u) {
+      const s = [...l.visibleLayers];
+      await v(t, s, u);
     }
-    function S(i) {
-      m.value = i.bounds, y(i.bounds);
+    function L(t) {
+      h.value = t.bounds, f(t.bounds, t.zoom);
     }
-    function g(i) {
-      l.value = i;
-      const u = i.getBounds();
-      m.value = {
+    function S(t) {
+      n.value = t;
+      const u = t.getBounds();
+      h.value = {
         west: u.getWest(),
         south: u.getSouth(),
         east: u.getEast(),
         north: u.getNorth()
       };
-      const r = i.getZoom();
-      o("zoom", r), c.value = f(i), y(m.value);
+      const s = t.getZoom();
+      o("zoom", s), c.value = p(t), f(h.value, s);
     }
-    Pe(
-      () => t.visibleLayers.size,
+    Oe(
+      () => l.visibleLayers,
       async () => {
-        if (oe.value.length > 0 && te(), m.value) {
-          const i = new Set(t.visibleLayers), u = [...i].filter(
-            (r) => !v.value.has(r)
-          );
-          v.value = new Set(i), u.length > 0 && await $(m.value, u);
+        if (se.value.length > 0 && le(), h.value) {
+          const t = new Set(l.visibleLayers), u = [...t].filter((s) => !g.value.has(s));
+          if (g.value = new Set(t), u.length > 0) {
+            const s = n.value?.getZoom();
+            await v(h.value, u, s);
+          }
         }
       }
     );
-    function b(i) {
-      return t.visibleLayers.has(i);
-    }
-    function E(i) {
-      return !!M.value[i.id];
-    }
-    const T = I(
-      () => t.layerList.filter((i) => i.config.type === "circle" && b(i.config.id) && E(i.config)).map((i) => i.config)
-    ), B = I(
-      () => t.layerList.filter((i) => i.config.type === "fill" && b(i.config.id) && E(i.config)).map((i) => i.config)
-    ), q = I(
-      () => t.layerList.filter((i) => i.config.type === "fill" && i.config.outlinePaint && b(i.config.id) && E(i.config)).map((i) => i.config)
-    ), ce = I(
-      () => t.layerList.filter((i) => i.config.type === "line" && b(i.config.id) && E(i.config)).map((i) => i.config)
+    function E(t) {
+      return l.visibleLayers.has(t);
+    }
+    function D(t) {
+      return !!x.value[t.id];
+    }
+    const X = z(
+      () => l.layerList.filter((t) => t.config.type === "circle" && E(t.config.id) && D(t.config)).map((t) => t.config)
+    ), T = z(
+      () => l.layerList.filter((t) => t.config.type === "fill" && E(t.config.id) && D(t.config)).map((t) => t.config)
+    ), I = z(
+      () => l.layerList.filter(
+        (t) => t.config.type === "fill" && t.config.outlinePaint && E(t.config.id) && D(t.config)
+      ).map((t) => t.config)
+    ), _ = z(
+      () => l.layerList.filter((t) => t.config.type === "line" && E(t.config.id) && D(t.config)).map((t) => t.config)
     );
-    function Le(i) {
-      return t.visibleTiledLayers?.has(i) ?? !1;
+    Oe(_, async (t) => {
+      if (t.length < 2) return;
+      await Ne();
+      const u = n.value;
+      if (u)
+        for (let s = t.length - 1; s >= 0; s--) {
+          const b = s < t.length - 1 ? t[s + 1].id : "highlight-lines";
+          try {
+            u.getLayer(t[s].id) && u.moveLayer(t[s].id, b);
+          } catch {
+          }
+        }
+    });
+    function te(t) {
+      return l.visibleTiledLayers?.has(t) ?? !1;
     }
-    function Se(i) {
-      return t.tiledLayerOpacities?.[i] ?? 1;
+    function N(t) {
+      return l.tiledLayerOpacities?.[t] ?? 1;
     }
-    function We(i) {
-      return `${i.replace(/\/$/, "")}/tile/{z}/{y}/{x}`;
+    function me(t) {
+      return `${t.replace(/\/$/, "")}/tile/{z}/{y}/{x}`;
     }
-    function je(i) {
+    function he(t) {
       return {
         type: "raster",
-        tiles: [We(i.url)],
+        tiles: [me(t.url)],
         tileSize: 256,
-        attribution: i.attribution || ""
+        attribution: t.attribution || ""
       };
     }
-    const ze = C({}), Ie = C(/* @__PURE__ */ new Set());
-    async function Te(i) {
-      if (!Ie.value.has(i.id)) {
-        Ie.value.add(i.id);
+    const Ue = k({}), Je = k(/* @__PURE__ */ new Set());
+    async function lt(t) {
+      if (!Je.value.has(t.id)) {
+        Je.value.add(t.id);
         try {
-          const u = i.url.replace(/\/$/, ""), r = await fetch(`${u}?f=json`);
-          if (!r.ok)
+          const u = t.url.replace(/\/$/, ""), s = await fetch(`${u}?f=json`);
+          if (!s.ok)
             return;
-          const x = await r.json();
-          let k = x.minScale || 0, z = x.maxScale || 0;
-          if (x.layers && x.layers.length > 0)
-            for (const R of x.layers)
-              R.maxScale && R.maxScale > 0 && (z === 0 || R.maxScale < z) && (z = R.maxScale);
-          z === 0 && (z = 72e3), ze.value = {
-            ...ze.value,
-            [i.id]: { minScale: k, maxScale: z }
+          const b = await s.json(), C = b.minScale || 0;
+          let F = b.maxScale || 0;
+          if (b.layers && b.layers.length > 0)
+            for (const B of b.layers)
+              B.maxScale && B.maxScale > 0 && (F === 0 || B.maxScale < F) && (F = B.maxScale);
+          F === 0 && (F = 72e3), Ue.value = {
+            ...Ue.value,
+            [t.id]: { minScale: C, maxScale: F }
           };
         } catch {
         }
       }
     }
-    Ve(() => {
-      if (t.tiledLayers)
-        for (const i of t.tiledLayers)
-          i.scaleBasedRendering && Te(i);
+    et(() => {
+      if (l.tiledLayers)
+        for (const t of l.tiledLayers)
+          t.scaleBasedRendering && lt(t);
     });
-    function Re(i) {
-      if (!i.scaleBasedRendering)
+    function De(t) {
+      if (!t.scaleBasedRendering)
         return "tiled";
-      const u = ze.value[i.id];
+      const u = Ue.value[t.id];
       if (!u)
         return "tiled";
-      const r = c.value;
-      return r === 0 || r > u.maxScale ? "tiled" : "dynamic";
+      const s = c.value;
+      return s === 0 || s > u.maxScale ? "tiled" : "dynamic";
     }
-    const qe = I(() => t.tiledLayers ? t.tiledLayers.filter((i) => Le(i.id) ? i.scaleBasedRendering ? Re(i) === "tiled" : !0 : !1) : []), Ge = I(() => t.tiledLayers ? t.tiledLayers.filter((i) => Le(i.id) && i.scaleBasedRendering ? Re(i) === "dynamic" : !1) : []);
-    function Ce(i) {
+    const nt = z(() => l.tiledLayers ? l.tiledLayers.filter((t) => te(t.id) ? t.scaleBasedRendering ? De(t) === "tiled" : !0 : !1) : []), rt = z(() => l.tiledLayers ? l.tiledLayers.filter((t) => te(t.id) && t.scaleBasedRendering ? De(t) === "dynamic" : !1) : []);
+    function _e(t) {
       return {
         type: "raster",
-        tiles: [`${i.url.replace(/\/$/, "")}/export?bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&format=png32&transparent=true&f=image`],
+        tiles: [`${t.url.replace(/\/$/, "")}/export?bbox={bbox-epsg-3857}&bboxSR=3857&imageSR=3857&size=256,256&format=png32&transparent=true&f=image`],
         tileSize: 256,
-        attribution: i.attribution || ""
+        attribution: t.attribution || ""
       };
     }
-    function fe(i) {
-      return { type: "geojson", data: M.value[i.id] };
+    function Me(t) {
+      return { type: "geojson", data: x.value[t.id], tolerance: 0 };
     }
-    function ke(i) {
-      return t.layerOpacities[i] ?? 1;
+    function Re(t) {
+      return l.layerOpacities[t] ?? 1;
     }
-    function pe(i) {
-      const u = ke(i.id), r = i.type === "circle" ? "circle-opacity" : i.type === "fill" ? "fill-opacity" : "line-opacity";
-      if (i.type === "fill" && i.paint["fill-opacity"] === 0)
-        return { ...i.paint, "fill-opacity": 0 };
-      const x = i.type === "circle" ? "circle-color" : i.type === "fill" ? "fill-color" : "line-color", k = { ...i.paint }, z = k[x], R = k[r] === 1, V = typeof z == "string" && z.startsWith("rgba(");
-      if (R && V) {
+    function Pe(t) {
+      const u = Re(t.id), s = t.type === "circle" ? "circle-opacity" : t.type === "fill" ? "fill-opacity" : "line-opacity";
+      if (t.type === "fill" && t.paint["fill-opacity"] === 0)
+        return { ...t.paint, "fill-opacity": 0 };
+      const b = t.type === "circle" ? "circle-color" : t.type === "fill" ? "fill-color" : "line-color", C = { ...t.paint }, F = C[b], B = C[s] === 1, Y = typeof F == "string" && F.startsWith("rgba(");
+      if (B && Y) {
         if (u === 1)
-          return k;
+          return C;
         {
-          const N = z.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-          if (N && N[4]) {
-            const [, X, G, Z, H] = N, Xe = parseFloat(H) * u;
-            k[x] = `rgba(${X}, ${G}, ${Z}, ${Xe})`, k[r] = 1;
+          const V = F.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+          if (V && V[4]) {
+            const [, oe, R, K, W] = V, ae = parseFloat(W) * u;
+            C[b] = `rgba(${oe}, ${R}, ${K}, ${ae})`, C[s] = 1;
           }
-          return k;
+          return C;
         }
       }
-      if (V) {
-        const N = z.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-        if (N) {
-          const [, X, G, Z] = N;
-          k[x] = `rgb(${X}, ${G}, ${Z})`;
+      if (Y) {
+        const V = F.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+        if (V) {
+          const [, oe, R, K] = V;
+          C[b] = `rgb(${oe}, ${R}, ${K})`;
         }
       }
-      return k[r] = u, k;
+      return C[s] = u, C;
     }
-    function He(i) {
-      const u = ke(i.id);
-      return { ...i.outlinePaint, "line-opacity": u };
+    function st(t) {
+      const u = Re(t.id);
+      return { ...t.outlinePaint, "line-opacity": u };
     }
-    const oe = C([]), ye = C(null), J = C(0);
-    function $e(i) {
-      const u = i.replace(/-outline$/, "");
-      return t.layerList.find((x) => x.config.id === u)?.config;
+    const se = k([]), Ae = k(null), ie = k(0);
+    function Fe(t) {
+      const u = t.replace(/-outline$/, "");
+      return l.layerList.find((b) => b.config.id === u)?.config;
     }
-    function ve(i, u) {
-      return i.replace(/\{([^}]+)\}/g, (r, x) => {
-        const k = u[x];
-        return k == null ? "" : String(k);
+    function ct(t, u) {
+      return t.replace(/\{([^}]+)\}/g, (s, b) => {
+        const C = u[b];
+        return C == null ? "" : String(C);
       });
     }
-    function Je(i, u) {
-      if (i == null) return "-";
-      if (u?.dateFormat && typeof i == "number") {
-        const r = new Date(i);
+    function we(t) {
+      return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+    }
+    function We(t, u, s) {
+      if (t == null) return "-";
+      if (u?.dateFormat && typeof t == "number") {
+        const b = new Date(t);
+        if (s && u.dateFormat === "shortDateShortTime")
+          return b.toLocaleString(void 0, { dateStyle: "short", timeStyle: "short" });
         switch (u.dateFormat) {
           case "shortDateShortTime":
-            return r.toLocaleString();
+            return b.toLocaleDateString();
           case "longMonthDayYear":
-            return r.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
+            return b.toLocaleDateString(void 0, { month: "long", day: "numeric", year: "numeric" });
           case "shortDate":
-            return r.toLocaleDateString();
+            return b.toLocaleDateString();
           case "longDate":
-            return r.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+            return b.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
           default:
-            return r.toLocaleDateString();
+            return b.toLocaleDateString();
         }
       }
-      if (typeof i == "number") {
-        if (i > 1e12 && !u)
-          return new Date(i).toLocaleDateString();
-        const r = u?.places, x = u?.digitSeparator ?? !0;
-        if (r !== void 0) {
-          const k = i.toFixed(r);
-          if (x) {
-            const z = k.split("."), R = z[0] || "0", V = z[1], N = R.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return V ? `${N}.${V}` : N;
+      if (typeof t == "number") {
+        if (t > 1e12 && !u)
+          return new Date(t).toLocaleDateString();
+        const b = u?.places, C = u?.digitSeparator ?? !0;
+        if (b !== void 0) {
+          if (Number.isInteger(t) && b >= 0)
+            return String(t);
+          const F = t.toFixed(b);
+          if (C) {
+            const B = F.split("."), Y = B[0] || "0", V = B[1], oe = Y.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return V ? `${oe}.${V}` : oe;
           }
-          return k;
+          return F;
         }
-        return x ? i.toLocaleString() : String(i);
+        return Number.isInteger(t) ? String(t) : C ? t.toLocaleString() : String(t);
       }
-      return String(i);
+      return String(t);
     }
-    function De(i) {
+    function je(t) {
       const u = /* @__PURE__ */ new Set();
-      return i.filter((r) => {
-        const k = `${r.layer.id.replace(/-outline$/, "")}:${JSON.stringify(r.properties)}`;
-        return u.has(k) ? !1 : (u.add(k), !0);
+      return t.filter((s) => {
+        const C = `${s.layer.id.replace(/-outline$/, "")}:${JSON.stringify(s.properties)}`;
+        return u.has(C) ? !1 : (u.add(C), !0);
       });
     }
-    function ge(i, u) {
-      const r = /* @__PURE__ */ new Map();
-      return u.forEach((x, k) => {
-        r.set(x.id, k);
-      }), i.sort((x, k) => {
-        const z = x.layer.id.replace(/-outline$/, ""), R = k.layer.id.replace(/-outline$/, ""), V = r.get(z) ?? -1;
-        return (r.get(R) ?? -1) - V;
+    function Ke(t, u) {
+      const s = x.value[t];
+      if (!s?.features) return null;
+      const b = u.objectid ?? u.OBJECTID ?? u.FID;
+      if (b != null) {
+        const C = s.features.find(
+          (F) => (F.properties?.objectid ?? F.properties?.OBJECTID ?? F.properties?.FID) === b
+        );
+        if (C) return C.geometry;
+      }
+      return null;
+    }
+    function Le(t, u) {
+      const s = /* @__PURE__ */ new Map();
+      return u.forEach((b, C) => {
+        s.set(b.id, C);
+      }), t.sort((b, C) => {
+        const F = b.layer.id.replace(/-outline$/, ""), B = C.layer.id.replace(/-outline$/, ""), Y = s.get(F) ?? -1;
+        return (s.get(B) ?? -1) - Y;
       });
     }
-    function xe(i) {
-      const u = l.value;
+    function Be(t) {
+      const u = n.value;
       if (!u) return;
-      const r = [];
-      t.layerList.forEach((G) => {
-        const Z = G.config;
-        t.visibleLayers.has(Z.id) && (r.push(Z.id), Z.outlinePaint && r.push(`${Z.id}-outline`));
+      const s = [];
+      l.layerList.forEach((R) => {
+        const K = R.config;
+        l.visibleLayers.has(K.id) && (s.push(K.id), K.outlinePaint && s.push(`${K.id}-outline`));
       });
-      const x = u.project([i.lngLat.lng, i.lngLat.lat]), k = u.queryRenderedFeatures(x, {
-        layers: r
+      const b = u.project([t.lngLat.lng, t.lngLat.lat]), C = u.queryRenderedFeatures(b, {
+        layers: s
       });
-      if (k.length === 0) return;
-      const z = De(k), R = t.layerList.map((G) => G.config), V = ge(z, R), N = V.map((G) => {
-        const Z = G.layer.id.replace(/-outline$/, ""), H = $e(Z);
-        return H ? {
-          layerId: H.id,
-          layerTitle: H.title,
-          properties: G.properties || {},
-          popupConfig: H.popup
-        } : null;
-      }).filter((G) => G !== null);
-      if (N.length === 0) return;
-      oe.value = N, J.value = 0, ye.value = [i.lngLat.lng, i.lngLat.lat];
-      const X = V[0];
-      if (X && X.geometry) {
-        const G = X.layer.id.replace(/-outline$/, ""), Z = $e(G);
-        if (Z) {
-          const H = rt(X.geometry), Xe = st(Z.id, Z.type);
-          he.value = {
-            geometry: X.geometry,
-            geometryType: H,
-            layerId: Z.id,
-            properties: X.properties || {},
-            originalStyle: Xe
+      if (C.length === 0) return;
+      const F = je(C), B = l.layerList.map((R) => R.config), V = Le(F, B).map((R) => {
+        const K = R.layer.id.replace(/-outline$/, ""), W = Fe(K);
+        if (!W) return null;
+        const ae = Ke(W.id, R.properties || {});
+        return {
+          layerId: W.id,
+          layerTitle: W.title,
+          properties: R.properties || {},
+          geometry: ae || R.geometry,
+          popupConfig: W.popup
+        };
+      }).filter((R) => R !== null);
+      if (V.length === 0) return;
+      V.sort((R, K) => {
+        if (R.layerId !== K.layerId) return 0;
+        const W = R.popupConfig?.popupSortField;
+        if (!W) return 0;
+        const ae = R.properties[W], ce = K.properties[W];
+        if (ae == null || ce == null) return 0;
+        const Ct = R.popupConfig?.popupSortOrder !== "asc";
+        return ae < ce ? Ct ? 1 : -1 : ae > ce ? Ct ? -1 : 1 : 0;
+      }), se.value = V, ie.value = 0, Ae.value = [t.lngLat.lng, t.lngLat.lat];
+      const oe = V[0];
+      if (oe) {
+        const R = Fe(oe.layerId);
+        if (R) {
+          const K = M(oe.geometry), W = J(R.id, R.type);
+          y.value = {
+            geometry: oe.geometry,
+            geometryType: K,
+            layerId: R.id,
+            properties: oe.properties,
+            originalStyle: W
           };
         }
       }
     }
-    function te() {
-      oe.value = [], ye.value = null, J.value = 0, he.value = null;
+    function le() {
+      se.value = [], Ae.value = null, ie.value = 0, y.value = null;
     }
-    function be(i) {
-      if (oe.value.length === 0) return;
-      const u = i.target;
+    function Qe(t) {
+      if (se.value.length === 0) return;
+      const u = t.target;
       if (!(u.tagName === "INPUT" || u.tagName === "TEXTAREA" || u.isContentEditable))
-        switch (i.key) {
+        switch (t.key) {
           case "ArrowLeft":
           case "ArrowUp":
-            i.preventDefault(), Ze();
+            t.preventDefault(), de();
             break;
           case "ArrowRight":
           case "ArrowDown":
-            i.preventDefault(), le();
+            t.preventDefault(), Ee();
             break;
           case "Escape":
-            i.preventDefault(), te();
+            t.preventDefault(), le();
             break;
         }
     }
-    Ve(() => {
-      window.addEventListener("keydown", be);
-    }), Lt(() => {
-      window.removeEventListener("keydown", be);
+    et(() => {
+      window.addEventListener("keydown", Qe);
+    }), _t(() => {
+      window.removeEventListener("keydown", Qe);
     });
-    function le() {
-      const i = oe.value.length;
-      i <= 1 || (J.value = (J.value + 1) % i);
-    }
-    function Ze() {
-      const i = oe.value.length;
-      i <= 1 || (J.value = (J.value - 1 + i) % i);
-    }
-    const L = I(() => oe.value.length === 0 ? null : oe.value[J.value]), F = I(() => {
-      const i = L.value;
-      return !i || !i.popupConfig ? i?.layerTitle || "" : ve(i.popupConfig.title, i.properties);
-    }), re = I(() => {
-      const i = L.value;
-      if (!i) return "";
+    function Ee() {
+      const t = se.value.length;
+      t <= 1 || ie.value >= t - 1 || (ie.value = ie.value + 1);
+    }
+    function de() {
+      se.value.length <= 1 || ie.value <= 0 || (ie.value = ie.value - 1);
+    }
+    const Ie = z(() => se.value.length === 0 ? null : se.value[ie.value]), ge = z(() => {
+      const t = Ie.value;
+      return !t || !t.popupConfig ? t?.layerTitle || "" : ct(t.popupConfig.title, t.properties);
+    }), qe = z(() => {
+      const t = Ie.value;
+      if (!t) return "";
       let u = '<div class="popup-content">';
-      if (u += `<h3 class="popup-title">${F.value}</h3>`, i.popupConfig?.fields?.length) {
-        u += '<table class="popup-table">';
-        for (const r of i.popupConfig.fields) {
-          const x = Je(i.properties[r.field], r.format);
-          u += `<tr><th>${r.label}</th><td>${x}</td></tr>`;
+      if (u += `<h3 class="popup-title">${we(ge.value)}</h3>`, t.popupConfig?.fields?.length) {
+        u += `<table class="popup-table" aria-label="${we(ge.value)}">`;
+        for (const s of t.popupConfig.fields) {
+          const b = We(t.properties[s.field], s.format, t.popupConfig.showTime), C = s.label.toLowerCase(), F = C.includes("url") || C.includes("website"), B = b.startsWith("http://") || b.startsWith("https://") || b.startsWith("www.") || F && b.includes("."), Y = b.startsWith("http://") || b.startsWith("https://") ? b : `https://${b}`, V = B ? `<a href="${we(Y)}" target="_blank" rel="noopener noreferrer">${we(b)}</a>` : we(b);
+          u += `<tr><th scope="row">${we(s.label)}</th><td>${V}</td></tr>`;
         }
         u += "</table>";
-      } else
-        u += '<p class="popup-no-fields">No additional information available.</p>';
+      }
       return u += "</div>", u;
-    }), A = C({
+    }), Se = k({
       type: "FeatureCollection",
       features: []
-    }), Q = C({
+    }), ne = k({
       type: "FeatureCollection",
       features: []
-    }), Qe = {
+    }), Ze = k({
+      type: "FeatureCollection",
+      features: []
+    }), ut = {
       "circle-radius": ["get", "highlightRadius"],
       "circle-color": "#00FFFF",
       "circle-opacity": 0.8,
       "circle-stroke-width": 2,
       "circle-stroke-color": "#FFFFFF"
-    }, Ke = {
+    }, dt = {
       "line-width": ["get", "highlightWidth"],
       "line-color": "#00FFFF",
       "line-opacity": 0.9
-    }, he = C(null);
-    function rt(i) {
-      return i.type;
-    }
-    function st(i, u) {
-      const r = $e(i);
-      if (!r) return { radius: 5, width: 2 };
-      const x = r.paint || {};
+    }, Xe = {
+      "fill-color": "#808080",
+      "fill-opacity": 0.5
+    }, y = k(null);
+    function M(t) {
+      return t.type;
+    }
+    function J(t, u) {
+      const s = Fe(t);
+      if (!s) return { radius: 5, width: 2 };
+      const b = s.paint || {};
       if (u === "circle") {
-        const k = x["circle-radius"];
-        return typeof k == "number" ? { radius: k } : { radius: 5 };
+        const C = b["circle-radius"];
+        return typeof C == "number" ? { radius: C } : { radius: 5 };
       }
       if (u === "line" || u === "fill") {
-        const k = x["line-width"];
-        if (typeof k == "number")
-          return { width: k };
-        if (r.outlinePaint && r.outlinePaint["line-width"]) {
-          const z = r.outlinePaint["line-width"];
-          if (typeof z == "number")
-            return { width: z };
+        const C = b["line-width"];
+        if (typeof C == "number")
+          return { width: C };
+        if (s.outlinePaint && s.outlinePaint["line-width"]) {
+          const F = s.outlinePaint["line-width"];
+          if (typeof F == "number")
+            return { width: F };
         }
         return { width: 2 };
       }
       return { radius: 5, width: 2 };
     }
-    function ct(i) {
-      return !i || i.length === 0 ? [] : i[0] ?? [];
+    function U(t) {
+      return !t || t.length === 0 ? [] : t[0] ?? [];
     }
-    function $t(i) {
-      const { geometry: u, geometryType: r, originalStyle: x } = i;
-      if (r === "Point" || r === "MultiPoint") {
-        const z = (x.radius || 5) + 3;
+    function Q(t) {
+      const { geometry: u, geometryType: s, originalStyle: b } = t;
+      if (s === "Point" || s === "MultiPoint") {
+        const F = (b.radius || 5) + 3;
         return {
           type: "FeatureCollection",
-          features: [{
-            type: "Feature",
-            geometry: u,
-            properties: {
-              highlightRadius: z
+          features: [
+            {
+              type: "Feature",
+              geometry: u,
+              properties: {
+                highlightRadius: F
+              }
             }
-          }]
+          ]
         };
       }
-      if (r === "LineString" || r === "MultiLineString") {
-        const z = (x.width || 2) + 3;
+      if (s === "LineString" || s === "MultiLineString") {
+        const F = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: [{
-            type: "Feature",
-            geometry: u,
-            properties: {
-              highlightWidth: z
+          features: [
+            {
+              type: "Feature",
+              geometry: u,
+              properties: {
+                highlightWidth: F
+              }
             }
-          }]
+          ]
         };
       }
-      if (r === "Polygon") {
-        const k = u.coordinates, z = ct(k), V = (x.width || 2) + 3;
+      if (s === "Polygon") {
+        const C = u.coordinates, F = U(C), Y = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: [{
-            type: "Feature",
-            geometry: {
-              type: "LineString",
-              coordinates: z
-            },
-            properties: {
-              highlightWidth: V
+          features: [
+            {
+              type: "Feature",
+              geometry: {
+                type: "LineString",
+                coordinates: F
+              },
+              properties: {
+                highlightWidth: Y
+              }
             }
-          }]
+          ]
         };
       }
-      if (r === "MultiPolygon") {
-        const k = u.coordinates, R = (x.width || 2) + 3;
+      if (s === "MultiPolygon") {
+        const C = u.coordinates, B = (b.width || 2) + 3;
         return {
           type: "FeatureCollection",
-          features: k.map((N) => ({
+          features: C.map((V) => ({
             type: "Feature",
             geometry: {
               type: "LineString",
-              coordinates: ct(N)
+              coordinates: U(V)
             },
             properties: {
-              highlightWidth: R
+              highlightWidth: B
             }
           }))
         };
@@ -592,185 +536,192 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
         features: []
       };
     }
-    function xt(i) {
-      if (!i) {
-        Pt();
+    function Ce(t) {
+      const { geometry: u, geometryType: s } = t;
+      return s === "Polygon" || s === "MultiPolygon" ? {
+        type: "FeatureCollection",
+        features: [{ type: "Feature", geometry: u, properties: {} }]
+      } : { type: "FeatureCollection", features: [] };
+    }
+    function Ve(t) {
+      if (!t) {
+        Ut();
         return;
       }
-      const u = $t(i);
-      i.geometryType === "Point" || i.geometryType === "MultiPoint" ? (A.value = u, Q.value = { type: "FeatureCollection", features: [] }) : (Q.value = u, A.value = { type: "FeatureCollection", features: [] });
-    }
-    function Pt() {
-      A.value = { type: "FeatureCollection", features: [] }, Q.value = { type: "FeatureCollection", features: [] };
-    }
-    Pe(he, (i) => {
-      xt(i);
-    }), Pe(
-      () => t.visibleLayers,
-      (i) => {
-        he.value && !i.has(he.value.layerId) && (he.value = null, te());
+      const u = Q(t);
+      t.geometryType === "Point" || t.geometryType === "MultiPoint" ? (Se.value = u, ne.value = { type: "FeatureCollection", features: [] }, Ze.value = { type: "FeatureCollection", features: [] }) : (ne.value = u, Se.value = { type: "FeatureCollection", features: [] }, Ze.value = Ce(t));
+    }
+    function Ut() {
+      Se.value = { type: "FeatureCollection", features: [] }, ne.value = { type: "FeatureCollection", features: [] }, Ze.value = { type: "FeatureCollection", features: [] };
+    }
+    Oe(y, (t) => {
+      Ve(t);
+    }), Oe(
+      () => l.visibleLayers,
+      (t) => {
+        y.value && !t.has(y.value.layerId) && (y.value = null, le());
       },
       { deep: !0 }
-    ), Pe(J, () => {
-      const i = L.value;
-      if (!i) {
-        he.value = null;
+    ), Oe(ie, () => {
+      const t = Ie.value;
+      if (!t) {
+        y.value = null;
         return;
       }
-      const u = l.value;
-      if (!u || !ye.value) return;
-      const r = [];
-      t.layerList.forEach((R) => {
-        const V = R.config;
-        t.visibleLayers.has(V.id) && (r.push(V.id), V.outlinePaint && r.push(`${V.id}-outline`));
-      });
-      const x = u.project(ye.value), z = u.queryRenderedFeatures(x, {
-        layers: r
-      }).find((R) => R.layer.id.replace(/-outline$/, "") === i.layerId && JSON.stringify(R.properties) === JSON.stringify(i.properties));
-      if (z && z.geometry) {
-        const R = $e(i.layerId);
-        if (R) {
-          const V = rt(z.geometry), N = st(R.id, R.type);
-          he.value = {
-            geometry: z.geometry,
-            geometryType: V,
-            layerId: R.id,
-            properties: z.properties || {},
-            originalStyle: N
-          };
-        }
+      const u = Fe(t.layerId);
+      if (u) {
+        const s = M(t.geometry), b = J(u.id, u.type);
+        y.value = {
+          geometry: t.geometry,
+          geometryType: s,
+          layerId: u.id,
+          properties: t.properties,
+          originalStyle: b
+        };
       }
     });
-    const ut = C(null);
-    function Mt(i) {
-      const [u, r] = i.geometry.coordinates;
-      ut.value = [u, r];
+    const St = k(null);
+    function Wt(t) {
+      const [u, s] = t.geometry.coordinates;
+      St.value = [u, s];
     }
-    return (i, u) => (p(), w("div", Qt, [
-      K(_(It), {
+    return (t, u) => (m(), $("div", ao, [
+      H(d(Xt), {
         ref_key: "mapRef",
-        ref: a,
-        zoom: t.initialZoom,
-        center: t.initialCenter,
-        "navigation-controls": { position: t.navigationControlPosition },
-        "geolocation-control": { position: t.geolocationControlPosition },
-        "basemap-change-controls": { toggle: !0, dropdown: !0, position: t.basemapControlPosition },
-        "map-search-control": { position: t.searchControlPosition },
+        ref: r,
+        zoom: l.initialZoom,
+        center: l.initialCenter,
+        "navigation-controls": { position: l.navigationControlPosition },
+        "geolocation-control": { position: l.geolocationControlPosition },
+        "basemap-change-controls": { toggle: !0, dropdown: !0, position: l.basemapControlPosition },
+        "map-search-control": { position: l.searchControlPosition },
         "enable-cyclomedia": !0,
-        "cyclomedia-config": t.cyclomediaConfig,
-        "cyclomedia-button-position": t.cyclomediaButtonPosition,
+        "cyclomedia-config": l.cyclomediaConfig,
+        "cyclomedia-button-position": l.cyclomediaButtonPosition,
         "enable-pictometry": !0,
-        "pictometry-credentials": t.pictometryCredentials,
-        "pictometry-button-position": t.pictometryButtonPosition,
+        "pictometry-credentials": l.pictometryCredentials,
+        "pictometry-button-position": l.pictometryButtonPosition,
         "tool-panel-layout": "vertical",
         "tool-panel-split-ratio": 50,
-        onZoom: h,
-        onClick: te,
-        onMoveend: S,
-        onLoad: g,
-        onSearchResult: Mt
+        onZoom: w,
+        onClick: le,
+        onMoveend: L,
+        onLoad: S,
+        onSearchResult: Wt
       }, {
-        default: Ee(() => [
-          t.drawControlPosition !== null ? (p(), Y(_(Rt), {
+        default: Ge(() => [
+          l.drawControlPosition !== null ? (m(), q(d(Yt), {
             key: 0,
-            position: t.drawControlPosition
-          }, null, 8, ["position"])) : O("", !0),
-          (p(!0), w(ie, null, se(qe.value, (r) => (p(), Y(_(pt), {
-            key: "tiled-" + r.id,
-            id: "tiled-" + r.id,
-            source: je(r),
-            paint: { "raster-opacity": Se(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+            position: l.drawControlPosition
+          }, null, 8, ["position"])) : A("", !0),
+          (m(!0), $(ue, null, ve(nt.value, (s) => (m(), q(d(Mt), {
+            id: "tiled-" + s.id,
+            key: "tiled-" + s.id,
+            source: he(s),
+            paint: { "raster-opacity": N(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (p(!0), w(ie, null, se(Ge.value, (r) => (p(), Y(_(pt), {
-            key: "dynamic-" + r.id,
-            id: "dynamic-" + r.id,
-            source: Ce(r),
-            paint: { "raster-opacity": Se(r.id) },
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom
+          (m(!0), $(ue, null, ve(rt.value, (s) => (m(), q(d(Mt), {
+            id: "dynamic-" + s.id,
+            key: "dynamic-" + s.id,
+            source: _e(s),
+            paint: { "raster-opacity": N(s.id) },
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (p(!0), w(ie, null, se(T.value, (r) => (p(), Y(_(yt), {
-            key: r.id,
-            id: r.id,
-            source: fe(r),
-            paint: pe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (m(!0), $(ue, null, ve(X.value, (s) => (m(), q(d(Pt), {
+            id: s.id,
+            key: s.id,
+            source: Me(s),
+            paint: Pe(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: xe
+            onClick: Be
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (p(!0), w(ie, null, se(B.value, (r) => (p(), Y(_(Dt), {
-            key: r.id,
-            id: r.id,
-            source: fe(r),
-            paint: pe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (m(!0), $(ue, null, ve(T.value, (s) => (m(), q(d(Tt), {
+            id: s.id,
+            key: s.id,
+            source: Me(s),
+            paint: Pe(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-circles",
-            onClick: xe
+            onClick: Be
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (p(!0), w(ie, null, se(q.value, (r) => (p(), Y(_(Ye), {
-            key: r.id + "-outline",
-            id: r.id + "-outline",
-            source: fe(r),
-            paint: He(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (m(!0), $(ue, null, ve(I.value, (s) => (m(), q(d(ft), {
+            id: s.id + "-outline",
+            key: s.id + "-outline",
+            source: Me(s),
+            paint: st(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: xe
+            onClick: Be
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          (p(!0), w(ie, null, se(ce.value, (r) => (p(), Y(_(Ye), {
-            key: r.id,
-            id: r.id,
-            source: fe(r),
-            paint: pe(r),
-            minzoom: r.minZoom,
-            maxzoom: r.maxZoom,
+          (m(!0), $(ue, null, ve(_.value, (s) => (m(), q(d(ft), {
+            id: s.id,
+            key: s.id,
+            source: Me(s),
+            paint: Pe(s),
+            minzoom: s.minZoom,
+            maxzoom: s.maxZoom,
             "before-id": "highlight-lines",
-            onClick: xe
+            onClick: Be
           }, null, 8, ["id", "source", "paint", "minzoom", "maxzoom"]))), 128)),
-          K(_(yt), {
-            key: "highlight-circles-layer",
+          H(d(Pt), {
             id: "highlight-circles",
-            source: { type: "geojson", data: A.value },
-            paint: Qe
+            key: "highlight-circles-layer",
+            source: { type: "geojson", data: Se.value },
+            paint: ut
           }, null, 8, ["source"]),
-          K(_(Ye), {
-            key: "highlight-lines-layer",
+          H(d(Tt), {
+            id: "highlight-fill",
+            key: "highlight-fill-layer",
+            source: { type: "geojson", data: Ze.value },
+            paint: Xe
+          }, null, 8, ["source"]),
+          H(d(ft), {
             id: "highlight-lines",
-            source: { type: "geojson", data: Q.value },
-            paint: Ke
+            key: "highlight-lines-layer",
+            source: { type: "geojson", data: ne.value },
+            paint: dt
           }, null, 8, ["source"]),
-          K(_(Zt), {
-            "lng-lat": ut.value,
+          H(d(eo), {
+            "lng-lat": St.value,
             color: "#2176d2"
           }, null, 8, ["lng-lat"]),
-          L.value && ye.value ? (p(), Y(_(Bt), {
+          Ie.value && Ae.value ? (m(), q(d(to), {
             key: 1,
-            "lng-lat": ye.value,
-            html: re.value,
+            "lng-lat": Ae.value,
+            html: qe.value,
             "close-on-click": !1,
-            "show-navigation": oe.value.length > 1,
-            "current-feature-index": J.value,
-            "total-features": oe.value.length,
-            "layer-name": L.value.layerTitle,
-            onClose: te,
-            onNext: le,
-            onPrevious: Ze
-          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : O("", !0)
+            offset: [0, -15],
+            "show-navigation": se.value.length > 1,
+            "current-feature-index": ie.value,
+            "total-features": se.value.length,
+            "layer-name": Ie.value.layerTitle,
+            onClose: le,
+            onNext: Ee,
+            onPrevious: de
+          }, null, 8, ["lng-lat", "html", "show-navigation", "current-feature-index", "total-features", "layer-name"])) : A("", !0)
         ]),
         _: 1
       }, 8, ["zoom", "center", "navigation-controls", "geolocation-control", "basemap-change-controls", "map-search-control", "cyclomedia-config", "cyclomedia-button-position", "pictometry-credentials", "pictometry-button-position"])
     ]));
   }
-}), Oe = (e, n) => {
-  const t = e.__vccOpts || e;
-  for (const [o, a] of n)
-    t[o] = a;
-  return t;
-}, Xt = /* @__PURE__ */ Oe(Kt, [["__scopeId", "data-v-c7524a9f"]]), Yt = ["disabled"], eo = /* @__PURE__ */ we({
+}), $e = (e, i) => {
+  const l = e.__vccOpts || e;
+  for (const [o, r] of i)
+    l[o] = r;
+  return l;
+}, lo = /* @__PURE__ */ $e(io, [["__scopeId", "data-v-92158e58"]]);
+function At(e) {
+  let i = e.split("?")[0] || e;
+  return i = i.replace(/\/query$/, ""), i = i.replace(/\/$/, ""), i.toLowerCase();
+}
+const no = ["disabled"], ro = /* @__PURE__ */ ye({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -792,80 +743,79 @@ const Qt = { class: "map-panel" }, Kt = /* @__PURE__ */ we({
     svgRaw: {}
   },
   setup(e) {
-    const n = e, t = (c) => "href" in c && c.href !== void 0 || "to" in c && c.to !== void 0, o = I(() => ot(
+    const i = e, l = (c) => "href" in c && c.href !== void 0 || "to" in c && c.to !== void 0, o = z(() => mt(
       "phila-button",
-      `phila-button--${n.variant}`,
-      n.size && `is-${n.size}`,
-      n.iconOnly && "icon-button",
-      n.iconOnly && n.variant === "standard" && "icon-button--standard",
-      n.className
-    )), a = I(() => t(n) ? "to" in n && n.to !== void 0 ? {
-      to: n.to,
-      disabled: n.disabled,
+      `phila-button--${i.variant}`,
+      i.size && `is-${i.size}`,
+      i.iconOnly && "icon-button",
+      i.iconOnly && i.variant === "standard" && "icon-button--standard",
+      i.className
+    )), r = z(() => l(i) ? "to" in i && i.to !== void 0 ? {
+      to: i.to,
+      disabled: i.disabled,
       className: o.value
     } : {
-      href: n.href,
-      target: n.target,
-      rel: n.rel,
-      disabled: n.disabled,
+      href: i.href,
+      target: i.target,
+      rel: i.rel,
+      disabled: i.disabled,
       className: o.value
-    } : {}), l = I(
+    } : {}), n = z(
       () => ({
-        iconDefinition: n.iconDefinition,
-        iconClass: n.iconClass,
-        src: n.src,
-        iconRight: n.iconRight,
-        iconOnly: n.iconOnly,
-        text: n.text,
-        size: n.size,
-        shadow: n.iconOnly && n.variant === "standard"
+        iconDefinition: i.iconDefinition,
+        iconClass: i.iconClass,
+        src: i.src,
+        iconRight: i.iconRight,
+        iconOnly: i.iconOnly,
+        text: i.text,
+        size: i.size
       })
     );
-    return (c, h) => t(n) ? (p(), Y(_(Vt), tt({ key: 0 }, { ...a.value, ...c.$attrs }, { role: "button" }), {
-      default: Ee(() => [
-        K(_(gt), dt(ft(l.value)), {
-          default: Ee(() => [
-            ae(c.$slots, "default", {}, () => [
-              me(j(n.text), 1)
+    return (c, w) => l(i) ? (m(), q(d(oo), yt({ key: 0 }, { ...r.value, ...c.$attrs }, { role: "button" }), {
+      default: Ge(() => [
+        H(d(Ft), kt(xt(n.value)), {
+          default: Ge(() => [
+            pe(c.$slots, "default", {}, () => [
+              xe(G(i.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (p(), w("button", tt({
+    }, 16)) : (m(), $("button", yt({
       key: 1,
       type: "button",
-      disabled: n.disabled,
+      disabled: i.disabled,
       class: o.value
     }, c.$attrs), [
-      K(_(gt), dt(ft(l.value)), {
-        default: Ee(() => [
-          ae(c.$slots, "default", {}, () => [
-            me(j(n.text), 1)
+      H(d(Ft), kt(xt(n.value)), {
+        default: Ge(() => [
+          pe(c.$slots, "default", {}, () => [
+            xe(G(i.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, Yt));
+    ], 16, no));
   }
 });
-var to = {
+var so = {
   prefix: "fas",
   iconName: "circle-exclamation",
   icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
-}, oo = to, no = {
+}, co = so, uo = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, io = no;
-const ao = ["for"], lo = { class: "state-layer" }, ro = { class: "content" }, so = { class: "input-text-container" }, co = ["id", "placeholder"], uo = {
+}, fo = uo;
+const po = ["for"], yo = { class: "state-layer" }, mo = { class: "content" }, ho = { class: "input-text-container" }, go = ["id", "placeholder", "aria-label"], vo = {
   key: 1,
   class: "has-text-body-small phila-supporting-text"
-}, fo = {
+}, bo = {
   key: 2,
   class: "has-text-body-small phila-error-text"
-}, po = /* @__PURE__ */ we({
+}, wo = /* @__PURE__ */ ye({
   inheritAttrs: !1,
   __name: "TextField",
   props: {
@@ -882,137 +832,243 @@ const ao = ["for"], lo = { class: "state-layer" }, ro = { class: "content" }, so
     } }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const t = Ft(), o = e, a = I(() => typeof o.error == "string" ? o.error : o.error[0]), l = zt(o, "id"), c = n, h = C(""), f = I({
-      get: () => o.modelValue !== void 0 ? o.modelValue : h.value,
-      set: (d) => {
-        c("update:modelValue", d), h.value = d;
+  setup(e, { emit: i }) {
+    const l = jt(), o = e, r = z(() => typeof o.error == "string" ? o.error : o.error[0]), n = qt(o, "id"), c = i, w = k(""), p = z({
+      get: () => o.modelValue !== void 0 ? o.modelValue : w.value,
+      set: (f) => {
+        c("update:modelValue", f), w.value = f;
       }
-    }), M = I(() => {
-      const d = ["default-class"];
-      return t.disabled != null && d.push("phila-input--disabled"), a.value && d.push("phila-input--error"), t.required != null && d.push("phila-input--required"), ot(...d);
-    }), m = I(() => {
-      const d = [];
-      return f.value !== "" && d.push("phila-text-field--filled"), o.className && d.push(o.className), ot(...d);
-    }), v = C(null), s = (d) => {
-      d.target.closest("button") || v.value?.focus();
+    }), x = z(() => {
+      const f = ["default-class"];
+      return l.disabled != null && f.push("phila-input--disabled"), r.value && f.push("phila-input--error"), l.required != null && f.push("phila-input--required"), mt(...f);
+    }), h = z(() => {
+      const f = [];
+      return p.value !== "" && f.push("phila-text-field--filled"), o.className && f.push(o.className), mt(...f);
+    }), g = z(() => {
+      if (!(o.label || l["aria-label"]))
+        return o.placeholder || void 0;
+    }), a = k(null), v = (f) => {
+      f.target.closest("button") || a.value?.focus();
     };
-    return (d, $) => (p(), w("div", {
-      class: ne(["phila-input", M.value])
+    return (f, L) => (m(), $("div", {
+      class: re(["phila-input", x.value])
     }, [
-      o.label ? (p(), w("label", {
+      o.label ? (m(), $("label", {
         key: 0,
-        for: l.value,
+        for: n.value,
         class: "has-text-label-small phila-label"
-      }, j(o.label), 9, ao)) : O("", !0),
+      }, G(o.label), 9, po)) : A("", !0),
       P("div", {
-        class: ne(["phila-text-field", m.value]),
-        onClick: s
+        class: re(["phila-text-field", h.value]),
+        onClick: v
       }, [
-        P("div", lo, [
-          o.leadingIcon ? (p(), Y(_(ue), {
+        P("div", yo, [
+          o.leadingIcon ? (m(), q(d(ke), {
             key: 0,
             "icon-class": o.leadingIcon,
             inline: "",
-            decorative: "",
-            shadow: ""
-          }, null, 8, ["icon-class"])) : O("", !0),
-          P("div", ro, [
-            P("div", so, [
-              St(P("input", tt({
-                id: l.value,
+            decorative: ""
+          }, null, 8, ["icon-class"])) : A("", !0),
+          P("div", mo, [
+            P("div", ho, [
+              Rt(P("input", yt({
+                id: n.value,
                 ref_key: "inputRef",
-                ref: v,
-                "onUpdate:modelValue": $[0] || ($[0] = (y) => f.value = y),
+                ref: a,
+                "onUpdate:modelValue": L[0] || (L[0] = (S) => p.value = S),
                 class: "phila-text-field-input has-text-body-default",
-                placeholder: o.placeholder
-              }, _(t)), null, 16, co), [
-                [Tt, f.value]
+                placeholder: o.placeholder,
+                "aria-label": g.value
+              }, d(l)), null, 16, go), [
+                [Gt, p.value]
               ])
             ])
           ]),
-          f.value != "" ? (p(), Y(_(eo), {
+          p.value != "" ? (m(), q(d(ro), {
             key: 1,
             variant: "standard",
             size: "small",
             "icon-only": "",
-            "icon-definition": _(io),
-            onClick: $[1] || ($[1] = (y) => f.value = "")
-          }, null, 8, ["icon-definition"])) : O("", !0),
-          o.trailingIcon ? (p(), Y(_(ue), {
+            "icon-definition": d(fo),
+            onClick: L[1] || (L[1] = (S) => p.value = "")
+          }, null, 8, ["icon-definition"])) : A("", !0),
+          o.trailingIcon ? (m(), q(d(ke), {
             key: 2,
             size: "small",
             "icon-class": o.trailingIcon,
             inline: "",
-            decorative: "",
-            shadow: ""
-          }, null, 8, ["icon-class"])) : O("", !0),
-          ae(d.$slots, "trailing-action")
+            decorative: ""
+          }, null, 8, ["icon-class"])) : A("", !0),
+          pe(f.$slots, "trailing-action")
         ])
       ], 2),
-      o.supportingText ? (p(), w("div", uo, j(o.supportingText), 1)) : O("", !0),
-      a.value ? (p(), w("div", fo, [
-        K(_(ue), {
-          "icon-definition": _(oo),
+      o.supportingText ? (m(), $("div", vo, G(o.supportingText), 1)) : A("", !0),
+      r.value ? (m(), $("div", bo, [
+        H(d(ke), {
+          "icon-definition": d(co),
           size: "small",
           inline: "",
           decorative: ""
         }, null, 8, ["icon-definition"]),
-        me(" " + j(a.value), 1)
-      ])) : O("", !0)
+        xe(" " + G(r.value), 1)
+      ])) : A("", !0)
     ], 2));
   }
 });
-var yo = {
+var Lo = {
   prefix: "fas",
   iconName: "filter",
   icon: [512, 512, [], "f0b0", "M32 64C19.1 64 7.4 71.8 2.4 83.8S.2 109.5 9.4 118.6L192 301.3 192 416c0 8.5 3.4 16.6 9.4 22.6l64 64c9.2 9.2 22.9 11.9 34.9 6.9S320 492.9 320 480l0-178.7 182.6-182.6c9.2-9.2 11.9-22.9 6.9-34.9S492.9 64 480 64L32 64z"]
-}, go = {
+}, So = {
   prefix: "fas",
   iconName: "caret-right",
   icon: [256, 512, [], "f0da", "M249.3 235.8c10.2 12.6 9.5 31.1-2.2 42.8l-128 128c-9.2 9.2-22.9 11.9-34.9 6.9S64.5 396.9 64.5 384l0-256c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l128 128 2.2 2.4z"]
-}, ho = {
+}, Co = {
   prefix: "fas",
   iconName: "caret-left",
   icon: [256, 512, [], "f0d9", "M7.7 235.8c-10.3 12.6-9.5 31.1 2.2 42.8l128 128c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-256c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-128 128-2.2 2.4z"]
-}, mt = {
+}, Et = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, mo = {
+}, ko = {
   prefix: "fas",
   iconName: "bars",
   icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
-}, vo = {
+}, xo = {
   prefix: "fas",
   iconName: "circle-info",
   icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
 };
-const bo = { class: "layer-panel" }, wo = {
+const $o = {
+  key: 0,
+  class: "loading-indicator",
+  role: "status"
+}, Mo = ["aria-label"], Po = {
+  key: 2,
+  class: "zoom-indicator"
+}, To = /* @__PURE__ */ ye({
+  __name: "LayerStatusIndicators",
+  props: {
+    loading: { type: Boolean },
+    error: {},
+    unavailable: { type: Boolean }
+  },
+  setup(e) {
+    return (i, l) => (m(), $(ue, null, [
+      e.loading && !e.unavailable ? (m(), $("span", $o, " Loading... ")) : A("", !0),
+      e.error ? (m(), $("span", {
+        key: 1,
+        class: "error-indicator",
+        "aria-label": e.error,
+        role: "status"
+      }, " Error ", 8, Mo)) : A("", !0),
+      e.unavailable ? (m(), $("span", Po, " (zoom in) ")) : A("", !0)
+    ], 64));
+  }
+}), tt = /* @__PURE__ */ $e(To, [["__scopeId", "data-v-19b1b402"]]), Fo = { class: "opacity-control" }, Eo = ["for"], Io = ["id", "value", "aria-label"], Oo = /* @__PURE__ */ ye({
+  __name: "LayerOpacitySlider",
+  props: {
+    layerId: {},
+    layerName: {},
+    opacity: {}
+  },
+  emits: ["update:opacity"],
+  setup(e, { emit: i }) {
+    const l = i;
+    function o(r) {
+      const n = r.target;
+      l("update:opacity", parseFloat(n.value));
+    }
+    return (r, n) => (m(), $("div", Fo, [
+      P("label", {
+        class: "opacity-label",
+        for: "opacity-" + e.layerId
+      }, " Opacity: " + G(Math.round(e.opacity * 100)) + "% ", 9, Eo),
+      P("input", {
+        id: "opacity-" + e.layerId,
+        type: "range",
+        min: "0",
+        max: "1",
+        step: "0.05",
+        value: e.opacity,
+        "aria-label": "Opacity for " + e.layerName,
+        class: "opacity-slider",
+        onInput: o
+      }, null, 40, Io)
+    ]));
+  }
+}), gt = /* @__PURE__ */ $e(Oo, [["__scopeId", "data-v-1a025f6a"]]), zo = ["aria-label"], Do = { class: "legend-label" }, _o = /* @__PURE__ */ ye({
+  __name: "LayerLegend",
+  props: {
+    items: {},
+    label: {}
+  },
+  setup(e) {
+    return (i, l) => (m(), $("ul", {
+      class: "layer-legend",
+      "aria-label": e.label
+    }, [
+      (m(!0), $(ue, null, ve(e.items, (o, r) => (m(), $("li", {
+        key: r,
+        class: "legend-item"
+      }, [
+        o.type === "circle" ? (m(), $("span", {
+          key: 0,
+          class: "legend-symbol legend-circle",
+          style: fe({ backgroundColor: o.color }),
+          "aria-hidden": "true"
+        }, null, 4)) : o.type === "line" ? (m(), $("span", {
+          key: 1,
+          class: "legend-symbol legend-line",
+          style: fe({
+            backgroundColor: o.color,
+            height: `${o.width || 2}px`
+          }),
+          "aria-hidden": "true"
+        }, null, 4)) : o.type === "fill" ? (m(), $("span", {
+          key: 2,
+          class: "legend-symbol legend-fill",
+          style: fe({ backgroundColor: o.color }),
+          "aria-hidden": "true"
+        }, null, 4)) : A("", !0),
+        P("span", Do, G(o.label), 1)
+      ]))), 128))
+    ], 8, zo));
+  }
+}), vt = /* @__PURE__ */ $e(_o, [["__scopeId", "data-v-62e210e3"]]);
+function bt(e) {
+  function i(c) {
+    return e().visibleLayerIds.has(c);
+  }
+  function l(c) {
+    return e().layerOpacities[c] ?? 1;
+  }
+  function o(c) {
+    return e().loadingLayerIds.has(c);
+  }
+  function r(c) {
+    return e().layerErrors[c] || null;
+  }
+  function n(c) {
+    const w = e().currentZoom, p = c.minZoom, x = c.maxZoom;
+    return !(p !== void 0 && w < p || x !== void 0 && w > x);
+  }
+  return { isVisible: i, getLayerOpacity: l, isLayerLoading: o, getLayerError: r, isLayerAvailableAtZoom: n };
+}
+const Ro = { class: "layer-panel" }, Ao = {
   key: 0,
   class: "search-box"
-}, Lo = {
+}, Bo = {
   key: 1,
   class: "topics-container"
-}, So = { class: "layer-row" }, Co = ["href"], ko = {
+}, Zo = { class: "layer-row" }, Vo = ["href", "aria-label"], No = {
   key: 1,
   class: "metadata-placeholder"
-}, $o = ["checked", "disabled", "onChange"], xo = { class: "layer-title" }, Po = {
-  key: 0,
-  class: "loading-indicator"
-}, Mo = ["title"], Fo = {
-  key: 2,
-  class: "zoom-indicator"
-}, zo = {
-  key: 0,
-  class: "opacity-control"
-}, To = { class: "opacity-label" }, Eo = ["value", "onInput"], _o = {
-  key: 1,
-  class: "layer-legend"
-}, Oo = { class: "legend-label" }, Io = {
+}, Uo = ["checked", "disabled", "onChange"], Wo = { class: "layer-title" }, jo = {
   key: 0,
   class: "no-results"
-}, Ro = /* @__PURE__ */ we({
+}, qo = /* @__PURE__ */ ye({
   __name: "LayerPanel",
   props: {
     layerList: {},
@@ -1030,62 +1086,41 @@ const bo = { class: "layer-panel" }, wo = {
     searchPlaceholder: { default: "Filter layers..." }
   },
   emits: ["toggleLayer", "setOpacity", "updateSearch"],
-  setup(e, { emit: n }) {
-    const t = e, o = n, a = I(() => {
-      if (!t.searchQuery.trim())
-        return t.layerList;
-      const S = t.searchQuery.toLowerCase();
-      return t.layerList.filter(
-        (g) => g.config.title.toLowerCase().includes(S)
-      );
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = z(() => {
+      if (!l.searchQuery.trim())
+        return l.layerList;
+      const f = l.searchQuery.toLowerCase();
+      return l.layerList.filter((L) => L.config.title.toLowerCase().includes(f));
     });
-    function l(S) {
-      let g = S.split("?")[0] || S;
-      return g = g.replace(/\/query$/, ""), g = g.replace(/\/$/, ""), g.toLowerCase();
-    }
-    function c(S) {
-      const g = l(S);
-      return t.layerMetadata[g] || null;
-    }
-    const h = I(() => t.layerList.some((S) => c(S.config.url)));
-    function f(S) {
-      return t.visibleLayers.has(S);
-    }
-    function M(S) {
-      return t.layerOpacities[S] ?? 1;
-    }
-    function m(S) {
-      return t.loadingLayers.has(S);
-    }
-    function v(S) {
-      return t.layerErrors[S] || null;
-    }
-    function s(S) {
-      const g = t.currentZoom, b = S.minZoom, E = S.maxZoom;
-      return !(b !== void 0 && g < b || E !== void 0 && g > E);
-    }
-    const d = I({
-      get: () => t.searchQuery,
-      set: (S) => o("updateSearch", S)
+    function n(f) {
+      const L = At(f);
+      return l.layerMetadata[L] || null;
+    }
+    const c = z(() => l.layerList.some((f) => n(f.config.url))), { isVisible: w, getLayerOpacity: p, isLayerLoading: x, getLayerError: h, isLayerAvailableAtZoom: g } = bt(() => ({
+      visibleLayerIds: l.visibleLayers,
+      layerOpacities: l.layerOpacities,
+      loadingLayerIds: l.loadingLayers,
+      layerErrors: l.layerErrors,
+      currentZoom: l.currentZoom
+    })), a = z({
+      get: () => l.searchQuery,
+      set: (f) => o("updateSearch", f)
     });
-    function $(S) {
-      o("toggleLayer", S);
-    }
-    function y(S, g) {
-      const b = g.target, E = parseFloat(b.value);
-      o("setOpacity", S, E);
-    }
-    return (S, g) => (p(), w("aside", bo, [
-      e.showSearch ? (p(), w("div", wo, [
-        K(_(po), {
-          modelValue: d.value,
-          "onUpdate:modelValue": g[0] || (g[0] = (b) => d.value = b),
+    function v(f) {
+      o("toggleLayer", f);
+    }
+    return (f, L) => (m(), $("div", Ro, [
+      e.showSearch ? (m(), $("div", Ao, [
+        H(d(wo), {
+          modelValue: a.value,
+          "onUpdate:modelValue": L[0] || (L[0] = (S) => a.value = S),
           placeholder: e.searchPlaceholder,
           "class-name": "layer-search-field"
         }, {
-          "trailing-action": Ee(() => [
-            K(_(ue), {
-              "icon-definition": _(yo),
+          "trailing-action": Ge(() => [
+            H(d(ke), {
+              "icon-definition": d(Lo),
               size: "small",
               inline: "",
               decorative: ""
@@ -1093,128 +1128,155 @@ const bo = { class: "layer-panel" }, wo = {
           ]),
           _: 1
         }, 8, ["modelValue", "placeholder"])
-      ])) : O("", !0),
-      e.mode === "topics" ? (p(), w("div", Lo, [
-        ae(S.$slots, "topics", {}, () => [
-          g[2] || (g[2] = P("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
+      ])) : A("", !0),
+      e.mode === "topics" ? (m(), $("div", Bo, [
+        pe(f.$slots, "topics", {}, () => [
+          L[2] || (L[2] = P("div", { class: "no-topics" }, ' No topic components provided. Use the "topics" slot to add TopicAccordion components. ', -1))
         ], !0)
-      ])) : (p(), w("div", {
+      ])) : (m(), $("div", {
         key: 2,
-        class: ne(["layer-list", { "has-metadata": h.value }])
+        class: re(["layer-list", { "has-metadata": c.value }])
       }, [
-        (p(!0), w(ie, null, se(a.value, (b) => (p(), w("div", {
-          key: b.config.id,
+        (m(!0), $(ue, null, ve(r.value, (S) => (m(), $("div", {
+          key: S.config.id,
           class: "layer-item"
         }, [
-          P("div", So, [
-            c(b.config.url) ? (p(), w("a", {
+          P("div", Zo, [
+            n(S.config.url) ? (m(), $("a", {
               key: 0,
-              href: c(b.config.url) || "",
+              href: n(S.config.url) || "",
               target: "_blank",
               rel: "noopener noreferrer",
               class: "metadata-link",
-              title: "View metadata",
-              onClick: g[1] || (g[1] = Et(() => {
+              "aria-label": "View metadata for " + S.config.title,
+              onClick: L[1] || (L[1] = Ht(() => {
               }, ["stop"]))
             }, [
-              K(_(ue), {
-                "icon-definition": _(vo),
+              H(d(ke), {
+                "icon-definition": d(xo),
                 size: "small",
                 inline: "",
                 decorative: ""
               }, null, 8, ["icon-definition"])
-            ], 8, Co)) : h.value ? (p(), w("span", ko)) : O("", !0),
+            ], 8, Vo)) : c.value ? (m(), $("span", No)) : A("", !0),
             P("label", {
-              class: ne(["layer-checkbox", {
-                "layer-unavailable": !s(b.config),
-                "layer-error": v(b.config.id)
+              class: re(["layer-checkbox", {
+                "layer-unavailable": !d(g)(S.config),
+                "layer-error": d(h)(S.config.id)
               }])
             }, [
               P("input", {
                 type: "checkbox",
-                checked: f(b.config.id),
-                disabled: !s(b.config),
-                onChange: (E) => $(b.config.id)
-              }, null, 40, $o),
-              P("span", xo, [
-                me(j(b.config.title) + " ", 1),
-                m(b.config.id) ? (p(), w("span", Po, " Loading... ")) : O("", !0),
-                v(b.config.id) ? (p(), w("span", {
-                  key: 1,
-                  class: "error-indicator",
-                  title: v(b.config.id) || ""
-                }, " Error ", 8, Mo)) : O("", !0),
-                s(b.config) ? O("", !0) : (p(), w("span", Fo, " (zoom in) "))
+                checked: d(w)(S.config.id),
+                disabled: !d(g)(S.config),
+                onChange: (E) => v(S.config.id)
+              }, null, 40, Uo),
+              P("span", Wo, [
+                xe(G(S.config.title) + " ", 1),
+                H(tt, {
+                  loading: d(x)(S.config.id),
+                  error: d(h)(S.config.id),
+                  unavailable: !d(g)(S.config)
+                }, null, 8, ["loading", "error", "unavailable"])
               ])
             ], 2)
           ]),
-          e.showOpacity && f(b.config.id) ? (p(), w("div", zo, [
-            P("label", To, " Opacity: " + j(Math.round(M(b.config.id) * 100)) + "% ", 1),
-            P("input", {
-              type: "range",
-              min: "0",
-              max: "1",
-              step: "0.05",
-              value: M(b.config.id),
-              class: "opacity-slider",
-              onInput: (E) => y(b.config.id, E)
-            }, null, 40, Eo)
-          ])) : O("", !0),
-          e.showLegend && f(b.config.id) && b.config.legend?.length ? (p(), w("ul", _o, [
-            (p(!0), w(ie, null, se(b.config.legend, (E, T) => (p(), w("li", {
-              key: T,
-              class: "legend-item"
-            }, [
-              E.type === "circle" ? (p(), w("span", {
-                key: 0,
-                class: "legend-symbol legend-circle",
-                style: ee({ backgroundColor: E.color })
-              }, null, 4)) : E.type === "line" ? (p(), w("span", {
-                key: 1,
-                class: "legend-symbol legend-line",
-                style: ee({
-                  backgroundColor: E.color,
-                  height: `${E.width || 2}px`
-                })
-              }, null, 4)) : E.type === "fill" ? (p(), w("span", {
-                key: 2,
-                class: "legend-symbol legend-fill",
-                style: ee({ backgroundColor: E.color })
-              }, null, 4)) : O("", !0),
-              P("span", Oo, j(E.label), 1)
-            ]))), 128))
-          ])) : O("", !0)
+          e.showOpacity && d(w)(S.config.id) && d(g)(S.config) ? (m(), q(gt, {
+            key: 0,
+            "layer-id": S.config.id,
+            "layer-name": S.config.title,
+            opacity: d(p)(S.config.id),
+            "onUpdate:opacity": (E) => o("setOpacity", S.config.id, E)
+          }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
+          e.showLegend && d(w)(S.config.id) && d(g)(S.config) && S.config.legend?.length ? (m(), q(vt, {
+            key: 1,
+            items: S.config.legend,
+            label: "Legend for " + S.config.title
+          }, null, 8, ["items", "label"])) : A("", !0)
         ]))), 128)),
-        a.value.length === 0 ? (p(), w("div", Io, ' No layers match "' + j(e.searchQuery) + '" ', 1)) : O("", !0)
+        r.value.length === 0 ? (m(), $("div", jo, 'No layers match "' + G(e.searchQuery) + '"', 1)) : A("", !0)
       ], 2))
     ]));
   }
-}), Do = /* @__PURE__ */ Oe(Ro, [["__scopeId", "data-v-d2e878e2"]]);
-function D(e) {
+}), Go = /* @__PURE__ */ $e(qo, [["__scopeId", "data-v-e48bb978"]]), Ho = {
+  esriSLSSolid: null,
+  esriSLSDash: [4, 3],
+  esriSLSDot: [1, 3],
+  esriSLSDashDot: [4, 3, 1, 3],
+  esriSLSDashDotDot: [4, 3, 1, 3, 1, 3],
+  esriSLSNull: null
+};
+function at(e) {
+  if (e)
+    return Ho[e] ?? void 0;
+}
+function Jo(e, i, l, o, r) {
+  const n = [];
+  let c = i[0], w = [e[0]], p = 0;
+  for (let a = 1; a < e.length; a++)
+    i[a] === c ? w.push(e[a]) : (n.push({ style: c, breaks: w, startIndex: p }), c = i[a], w = [e[a]], p = a);
+  n.push({ style: c, breaks: w, startIndex: p });
+  const x = [], h = /* @__PURE__ */ new Set();
+  let g = o.minValue ?? 0;
+  for (let a = 0; a < n.length; a++) {
+    const v = n[a], f = v.breaks, L = at(v.style), S = a === 0 ? null : n[a - 1].breaks[n[a - 1].breaks.length - 1].classMaxValue, E = f[f.length - 1].classMaxValue;
+    let D;
+    const X = !!o.defaultSymbol;
+    S === null ? D = `${!X && o.minValue != null ? `${l} >= ${o.minValue} AND ` : ""}${l} <= ${E}` : a === n.length - 1 && X ? D = `${l} > ${S}` : D = `${l} > ${S} AND ${l} <= ${E}`;
+    const T = {
+      "line-opacity": be(r)
+    };
+    if (L && (T["line-dasharray"] = L), f.length === 1)
+      T["line-color"] = O(f[0].symbol?.color), T["line-width"] = ee(f[0].symbol?.width || 2);
+    else {
+      const N = ["step", ["get", l]], me = ["step", ["get", l]];
+      N.push(O(f[0].symbol?.color)), me.push(ee(f[0].symbol?.width || 2));
+      for (let he = 1; he < f.length; he++)
+        N.push(f[he - 1].classMaxValue), N.push(O(f[he].symbol?.color)), me.push(f[he - 1].classMaxValue), me.push(ee(f[he].symbol?.width || 2));
+      T["line-color"] = N, T["line-width"] = me;
+    }
+    const I = [];
+    for (const N of f)
+      I.push({
+        type: "line",
+        color: O(N.symbol?.color),
+        width: ee(N.symbol?.width || 2),
+        label: N.label || `${g} - ${N.classMaxValue}`
+      }), g = N.classMaxValue + 1;
+    const _ = v.style.replace("esriSLS", "").toLowerCase();
+    let te;
+    a === 0 ? te = "" : h.has(_) ? te = `-${_}-${a}` : te = `-${_}`, h.add(_), x.push({ suffix: te, where: D, paint: T, legend: I });
+  }
+  return x;
+}
+function O(e) {
   if (!e || !Array.isArray(e) || e.length < 3) return "#888888";
-  const n = e[0], t = e[1], o = e[2], l = (e[3] ?? 255) / 255;
-  return l === 1 ? `#${n.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${n}, ${t}, ${o}, ${l.toFixed(2)})`;
+  const i = e[0], l = e[1], o = e[2], n = (e[3] ?? 255) / 255;
+  return n === 1 ? `#${i.toString(16).padStart(2, "0")}${l.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}` : `rgba(${i}, ${l}, ${o}, ${n.toFixed(2)})`;
 }
-function de(e) {
+function be(e) {
   return e !== void 0 ? e : 1;
 }
-const Zo = 559082264;
-function vt(e) {
-  return !e || e <= 0 ? null : Math.round(Math.log2(Zo / e) * 100) / 100;
+function ee(e) {
+  return Math.round(e * (96 / 72) * 10) / 10;
+}
+const Ko = 559082264;
+function It(e) {
+  return !e || e <= 0 ? null : Math.round(Math.log2(Ko / e) * 100) / 100;
 }
-function Bo(e, n) {
-  const t = {};
+function Qo(e, i) {
+  const l = {};
   if (e && e > 0) {
-    const o = vt(e);
-    o !== null && (t.minZoom = o);
+    const o = It(e);
+    o !== null && (l.minZoom = o);
   }
-  if (n && n > 0) {
-    const o = vt(n);
-    o !== null && (t.maxZoom = o);
+  if (i && i > 0) {
+    const o = It(i);
+    o !== null && (l.maxZoom = o);
   }
-  return t;
+  return l;
 }
-function Ue(e) {
+function it(e) {
   if (!e) return "fill";
   switch (e.type) {
     case "esriSFS":
@@ -1231,328 +1293,392 @@ function Ue(e) {
       return "fill";
   }
 }
-function Fe(e) {
+function Te(e) {
   return !(!e || e.style === "esriSLSNull" || e.color === null || e.width === 0 || e.color && e.color[3] === 0);
 }
-function et(e) {
+function pt(e) {
   return String(e);
 }
-function Ct(e, n, t) {
-  const o = e.symbol, a = Ue(o);
-  let l = {}, c = [], h = null;
-  if (a === "fill" && o) {
-    const f = o.color === null ? 0 : o.color?.[3] ?? 255, M = f === 0 ? "rgba(0, 0, 0, 0)" : D(o.color), m = f === 0 ? 0 : f < 255 ? 1 : de(n);
-    if (l = {
-      "fill-color": M,
-      "fill-opacity": m
-    }, Fe(o.outline)) {
-      const v = o.outline.width || 1, s = D(o.outline.color);
-      f !== 0 && (l["fill-outline-color"] = s), (v > 1 || f === 0) && (h = {
-        "line-color": s,
-        "line-width": v
-      });
+function Bt(e, i, l) {
+  const o = e.symbol, r = it(o);
+  let n = {}, c = [], w = null;
+  if (r === "fill" && o) {
+    const p = o.color === null ? 0 : o.color?.[3] ?? 255, x = p === 0 ? "rgba(0, 0, 0, 0)" : O(o.color), h = p === 0 ? 0 : p < 255 ? 1 : be(i);
+    if (n = {
+      "fill-color": x,
+      "fill-opacity": h
+    }, Te(o.outline)) {
+      const g = ee(o.outline.width || 1);
+      w = {
+        "line-color": O(o.outline.color),
+        "line-width": g
+      };
     }
-    c = [{
-      type: "fill",
-      color: D(o.color),
-      label: e.label || "Feature"
-    }];
-  } else if (a === "line" && o)
-    l = {
-      "line-color": D(o.color),
-      "line-width": o.width || 1,
-      "line-opacity": de(n)
-    }, c = [{
-      type: "line",
-      color: D(o.color),
-      width: o.width || 1,
-      label: e.label || "Feature"
-    }];
-  else if (a === "circle" && o) {
-    const f = Math.round((o.size || 6) * 0.71 * 100) / 100;
-    l = {
-      "circle-color": D(o.color),
-      "circle-radius": f,
-      "circle-opacity": de(n)
-    }, Fe(o.outline) && (l["circle-stroke-color"] = D(o.outline.color), l["circle-stroke-width"] = o.outline.width || 1), c = [{
-      type: "circle",
-      color: D(o.color),
-      label: e.label || "Feature"
-    }];
+    c = [
+      {
+        type: "fill",
+        color: O(o.color),
+        label: e.label || "Feature"
+      }
+    ];
+  } else if (r === "line" && o) {
+    n = {
+      "line-color": O(o.color),
+      "line-width": ee(o.width || 1),
+      "line-opacity": be(i)
+    };
+    const p = at(o.style);
+    p && (n["line-dasharray"] = p), c = [
+      {
+        type: "line",
+        color: O(o.color),
+        width: ee(o.width || 1),
+        label: e.label || "Feature"
+      }
+    ];
+  } else if (r === "circle" && o) {
+    const p = Math.round((o.size || 6) * 0.71 * 100) / 100;
+    n = {
+      "circle-color": O(o.color),
+      "circle-radius": p,
+      "circle-opacity": be(i)
+    }, Te(o.outline) && (n["circle-stroke-color"] = O(o.outline.color), n["circle-stroke-width"] = ee(o.outline.width || 1)), c = [
+      {
+        type: "circle",
+        color: O(o.color),
+        label: e.label || "Feature"
+      }
+    ];
   }
-  return { paint: l, legend: c, geomType: a, outlinePaint: h };
+  return { paint: n, legend: c, geomType: r, outlinePaint: w };
 }
-function Vo(e, n, t) {
-  const o = e.field1, a = e.uniqueValueInfos || [], l = e.defaultSymbol;
-  if (a.length === 0)
-    return Ct({ ...e, symbol: l }, n);
-  const c = a[0]?.symbol || l, h = Ue(c);
-  let f = {}, M = [], m = null;
-  if (h === "fill") {
-    const v = ["match", ["to-string", ["get", o]]];
-    for (const s of a) {
-      v.push(et(s.value)), v.push(D(s.symbol?.color));
-      const d = String(s.value), y = t?.get(d) || s.label || d;
-      M.push({
+function Xo(e, i, l) {
+  const o = e.field1.toLowerCase(), r = e.uniqueValueInfos || [], n = e.defaultSymbol;
+  if (r.length === 0)
+    return Bt({ ...e, symbol: n }, i);
+  const c = r[0]?.symbol || n, w = it(c);
+  let p = {};
+  const x = [];
+  let h = null;
+  if (w === "fill") {
+    const g = ["match", ["to-string", ["get", o]]];
+    for (const a of r) {
+      g.push(pt(a.value)), g.push(O(a.symbol?.color));
+      const v = String(a.value), L = l?.get(v) || a.label || v;
+      x.push({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: y
+        color: O(a.symbol?.color),
+        label: L
       });
     }
-    if (v.push(l ? D(l.color) : "#888888"), f = {
-      "fill-color": v,
-      "fill-opacity": de(n)
-    }, Fe(c?.outline)) {
-      const s = c.outline.width || 1, d = D(c.outline.color);
-      f["fill-outline-color"] = d, s > 1 && (m = {
-        "line-color": d,
-        "line-width": s
-      });
+    if (g.push(n ? O(n.color) : "rgba(0, 0, 0, 0)"), p = {
+      "fill-color": g,
+      "fill-opacity": be(i)
+    }, Te(c?.outline)) {
+      const a = ee(Math.max(c.outline.width || 1, 1));
+      h = {
+        "line-color": O(c.outline.color),
+        "line-width": a
+      };
     }
-  } else if (h === "line") {
-    const v = ["match", ["to-string", ["get", o]]];
-    for (const s of a) {
-      v.push(et(s.value)), v.push(D(s.symbol?.color));
-      const d = String(s.value), y = t?.get(d) || s.label || d;
-      M.push({
+  } else if (w === "line") {
+    const g = ["match", ["to-string", ["get", o]]];
+    for (const f of r) {
+      g.push(pt(f.value)), g.push(O(f.symbol?.color));
+      const L = String(f.value), E = l?.get(L) || f.label || L;
+      x.push({
         type: "line",
-        color: D(s.symbol?.color),
-        width: s.symbol?.width || 1,
-        label: y
+        color: O(f.symbol?.color),
+        width: ee(f.symbol?.width || 1),
+        label: E
       });
     }
-    v.push(l ? D(l.color) : "#888888"), f = {
-      "line-color": v,
-      "line-width": c?.width || 2,
-      "line-opacity": de(n)
+    g.push(n ? O(n.color) : "rgba(0, 0, 0, 0)"), p = {
+      "line-color": g,
+      "line-width": ee(c?.width || 2),
+      "line-opacity": be(i)
     };
-  } else if (h === "circle") {
-    const v = ["match", ["to-string", ["get", o]]];
-    for (const d of a) {
-      v.push(et(d.value)), v.push(D(d.symbol?.color));
-      const $ = String(d.value), S = t?.get($) || d.label || $;
-      M.push({
+    const a = r.map((f) => f.symbol?.style).filter(Boolean), v = [...new Set(a)];
+    if (v.length === 1) {
+      const f = at(v[0]);
+      f && (p["line-dasharray"] = f);
+    }
+  } else if (w === "circle") {
+    const g = ["match", ["to-string", ["get", o]]];
+    for (const v of r) {
+      g.push(pt(v.value)), g.push(O(v.symbol?.color));
+      const f = String(v.value), S = l?.get(f) || v.label || f;
+      x.push({
         type: "circle",
-        color: D(d.symbol?.color),
+        color: O(v.symbol?.color),
         label: S
       });
     }
-    v.push(l ? D(l.color) : "#888888");
-    const s = Math.round((c?.size || 6) * 0.71 * 100) / 100;
-    f = {
-      "circle-color": v,
-      "circle-radius": s,
-      "circle-opacity": de(n)
-    }, Fe(c?.outline) && (f["circle-stroke-color"] = D(c.outline.color), f["circle-stroke-width"] = c.outline.width || 1);
+    g.push(n ? O(n.color) : "rgba(0, 0, 0, 0)");
+    const a = Math.round((c?.size || 6) * 0.71 * 100) / 100;
+    p = {
+      "circle-color": g,
+      "circle-radius": a,
+      "circle-opacity": be(i)
+    }, Te(c?.outline) && (p["circle-stroke-color"] = O(c.outline.color), p["circle-stroke-width"] = ee(c.outline.width || 1));
   }
-  return { paint: f, legend: M, geomType: h, outlinePaint: m };
+  return { paint: p, legend: x, geomType: w, outlinePaint: h };
 }
-function Ao(e, n) {
-  const t = e.field, o = e.classBreakInfos || [], a = e.visualVariables?.find((m) => m.type === "colorInfo");
-  if (a?.stops && a.stops.length > 0)
-    return No(a, t, e, n);
+function Yo(e, i) {
+  const l = e.field.toLowerCase(), o = e.classBreakInfos || [], r = e.visualVariables?.find((h) => h.type === "colorInfo");
+  if (r?.stops && r.stops.length > 0)
+    return ea(r, l, e, i);
   if (o.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const l = o[0]?.symbol, c = Ue(l);
-  let h = {}, f = [], M = null;
+  const n = o[0]?.symbol, c = it(n);
+  let w = {};
+  const p = [];
+  let x = null;
   if (c === "fill") {
-    const m = ["step", ["get", t]];
-    m.push(D(o[0]?.symbol?.color));
-    for (let v = 0; v < o.length; v++) {
-      const s = o[v];
-      v > 0 && (m.push(o[v - 1].classMaxValue), m.push(D(s.symbol?.color))), f.push({
+    const h = ["step", ["get", l]];
+    h.push(O(o[0]?.symbol?.color));
+    for (let g = 0; g < o.length; g++) {
+      const a = o[g];
+      g > 0 && (h.push(o[g - 1].classMaxValue), h.push(O(a.symbol?.color))), p.push({
         type: "fill",
-        color: D(s.symbol?.color),
-        label: s.label || `${s.classMaxValue}`
+        color: O(a.symbol?.color),
+        label: a.label || `${a.classMaxValue}`
       });
     }
-    if (h = {
-      "fill-color": m,
-      "fill-opacity": de(n)
-    }, Fe(l?.outline)) {
-      const v = l.outline.width || 1, s = D(l.outline.color);
-      h["fill-outline-color"] = s, v > 1 && (M = {
-        "line-color": s,
-        "line-width": v
-      });
+    if (w = {
+      "fill-color": h,
+      "fill-opacity": be(i)
+    }, Te(n?.outline)) {
+      const g = ee(n.outline.width || 1);
+      x = {
+        "line-color": O(n.outline.color),
+        "line-width": g
+      };
     }
   } else if (c === "line") {
-    const m = ["step", ["get", t]];
-    m.push(D(o[0]?.symbol?.color));
-    let v = e.minValue ?? 0;
-    for (let d = 0; d < o.length; d++) {
-      const $ = o[d];
-      d > 0 && (m.push(o[d - 1].classMaxValue), m.push(D($.symbol?.color))), f.push({
+    const h = o.map((E) => E.symbol?.style || "esriSLSSolid"), g = [...new Set(h)];
+    if (g.length > 1) {
+      const E = Jo(o, h, l, e, i);
+      return { paint: {}, legend: [], geomType: c, outlinePaint: x, splitLayers: E };
+    }
+    const v = ["step", ["get", l]];
+    v.push(O(o[0]?.symbol?.color));
+    let f = e.minValue ?? 0;
+    for (let E = 0; E < o.length; E++) {
+      const D = o[E];
+      E > 0 && (v.push(o[E - 1].classMaxValue), v.push(O(D.symbol?.color))), p.push({
         type: "line",
-        color: D($.symbol?.color),
-        width: $.symbol?.width || l?.width || 2,
-        label: $.label || `${v} - ${$.classMaxValue}`
-      }), v = $.classMaxValue + 1;
-    }
-    const s = l?.width || 2;
-    h = {
-      "line-color": m,
-      "line-width": s,
-      "line-opacity": de(n)
+        color: O(D.symbol?.color),
+        width: ee(D.symbol?.width || n?.width || 2),
+        label: D.label || `${f} - ${D.classMaxValue}`
+      }), f = D.classMaxValue + 1;
+    }
+    const L = ee(n?.width || 2);
+    w = {
+      "line-color": v,
+      "line-width": L,
+      "line-opacity": be(i)
     };
+    const S = at(g[0]);
+    S && (w["line-dasharray"] = S);
   }
-  return { paint: h, legend: f, geomType: c, outlinePaint: M };
+  return { paint: w, legend: p, geomType: c, outlinePaint: x };
 }
-function No(e, n, t, o) {
-  const a = e.stops || [];
-  if (a.length === 0)
+function ea(e, i, l, o) {
+  const r = e.stops || [];
+  if (r.length === 0)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const l = t.classBreakInfos?.[0]?.symbol || t.defaultSymbol, c = Ue(l);
-  let h = {}, f = [], M = null;
+  const n = l.classBreakInfos?.[0]?.symbol || l.defaultSymbol, c = it(n);
+  let w = {};
+  const p = [];
+  let x = null;
   if (c === "fill") {
-    const m = ["interpolate", ["linear"], ["get", n]];
-    for (const s of a)
-      m.push(s.value), m.push(D(s.color)), f.push({
+    const h = ["interpolate", ["linear"], ["get", i]];
+    for (const a of r)
+      h.push(a.value), h.push(O(a.color)), p.push({
         type: "fill",
-        color: D(s.color),
-        label: s.label || `${s.value}`
+        color: O(a.color),
+        label: a.label || `${a.value}`
       });
-    if (h = {
+    if (w = {
       "fill-color": [
         "case",
-        ["==", ["get", n], null],
+        ["==", ["get", i], null],
         "rgba(0, 0, 0, 0)",
         // Transparent for null/no-data values
-        m
+        h
         // Otherwise use the interpolated color
       ],
-      "fill-opacity": de(o)
-    }, Fe(l?.outline)) {
-      const s = l.outline.width || 1, d = D(l.outline.color);
-      h["fill-outline-color"] = d, s > 1 && (M = {
-        "line-color": d,
-        "line-width": s
-      });
+      "fill-opacity": be(o)
+    }, Te(n?.outline)) {
+      const a = ee(n.outline.width || 1);
+      x = {
+        "line-color": O(n.outline.color),
+        "line-width": a
+      };
     }
   }
-  return { paint: h, legend: f, geomType: c, outlinePaint: M };
+  return { paint: w, legend: p, geomType: c, outlinePaint: x };
 }
-function Uo(e, n, t, o) {
+function ta(e, i, l, o) {
   if (!e?.renderer)
     return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
-  const a = e.renderer;
-  switch (a.type) {
+  const r = e.renderer;
+  switch (r.type) {
     case "simple":
-      return Ct(a, n);
+      return Bt(r, i);
     case "uniqueValue":
-      return Vo(a, n, t);
+      return Xo(r, i, l);
     case "classBreaks":
-      return Ao(a, n);
+      return Yo(r, i);
     default:
       return { paint: {}, legend: [], geomType: "fill", outlinePaint: null };
   }
 }
-function Wo(e) {
+function oa(e) {
   if (!e) return null;
-  const n = e.title || "", o = (e.fieldInfos || []).filter((a) => a.visible === !0).map((a) => {
-    const l = {
-      field: a.fieldName,
-      label: a.label || a.fieldName
+  const i = (e.title || "").replace(/\{([^}]+)\}/g, (n, c) => `{${c.toLowerCase()}}`), o = (e.fieldInfos || []).filter((n) => n.visible === !0).map((n) => {
+    const c = {
+      field: n.fieldName.toLowerCase(),
+      label: n.label || n.fieldName
     };
-    return a.format && (l.format = {}, a.format.dateFormat && (l.format.dateFormat = a.format.dateFormat), a.format.digitSeparator !== void 0 && (l.format.digitSeparator = a.format.digitSeparator), a.format.places !== void 0 && (l.format.places = a.format.places), Object.keys(l.format).length === 0 && delete l.format), l;
-  });
-  return {
-    title: n,
+    return n.format && (c.format = {}, n.format.dateFormat && (c.format.dateFormat = n.format.dateFormat), n.format.digitSeparator !== void 0 && (c.format.digitSeparator = n.format.digitSeparator), n.format.places !== void 0 && (c.format.places = n.format.places), Object.keys(c.format).length === 0 && delete c.format), c;
+  }), r = {
+    title: i,
     fields: o
   };
+  return e.showTime && (r.showTime = !0), r;
 }
-function jo(e) {
+function aa(e) {
   return e?.definitionExpression;
 }
-function qo(e) {
+function ia(e) {
   return (e.includes("_") ? e.split("_").slice(1).join(" ") : e).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
-function Go(e) {
+function la(e) {
   return e.includes("_") ? e.split("_").slice(1).join(" ") : e;
 }
-function Ho(e) {
-  const n = /* @__PURE__ */ new Map();
+function na(e) {
+  const i = /* @__PURE__ */ new Map();
   if (!e)
-    return n;
-  const t = e.split(`
+    return i;
+  const l = e.split(`
 `), o = /^(\d{1,3})\s+(.+)$/;
-  for (const a of t) {
-    const l = a.trim().match(o);
-    if (l) {
-      const [, c, h] = l;
-      c && h && n.set(c, h.trim());
+  for (const r of l) {
+    const n = r.trim().match(o);
+    if (n) {
+      const [, c, w] = n;
+      c && w && i.set(c, w.trim());
     }
   }
-  return n;
+  return i;
 }
-async function Jo(e) {
+async function ra(e) {
   try {
-    const n = await fetch(`${e}?f=json`);
-    if (!n.ok)
+    const i = await fetch(`${e}?f=json`);
+    if (!i.ok)
       return null;
-    const t = await n.json();
-    return t.drawingInfo ? {
-      drawingInfo: t.drawingInfo,
-      description: t.description
+    const l = await i.json();
+    return l.drawingInfo ? {
+      drawingInfo: l.drawingInfo,
+      description: l.description
     } : null;
   } catch {
     return null;
   }
 }
-async function kt(e) {
-  const n = e.operationalLayers || [], t = [], o = ["Zoning and Planning_Land Use"];
-  for (const a of n)
-    if (a.url && a.itemId !== "4f39b829b96d437da9231727d9c91fab")
+function Ot(e) {
+  const i = {
+    id: e.id,
+    title: e.title,
+    type: e.type,
+    url: e.url,
+    opacity: e.opacity,
+    paint: e.paint,
+    legend: e.legend,
+    popup: e.popup
+  };
+  return e.where && (i.where = e.where), e.minZoom !== void 0 && (i.minZoom = e.minZoom), e.maxZoom !== void 0 && (i.maxZoom = e.maxZoom), e.outlinePaint && (i.outlinePaint = e.outlinePaint), i;
+}
+async function Zt(e) {
+  const i = e.operationalLayers || [], l = [], o = ["Zoning and Planning_Land Use"];
+  for (const r of i)
+    if (r.url && !r.title?.toLowerCase().includes("(under construction)") && !(r.url && /\/MapServer(\/\d+)?$/i.test(r.url)))
       try {
-        let l = a.layerDefinition?.drawingInfo, c;
-        const h = !l || !l.renderer, f = o.includes(a.title);
-        if ((h || f) && a.url) {
-          const T = await Jo(a.url);
-          T && (l = T.drawingInfo, T.description && (c = Ho(T.description), c.size > 0));
+        let n = r.layerDefinition?.drawingInfo, c;
+        const w = !n || !n.renderer, p = o.includes(r.title), x = n?.renderer?.uniqueValueInfos?.[0]?.symbol?.outline || n?.renderer?.defaultSymbol?.outline;
+        if ((w || p) && r.url) {
+          const I = await ra(r.url);
+          if (I) {
+            if (n = I.drawingInfo, x && Te(x) && n?.renderer) {
+              const _ = n.renderer, te = _.uniqueValueInfos?.[0]?.symbol?.outline || _.defaultSymbol?.outline;
+              if (!Te(te)) {
+                for (const N of _.uniqueValueInfos || [])
+                  N.symbol && (N.symbol.outline = x);
+                _.defaultSymbol && (_.defaultSymbol.outline = x);
+              }
+            }
+            I.description && (c = na(I.description), c.size > 0);
+          }
         }
-        const { paint: M, legend: m, geomType: v, outlinePaint: s } = Uo(
-          l,
-          a.opacity,
+        const { paint: h, legend: g, geomType: a, outlinePaint: v, splitLayers: f } = ta(
+          n,
+          r.opacity,
           c,
-          a.title
-        ), d = Wo(a.popupInfo), $ = jo(a.layerDefinition), y = Bo(
-          a.layerDefinition?.minScale,
-          a.layerDefinition?.maxScale
-        ), S = qo(a.title), g = Go(a.title);
-        let b = a.opacity ?? 1;
-        const E = {
-          id: S,
-          title: g,
-          type: v,
-          url: a.url,
-          opacity: b,
-          paint: M,
-          legend: m,
-          popup: d
-        };
-        $ && (E.where = $), y.minZoom !== void 0 && (E.minZoom = y.minZoom), y.maxZoom !== void 0 && (E.maxZoom = y.maxZoom), s && (E.outlinePaint = s), t.push(E);
+          r.title
+        ), L = oa(r.popupInfo), S = aa(r.layerDefinition), E = Qo(r.layerDefinition?.minScale, r.layerDefinition?.maxScale), D = ia(r.title), X = la(r.title), T = r.opacity ?? 1;
+        if (f && f.length > 0)
+          for (const I of f)
+            l.push(Ot({
+              id: `${D}${I.suffix}`,
+              title: X,
+              type: a,
+              url: r.url,
+              opacity: T,
+              paint: I.paint,
+              legend: I.legend,
+              popup: L,
+              where: S ? `(${S}) AND (${I.where})` : I.where,
+              minZoom: E.minZoom,
+              maxZoom: E.maxZoom
+            }));
+        else
+          l.push(Ot({
+            id: D,
+            title: X,
+            type: a,
+            url: r.url,
+            opacity: T,
+            paint: h,
+            legend: g,
+            popup: L,
+            where: S,
+            minZoom: E.minZoom,
+            maxZoom: E.maxZoom,
+            outlinePaint: v
+          }));
       } catch {
       }
-  return t.sort((a, l) => a.title.localeCompare(l.title)), t;
+  return l.sort((r, n) => r.title.localeCompare(n.title)), l;
 }
-const bt = {}, at = "376af635c84643cd816a8c5d017a53aa", Zn = at;
-function lt(e, n) {
-  let t = `https://www.arcgis.com/sharing/rest/content/items/${e}/data?f=json`;
-  return n && (t += `&token=${n}`), t;
+const zt = {}, wt = "376af635c84643cd816a8c5d017a53aa", ja = wt;
+function Lt(e, i) {
+  let l = `https://www.arcgis.com/sharing/rest/content/items/${e}/data?f=json`;
+  return i && (l += `&token=${i}`), l;
 }
-function Bn() {
-  return lt(at);
+function qa() {
+  return Lt(wt);
 }
-const Ae = /* @__PURE__ */ new Map(), _e = /* @__PURE__ */ new Map();
-function Qo(e) {
-  e ? (Ae.delete(e), _e.delete(e)) : (Ae.clear(), _e.clear());
+const ot = /* @__PURE__ */ new Map(), He = /* @__PURE__ */ new Map();
+function sa(e) {
+  e ? (ot.delete(e), He.delete(e)) : (ot.clear(), He.clear());
 }
-let Be, wt = 0;
-async function Ko() {
-  const e = typeof import.meta < "u" && bt?.VITE_AGO_USERNAME, n = typeof import.meta < "u" && bt?.VITE_AGO_PASSWORD;
-  if (!(!e || !n)) {
-    if (Be && Date.now() < wt - 3e5)
-      return Be;
+let Ye, Dt = 0;
+async function ca() {
+  const e = typeof import.meta < "u" && zt?.VITE_AGO_USERNAME, i = typeof import.meta < "u" && zt?.VITE_AGO_PASSWORD;
+  if (!(!e || !i)) {
+    if (Ye && Date.now() < Dt - 3e5)
+      return Ye;
     try {
       const o = await (await fetch("https://www.arcgis.com/sharing/rest/generateToken", {
         method: "POST",
@@ -1562,191 +1688,199 @@ async function Ko() {
         body: new URLSearchParams({
           f: "json",
           username: e,
-          password: n,
+          password: i,
           referer: window.location.origin || "https://localhost",
           expiration: "120"
           // 2 hours
         })
       })).json();
-      return o.error ? void 0 : (Be = o.token, wt = o.expires, Be);
+      return o.error ? void 0 : (Ye = o.token, Dt = o.expires, Ye);
     } catch {
       return;
     }
   }
 }
-async function Xo(e, n) {
-  const t = lt(e, n), o = await fetch(t);
+async function ua(e, i) {
+  const l = Lt(e, i), o = await fetch(l, { cache: "no-store" });
   if (!o.ok)
     throw new Error(`Failed to fetch WebMap: ${o.status} ${o.statusText}`);
-  const a = await o.json();
-  if (a.error)
-    throw new Error(`ArcGIS error: ${a.error.message || a.error.code || "Unknown error"}`);
-  return a;
+  const r = await o.json();
+  if (r.error)
+    throw new Error(`ArcGIS error: ${r.error.message || r.error.code || "Unknown error"}`);
+  return r;
 }
-async function Yo(e) {
+async function da(e) {
   try {
-    const n = await Ko(), t = await Xo(e, n);
-    return await kt(t);
-  } catch (n) {
-    throw new Error(`Failed to load dynamic layer configs: ${n instanceof Error ? n.message : "Unknown error"}`);
+    const i = await ca(), l = await ua(e, i);
+    return await Zt(l);
+  } catch (i) {
+    throw new Error(
+      `Failed to load dynamic layer configs: ${i instanceof Error ? i.message : "Unknown error"}`
+    );
   }
 }
-async function it(e = at) {
-  const n = Ae.get(e);
-  if (n)
-    return n;
-  const t = _e.get(e);
-  if (t)
-    return t;
+async function ht(e = wt) {
+  const i = ot.get(e);
+  if (i)
+    return i;
+  const l = He.get(e);
+  if (l)
+    return l;
   const o = (async () => {
     try {
-      const a = await Yo(e);
-      return Ae.set(e, a), a;
+      const r = await da(e);
+      return ot.set(e, r), r;
     } finally {
-      _e.delete(e);
+      He.delete(e);
     }
   })();
-  return _e.set(e, o), o;
+  return He.set(e, o), o;
 }
-function en(e) {
-  const n = C({}), t = /* @__PURE__ */ new Map();
-  for (const s of e)
-    n.value[s.id] = {
+function fa(e) {
+  const i = k({}), l = /* @__PURE__ */ new Map();
+  for (const a of e)
+    i.value[a.id] = {
       data: null,
       loading: !1,
       error: null,
       lastFetched: null
     };
-  async function o(s) {
-    const d = s.id;
-    n.value = {
-      ...n.value,
-      [d]: {
-        data: n.value[d]?.data ?? null,
-        lastFetched: n.value[d]?.lastFetched ?? null,
+  async function o(a) {
+    const v = a.id;
+    i.value = {
+      ...i.value,
+      [v]: {
+        data: i.value[v]?.data ?? null,
+        lastFetched: i.value[v]?.lastFetched ?? null,
         loading: !0,
         error: null
       }
     };
     try {
-      let $;
-      if (s.type === "http-get") {
-        const y = await fetch(s.url, {
+      let f;
+      if (a.type === "http-get") {
+        const L = await fetch(a.url, {
           method: "GET",
-          ...s.options
+          ...a.options
         });
-        if (!y.ok)
-          throw new Error(`HTTP ${y.status}: ${y.statusText}`);
-        $ = await y.json();
-      } else if (s.type === "http-post") {
-        const y = await fetch(s.url, {
+        if (!L.ok)
+          throw new Error(`HTTP ${L.status}: ${L.statusText}`);
+        f = await L.json();
+      } else if (a.type === "http-post") {
+        const L = await fetch(a.url, {
           method: "POST",
-          ...s.options
+          ...a.options
         });
-        if (!y.ok)
-          throw new Error(`HTTP ${y.status}: ${y.statusText}`);
-        $ = await y.json();
-      } else if (s.type === "esri") {
-        const S = `${s.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, g = await fetch(S, s.options);
-        if (!g.ok)
-          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        $ = (await g.json()).features?.map((E) => E.attributes) || [];
+        if (!L.ok)
+          throw new Error(`HTTP ${L.status}: ${L.statusText}`);
+        f = await L.json();
+      } else if (a.type === "esri") {
+        const S = `${a.url.replace(/\/$/, "")}/query?where=1%3D1&outFields=*&returnGeometry=false&f=json`, E = await fetch(S, a.options);
+        if (!E.ok)
+          throw new Error(`HTTP ${E.status}: ${E.statusText}`);
+        f = (await E.json()).features?.map((X) => X.attributes) || [];
       } else
-        throw new Error(`Unknown data source type: ${s.type}`);
-      s.transform && ($ = s.transform($)), n.value = {
-        ...n.value,
-        [d]: {
-          data: $,
+        throw new Error(`Unknown data source type: ${a.type}`);
+      a.transform && (f = a.transform(f)), i.value = {
+        ...i.value,
+        [v]: {
+          data: f,
           loading: !1,
           error: null,
           lastFetched: Date.now()
         }
       };
-    } catch ($) {
-      const y = $ instanceof Error ? $.message : "Unknown error";
-      n.value = {
-        ...n.value,
-        [d]: {
-          data: n.value[d]?.data ?? null,
-          lastFetched: n.value[d]?.lastFetched ?? null,
+    } catch (f) {
+      const L = f instanceof Error ? f.message : "Unknown error";
+      i.value = {
+        ...i.value,
+        [v]: {
+          data: i.value[v]?.data ?? null,
+          lastFetched: i.value[v]?.lastFetched ?? null,
           loading: !1,
-          error: y
+          error: L
         }
       };
     }
   }
-  async function a() {
-    await Promise.all(e.map((s) => o(s)));
+  async function r() {
+    await Promise.all(e.map((a) => o(a)));
   }
-  async function l(s) {
-    const d = e.find(($) => $.id === s);
-    d && await o(d);
+  async function n(a) {
+    const v = e.find((f) => f.id === a);
+    v && await o(v);
   }
-  function c(s) {
-    return n.value[s]?.data ?? null;
+  function c(a) {
+    return i.value[a]?.data ?? null;
   }
-  const h = I(() => Object.values(n.value).some((s) => s.loading));
-  function f(s) {
-    return n.value[s]?.loading ?? !1;
+  const w = z(() => Object.values(i.value).some((a) => a.loading));
+  function p(a) {
+    return i.value[a]?.loading ?? !1;
   }
-  function M(s) {
-    return n.value[s]?.error ?? null;
+  function x(a) {
+    return i.value[a]?.error ?? null;
   }
-  function m() {
-    for (const s of e)
-      if (s.pollInterval && s.pollInterval > 0) {
-        const d = window.setInterval(() => {
-          o(s);
-        }, s.pollInterval);
-        t.set(s.id, d);
+  function h() {
+    for (const a of e)
+      if (a.pollInterval && a.pollInterval > 0) {
+        const v = window.setInterval(() => {
+          o(a);
+        }, a.pollInterval);
+        l.set(a.id, v);
       }
   }
-  function v() {
-    for (const [, s] of t)
-      window.clearInterval(s);
-    t.clear();
+  function g() {
+    for (const [, a] of l)
+      window.clearInterval(a);
+    l.clear();
   }
-  return Ve(() => {
-    a(), m();
-  }), Lt(() => {
-    v();
+  return et(() => {
+    r(), h();
+  }), _t(() => {
+    g();
   }), {
     /** Reactive state for all data sources */
-    state: W(n),
+    state: j(i),
     /** Whether any data source is currently loading */
-    isLoading: h,
+    isLoading: w,
     /** Fetch all data sources */
-    fetchAll: a,
+    fetchAll: r,
     /** Refetch a specific data source by id */
-    refetch: l,
+    refetch: n,
     /** Get data for a specific source */
     getData: c,
     /** Check if a specific source is loading */
-    isSourceLoading: f,
+    isSourceLoading: p,
     /** Get error for a specific source */
-    getError: M,
+    getError: x,
     /** Stop all polling (useful for cleanup) */
-    stopPolling: v
+    stopPolling: g
   };
 }
-const tn = { class: "layerboard-layout" }, on = {
+const pa = { class: "layerboard-layout" }, ya = ["aria-expanded"], ma = {
   key: 0,
   class: "layerboard-subtitle"
-}, nn = { class: "layerboard-mobile-menu-content" }, an = { class: "layerboard-main" }, ln = {
+}, ha = { class: "layerboard-mobile-menu-content" }, ga = { class: "layerboard-main" }, va = {
   key: 0,
-  class: "layerboard-loading"
-}, rn = {
+  class: "layerboard-loading",
+  role: "status",
+  "aria-live": "polite"
+}, ba = {
   key: 1,
-  class: "layerboard-error"
-}, sn = { key: 0 }, cn = { key: 1 }, un = { class: "layerboard-modal" }, dn = /* @__PURE__ */ we({
+  class: "layerboard-error",
+  role: "alert"
+}, wa = ["aria-expanded", "aria-label"], La = { key: 0 }, Sa = { key: 1 }, Ca = {
+  class: "sr-only",
+  "aria-live": "polite"
+}, ka = /* @__PURE__ */ ye({
   __name: "Layerboard",
   props: {
     title: {},
-    subtitle: {},
+    subtitle: { default: void 0 },
     webMapId: {},
     themeColor: { default: "#0f4d90" },
-    cyclomediaConfig: {},
-    pictometryCredentials: {},
+    cyclomediaConfig: { default: void 0 },
+    pictometryCredentials: { default: void 0 },
     showDefaultSidebar: { type: Boolean, default: !0 },
     sidebarWidth: { default: "30%" },
     sidebarLabel: { default: "Layers" },
@@ -1755,6 +1889,7 @@ const tn = { class: "layerboard-layout" }, on = {
     tiledLayers: { default: () => [] },
     dataSources: { default: () => [] },
     layerStyleOverrides: { default: () => ({}) },
+    popupOverrides: { default: () => ({}) },
     basemapControlPosition: { default: "top-right" },
     navigationControlPosition: { default: "bottom-right" },
     geolocationControlPosition: { default: "bottom-right" },
@@ -1762,209 +1897,263 @@ const tn = { class: "layerboard-layout" }, on = {
     drawControlPosition: { default: "bottom-left" },
     cyclomediaButtonPosition: { default: "top-right" },
     pictometryButtonPosition: { default: "top-right" },
-    initialZoom: {},
-    initialCenter: {}
+    initialZoom: { default: void 0 },
+    initialCenter: { default: void 0 }
   },
   emits: ["configs-loaded", "load-error", "zoom"],
-  setup(e, { expose: n, emit: t }) {
-    const o = e, a = t, l = C([]), c = C(!0), h = C(null), f = C(12), M = C(""), m = C(/* @__PURE__ */ new Set()), v = C({}), s = C(/* @__PURE__ */ new Set()), d = C({}), $ = C({}), y = C(/* @__PURE__ */ new Set()), S = C({});
-    function g() {
-      const L = {};
-      for (const F of o.tiledLayers)
-        L[F.id] = F.opacity ?? 1;
-      S.value = L;
+  setup(e, { expose: i, emit: l }) {
+    const o = e, r = l, n = k([]), c = k(!0), w = k(null), p = k(12), x = k(""), h = k(/* @__PURE__ */ new Set()), g = k({}), a = k(/* @__PURE__ */ new Set()), v = k({}), f = k({}), L = k(/* @__PURE__ */ new Set()), S = k({});
+    function E() {
+      const y = {};
+      for (const M of o.tiledLayers)
+        y[M.id] = M.opacity ?? 1;
+      S.value = y;
     }
-    function b(L) {
-      y.value.has(L) ? y.value.delete(L) : y.value.add(L), y.value = new Set(y.value);
+    function D(y) {
+      L.value.has(y) ? L.value.delete(y) : L.value.add(y), L.value = new Set(L.value);
     }
-    function E(L, F) {
-      F ? y.value.add(L) : y.value.delete(L), y.value = new Set(y.value);
+    function X(y, M) {
+      M ? L.value.add(y) : L.value.delete(y), L.value = new Set(L.value);
     }
-    function T(L, F) {
-      S.value = { ...S.value, [L]: F };
+    function T(y, M) {
+      S.value = { ...S.value, [y]: M };
     }
-    const B = o.dataSources.length > 0 ? en(o.dataSources) : null, q = I(() => B?.state.value ?? {}), ce = I(() => B?.isLoading.value ?? !1);
-    function Le(L) {
-      return B?.getData(L) ?? null;
+    const I = o.dataSources.length > 0 ? fa(o.dataSources) : null, _ = z(() => I?.state.value ?? {}), te = z(() => I?.isLoading.value ?? !1);
+    function N(y) {
+      return I?.getData(y) ?? null;
     }
-    function Se(L) {
-      return B?.refetch(L) ?? Promise.resolve();
+    function me(y) {
+      return I?.refetch(y) ?? Promise.resolve();
     }
-    U("layerboard-layers", W(l)), U("layerboard-visible", m), U("layerboard-opacities", v), U("layerboard-loading", W(s)), U("layerboard-errors", W(d)), U("layerboard-zoom", W(f)), U("layerboard-toggle-layer", Ce), U("layerboard-set-layer-visible", fe), U("layerboard-set-layers-visible", ke), U("layerboard-set-opacity", pe), U("layerboard-tiled-layers", W(I(() => o.tiledLayers))), U("layerboard-visible-tiled", y), U("layerboard-tiled-opacities", S), U("layerboard-toggle-tiled", b), U("layerboard-set-tiled-opacity", T), U("layerboard-set-tiled-visible", E), U("layerboard-data-sources-state", q), U("layerboard-data-sources-loading", ce), U("layerboard-get-data-source", Le), U("layerboard-refetch-data-source", Se);
-    const We = I(() => ({
+    Z("layerboard-layers", j(n)), Z("layerboard-visible", h), Z("layerboard-opacities", g), Z("layerboard-loading", j(a)), Z("layerboard-errors", j(v)), Z("layerboard-zoom", j(p)), Z("layerboard-toggle-layer", _e), Z("layerboard-set-layer-visible", Me), Z("layerboard-set-layers-visible", Re), Z("layerboard-set-opacity", Pe), Z("layerboard-tiled-layers", j(z(() => o.tiledLayers))), Z("layerboard-visible-tiled", L), Z("layerboard-tiled-opacities", S), Z("layerboard-toggle-tiled", D), Z("layerboard-set-tiled-opacity", T), Z("layerboard-set-tiled-visible", X), Z("layerboard-data-sources-state", _), Z("layerboard-data-sources-loading", te), Z("layerboard-get-data-source", N), Z("layerboard-refetch-data-source", me);
+    const he = z(() => ({
       backgroundColor: o.themeColor
-    })), je = I(() => ({
+    })), Ue = z(() => ({
       backgroundColor: o.themeColor
-    })), ze = I(() => ({
+    })), Je = z(() => ({
       backgroundColor: o.themeColor
-    })), Ie = I(() => ({
-      width: ge.value ? "0" : o.sidebarWidth
+    })), lt = z(() => ({
+      width: de.value ? "0" : o.sidebarWidth
     }));
-    async function Te() {
+    async function De() {
       try {
-        c.value = !0, h.value = null;
-        const F = (await it(o.webMapId)).map((A) => {
-          const Q = o.layerStyleOverrides[A.id];
-          return Q ? {
-            ...A,
-            paint: Q.paint ?? A.paint,
-            outlinePaint: Q.outlinePaint ?? A.outlinePaint,
-            legend: Q.legend ?? A.legend,
-            type: Q.type ?? A.type
-          } : A;
+        c.value = !0, w.value = null;
+        const M = (await ht(o.webMapId)).map((U) => {
+          let Q = U;
+          const Ce = o.layerStyleOverrides[U.id];
+          Ce && (Q = {
+            ...Q,
+            paint: Ce.paint ?? Q.paint,
+            outlinePaint: Ce.outlinePaint ?? Q.outlinePaint,
+            legend: Ce.legend ?? Q.legend,
+            type: Ce.type ?? Q.type
+          });
+          const Ve = o.popupOverrides[U.id];
+          return Ve && Q.popup && (Q = {
+            ...Q,
+            popup: { ...Q.popup, ...Ve }
+          }), Q;
         });
-        l.value = F.map((A) => ({
-          config: A,
-          component: A.type
+        n.value = M.map((U) => ({
+          config: U,
+          component: U.type
         }));
-        const re = {};
-        F.forEach((A) => {
-          re[A.id] = A.opacity ?? 1;
-        }), v.value = re, a("configs-loaded", F);
-      } catch (L) {
-        const F = L instanceof Error ? L.message : "Failed to load layer configurations";
-        h.value = F, a("load-error", F);
+        const J = {};
+        M.forEach((U) => {
+          J[U.id] = U.opacity ?? 1;
+        }), g.value = J, r("configs-loaded", M);
+      } catch (y) {
+        const M = y instanceof Error ? y.message : "Failed to load layer configurations";
+        w.value = M, r("load-error", M);
       } finally {
         c.value = !1;
       }
     }
-    function Re(L) {
-      let F = L.split("?")[0] || L;
-      return F = F.replace(/\/query$/, ""), F = F.replace(/\/$/, ""), F.toLowerCase();
-    }
-    async function qe() {
+    async function nt() {
       if (o.fetchMetadata)
         try {
-          const L = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
+          const y = "https://phl.carto.com/api/v2/sql?q=" + encodeURIComponent(
             "select url_text, COALESCE(representation, '') as representation from phl.knack_metadata_reps_endpoints_join WHERE ( format = 'API' OR format = 'GeoService' ) AND url_text IS NOT null"
-          ), F = await fetch(L);
-          if (!F.ok) return;
-          const re = await F.json(), A = {};
-          for (const Q of re.rows || [])
+          ), M = await fetch(y);
+          if (!M.ok) return;
+          const J = await M.json(), U = {};
+          for (const Q of J.rows || [])
             if (Q.url_text && Q.representation) {
-              const Qe = Re(Q.url_text), Ke = `https://metadata.phila.gov/#home/representationdetails/${Q.representation}/`;
-              A[Qe] = Ke;
+              const Ce = At(Q.url_text), Ve = `https://metadata.phila.gov/#home/representationdetails/${Q.representation}/`;
+              U[Ce] = Ve;
             }
-          $.value = A;
+          f.value = U;
         } catch {
         }
     }
-    function Ge(L) {
-      f.value = L, a("zoom", L);
+    function rt(y) {
+      p.value = y, r("zoom", y);
     }
-    function Ce(L) {
-      m.value.has(L) ? m.value.delete(L) : m.value.add(L), m.value = new Set(m.value);
+    function _e(y) {
+      h.value.has(y) ? h.value.delete(y) : h.value.add(y), h.value = new Set(h.value);
     }
-    function fe(L, F) {
-      F ? m.value.add(L) : m.value.delete(L), m.value = new Set(m.value);
+    function Me(y, M) {
+      M ? h.value.add(y) : h.value.delete(y), h.value = new Set(h.value);
     }
-    function ke(L, F) {
-      for (const re of L)
-        F ? m.value.add(re) : m.value.delete(re);
-      m.value = new Set(m.value);
+    function Re(y, M) {
+      for (const J of y)
+        M ? h.value.add(J) : h.value.delete(J);
+      h.value = new Set(h.value);
     }
-    function pe(L, F) {
-      v.value = { ...v.value, [L]: F };
+    function Pe(y, M) {
+      g.value = { ...g.value, [y]: M };
     }
-    function He(L, F) {
-      F ? s.value.add(L) : s.value.delete(L), s.value = new Set(s.value);
+    function st(y, M) {
+      M ? a.value.add(y) : a.value.delete(y), a.value = new Set(a.value);
     }
-    function oe(L, F) {
-      if (F)
-        d.value = { ...d.value, [L]: F };
+    function se(y, M) {
+      if (M)
+        v.value = { ...v.value, [y]: M };
       else {
-        const { [L]: re, ...A } = d.value;
-        d.value = A;
+        const J = { ...v.value };
+        delete J[y], v.value = J;
       }
     }
-    function ye(L) {
-      M.value = L;
+    function Ae(y) {
+      x.value = y;
     }
-    const J = C("map");
-    function $e() {
-      J.value = J.value === "sidebar" ? "map" : "sidebar";
+    const ie = k(null), Fe = k(null), ct = k(null), we = k(null), We = k(null), je = k(null), Ke = k(null), Le = k("map");
+    function Be() {
+      Le.value = Le.value === "sidebar" ? "map" : "sidebar", Ne(() => {
+        Le.value === "sidebar" && ie.value?.focus();
+      });
     }
-    const ve = C(!1);
-    function Je() {
-      ve.value = !ve.value;
+    const le = k(!1);
+    function Qe() {
+      le.value = !le.value, le.value && Ne(() => {
+        we.value?.focus();
+      });
     }
-    function De() {
-      ve.value = !1;
+    function Ee() {
+      le.value = !1, Ne(() => {
+        Fe.value?.focus();
+      });
     }
-    const ge = C(!1);
-    function xe() {
-      ge.value = !ge.value;
+    const de = k(!1);
+    function Ie() {
+      de.value = !de.value;
     }
-    const te = C(!1);
-    function be() {
-      te.value = !0;
+    const ge = k(!1), qe = k(null);
+    function Se() {
+      qe.value = document.activeElement, ge.value = !0, Ne(() => {
+        Ke.value?.focus();
+      });
     }
-    function le() {
-      te.value = !1;
+    function ne() {
+      ge.value = !1, Ne(() => {
+        qe.value?.focus(), qe.value = null;
+      });
     }
-    function Ze(L) {
-      L.target.classList.contains("layerboard-modal-backdrop") && le();
+    function Ze(y) {
+      y.target.classList.contains("layerboard-modal-backdrop") && ne();
     }
-    return U("layerboard-open-modal", be), U("layerboard-close-modal", le), U("layerboard-is-modal-open", W(te)), n({
+    function ut(y) {
+      if (y.key === "Escape") {
+        Ee();
+        return;
+      }
+      if (y.key === "Tab" && We.value) {
+        const M = Array.from(
+          We.value.querySelectorAll(
+            'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+          )
+        );
+        if (M.length === 0) return;
+        const J = M[0], U = M[M.length - 1];
+        y.shiftKey ? document.activeElement === J && (y.preventDefault(), U.focus()) : document.activeElement === U && (y.preventDefault(), J.focus());
+      }
+    }
+    function dt(y) {
+      if (y.key === "Escape") {
+        ne();
+        return;
+      }
+      if (y.key === "Tab" && je.value) {
+        const M = Array.from(
+          je.value.querySelectorAll(
+            'a[href], button:not([disabled]), textarea, input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+          )
+        );
+        if (M.length === 0) return;
+        const J = M[0], U = M[M.length - 1];
+        y.shiftKey ? document.activeElement === J && (y.preventDefault(), U.focus()) : document.activeElement === U && (y.preventDefault(), J.focus());
+      }
+    }
+    Z("layerboard-open-modal", Se), Z("layerboard-close-modal", ne), Z("layerboard-is-modal-open", j(ge)), i({
       /** Layer configurations */
-      layerList: l,
+      layerList: n,
       /** Set of visible layer IDs */
-      visibleLayers: m,
+      visibleLayers: h,
       /** Layer opacity values */
-      layerOpacities: v,
+      layerOpacities: g,
       /** Set of currently loading layer IDs */
-      loadingLayers: s,
+      loadingLayers: a,
       /** Map of layer errors by ID */
-      layerErrors: d,
+      layerErrors: v,
       /** Current map zoom level */
-      currentZoom: f,
+      currentZoom: p,
       /** Toggle a layer's visibility */
-      toggleLayer: Ce,
+      toggleLayer: _e,
       /** Set a layer's visibility explicitly */
-      setLayerVisible: fe,
+      setLayerVisible: Me,
       /** Set multiple layers' visibility at once */
-      setLayersVisible: ke,
+      setLayersVisible: Re,
       /** Set a layer's opacity */
-      setLayerOpacity: pe,
+      setLayerOpacity: Pe,
       /** Reload layer configurations */
-      reloadConfigs: Te,
+      reloadConfigs: De,
       /** Clear configuration cache */
-      clearCache: () => Qo(o.webMapId),
+      clearCache: () => sa(o.webMapId),
       // Tiled layer APIs
       /** Set of visible tiled layer IDs */
-      visibleTiledLayers: y,
+      visibleTiledLayers: L,
       /** Tiled layer opacity values */
       tiledLayerOpacities: S,
       /** Toggle a tiled layer's visibility */
-      toggleTiledLayer: b,
+      toggleTiledLayer: D,
       /** Set a tiled layer's visibility explicitly */
-      setTiledLayerVisible: E,
+      setTiledLayerVisible: X,
       /** Set a tiled layer's opacity */
       setTiledLayerOpacity: T,
       // Data source APIs
       /** State of all data sources */
-      dataSourcesState: q,
+      dataSourcesState: _,
       /** Whether any data source is loading */
-      dataSourcesLoading: ce,
+      dataSourcesLoading: te,
       /** Get data from a specific data source */
-      getDataSourceData: Le,
+      getDataSourceData: N,
       /** Refetch a specific data source */
-      refetchDataSource: Se,
+      refetchDataSource: me,
       // Modal APIs
       /** Whether the modal is currently open */
-      isModalOpen: te,
+      isModalOpen: ge,
       /** Open the modal */
-      openModal: be,
+      openModal: Se,
       /** Close the modal */
-      closeModal: le
-    }), Ve(() => {
-      Te(), qe(), g();
-    }), (L, F) => (p(), w("div", tn, [
+      closeModal: ne
+    });
+    function Xe(y) {
+      y.key === "Escape" && le.value && Ee();
+    }
+    return et(() => {
+      De(), nt(), E(), document.addEventListener("keydown", Xe);
+    }), Jt(() => {
+      document.removeEventListener("keydown", Xe);
+    }), (y, M) => (m(), $("div", pa, [
+      M[5] || (M[5] = P("a", {
+        href: "#main-content",
+        class: "skip-to-main-content-link"
+      }, "Skip to main content", -1)),
       P("header", {
         class: "layerboard-header",
-        style: ee(We.value)
+        style: fe(he.value)
       }, [
-        F[1] || (F[1] = P("a", {
+        M[1] || (M[1] = P("a", {
           href: "https://www.phila.gov/",
           class: "layerboard-logo layerboard-desktop-only"
         }, [
@@ -1973,121 +2162,143 @@ const tn = { class: "layerboard-layout" }, on = {
             alt: "City of Philadelphia"
           })
         ], -1)),
-        F[2] || (F[2] = P("span", { class: "layerboard-header-divider layerboard-desktop-only" }, null, -1)),
+        M[2] || (M[2] = P("span", {
+          class: "layerboard-header-divider layerboard-desktop-only",
+          "aria-hidden": "true"
+        }, null, -1)),
         P("button", {
+          ref_key: "hamburgerRef",
+          ref: Fe,
           class: "layerboard-hamburger layerboard-mobile-only",
-          onClick: Je,
-          "aria-label": "Toggle menu"
+          "aria-expanded": le.value,
+          "aria-label": "Toggle menu",
+          onClick: Qe
         }, [
-          K(_(ue), {
-            "icon-definition": _(mo),
+          H(d(ke), {
+            "icon-definition": d(ko),
             size: "medium",
+            inline: "",
             decorative: ""
           }, null, 8, ["icon-definition"])
-        ]),
-        ae(L.$slots, "header", {}, () => [
-          P("h1", null, j(e.title), 1),
-          e.subtitle ? (p(), w("span", on, j(e.subtitle), 1)) : O("", !0)
+        ], 8, ya),
+        pe(y.$slots, "header", {}, () => [
+          P("h1", null, G(e.title), 1),
+          e.subtitle ? (m(), $("span", ma, G(e.subtitle), 1)) : A("", !0)
         ], !0),
-        ve.value ? (p(), w("div", {
+        le.value ? (m(), $("div", {
           key: 0,
+          ref_key: "mobileMenuRef",
+          ref: We,
           class: "layerboard-mobile-menu",
-          style: ee({ backgroundColor: e.themeColor })
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Site menu",
+          style: fe({ backgroundColor: e.themeColor }),
+          onKeydown: ut
         }, [
-          P("div", nn, [
-            ae(L.$slots, "footer", {
-              openModal: be,
-              closeModal: le,
-              isModalOpen: te.value
+          P("div", ha, [
+            pe(y.$slots, "footer", {
+              openModal: Se,
+              closeModal: ne,
+              isModalOpen: ge.value
             }, () => [
-              F[0] || (F[0] = me(" City of Philadelphia ", -1))
+              M[0] || (M[0] = xe(" City of Philadelphia ", -1))
             ], !0)
           ]),
           P("button", {
+            ref_key: "mobileMenuCloseRef",
+            ref: we,
             class: "layerboard-mobile-menu-close",
-            onClick: De,
-            "aria-label": "Close menu"
+            "aria-label": "Close menu",
+            onClick: Ee
           }, [
-            K(_(ue), {
-              "icon-definition": _(mt),
+            H(d(ke), {
+              "icon-definition": d(Et),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ])
-        ], 4)) : O("", !0),
-        ve.value ? (p(), w("div", {
+          ], 512)
+        ], 36)) : A("", !0),
+        le.value ? (m(), $("div", {
           key: 1,
           class: "layerboard-mobile-menu-backdrop",
-          onClick: De
-        })) : O("", !0)
+          onClick: Ee
+        })) : A("", !0)
       ], 4),
-      P("div", an, [
-        c.value ? (p(), w("div", ln, [
+      P("div", ga, [
+        c.value ? (m(), $("div", va, [
           P("div", {
             class: "layerboard-spinner",
-            style: ee({ borderTopColor: e.themeColor })
+            style: fe({ borderTopColor: e.themeColor })
           }, null, 4),
-          P("p", null, "Loading " + j(e.title) + "...", 1)
-        ])) : h.value ? (p(), w("div", rn, [
-          F[3] || (F[3] = P("h2", null, "Error Loading Layers", -1)),
-          P("p", null, j(h.value), 1),
+          P("p", null, "Loading " + G(e.title) + "...", 1)
+        ])) : w.value ? (m(), $("div", ba, [
+          M[3] || (M[3] = P("h2", null, "Error Loading Layers", -1)),
+          P("p", null, G(w.value), 1),
           P("button", {
             class: "layerboard-retry-button",
-            style: ee({ backgroundColor: e.themeColor }),
-            onClick: Te
+            style: fe({ backgroundColor: e.themeColor }),
+            onClick: De
           }, " Retry ", 4)
-        ])) : (p(), w(ie, { key: 2 }, [
+        ])) : (m(), $(ue, { key: 2 }, [
           P("aside", {
-            class: ne(["layerboard-sidebar", { "is-active": J.value === "sidebar" }]),
-            style: ee(Ie.value)
+            id: "main-content",
+            ref_key: "sidebarRef",
+            ref: ie,
+            class: re(["layerboard-sidebar", { "is-active": Le.value === "sidebar" }]),
+            style: fe(lt.value),
+            "aria-label": "Map layers",
+            tabindex: "-1"
           }, [
-            ae(L.$slots, "sidebar", {
-              layers: l.value,
-              visibleLayers: m.value,
-              layerOpacities: v.value,
-              loadingLayers: s.value,
-              layerErrors: d.value,
-              currentZoom: f.value,
-              toggleLayer: Ce,
-              setLayerVisible: fe,
-              setLayersVisible: ke,
-              setOpacity: pe,
+            pe(y.$slots, "sidebar", {
+              layers: n.value,
+              visibleLayers: h.value,
+              layerOpacities: g.value,
+              loadingLayers: a.value,
+              layerErrors: v.value,
+              currentZoom: p.value,
+              toggleLayer: _e,
+              setLayerVisible: Me,
+              setLayersVisible: Re,
+              setOpacity: Pe,
               tiledLayers: e.tiledLayers,
-              visibleTiledLayers: y.value,
+              visibleTiledLayers: L.value,
               tiledLayerOpacities: S.value,
-              toggleTiledLayer: b,
-              setTiledLayerVisible: E,
+              toggleTiledLayer: D,
+              setTiledLayerVisible: X,
               setTiledLayerOpacity: T,
-              dataSourcesState: q.value,
-              dataSourcesLoading: ce.value,
-              getDataSource: Le,
-              refetchDataSource: Se
+              dataSourcesState: _.value,
+              dataSourcesLoading: te.value,
+              getDataSource: N,
+              refetchDataSource: me
             }, () => [
-              e.showDefaultSidebar ? (p(), Y(Do, {
+              e.showDefaultSidebar ? (m(), q(Go, {
                 key: 0,
-                "layer-list": l.value,
-                "visible-layers": m.value,
-                "layer-opacities": v.value,
-                "loading-layers": s.value,
-                "layer-errors": d.value,
-                "current-zoom": f.value,
-                "search-query": M.value,
-                "layer-metadata": $.value,
-                onToggleLayer: Ce,
-                onSetOpacity: pe,
-                onUpdateSearch: ye
-              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : O("", !0)
+                "layer-list": n.value,
+                "visible-layers": h.value,
+                "layer-opacities": g.value,
+                "loading-layers": a.value,
+                "layer-errors": v.value,
+                "current-zoom": p.value,
+                "search-query": x.value,
+                "layer-metadata": f.value,
+                onToggleLayer: _e,
+                onSetOpacity: Pe,
+                onUpdateSearch: Ae
+              }, null, 8, ["layer-list", "visible-layers", "layer-opacities", "loading-layers", "layer-errors", "current-zoom", "search-query", "layer-metadata"])) : A("", !0)
             ], !0)
           ], 6),
           P("div", {
-            class: ne(["layerboard-map", { "is-active": J.value === "map" }])
+            role: "main",
+            "aria-label": "Map",
+            class: re(["layerboard-map", { "is-active": Le.value === "map" }])
           }, [
-            K(Xt, {
-              "visible-layers": m.value,
-              "layer-opacities": v.value,
-              "layer-list": l.value,
+            H(lo, {
+              "visible-layers": h.value,
+              "layer-opacities": g.value,
+              "layer-list": n.value,
               "tiled-layers": e.tiledLayers,
-              "visible-tiled-layers": y.value,
+              "visible-tiled-layers": L.value,
               "tiled-layer-opacities": S.value,
               "cyclomedia-config": e.cyclomediaConfig,
               "pictometry-credentials": e.pictometryCredentials,
@@ -2100,113 +2311,130 @@ const tn = { class: "layerboard-layout" }, on = {
               "pictometry-button-position": e.pictometryButtonPosition,
               "initial-zoom": e.initialZoom,
               "initial-center": e.initialCenter,
-              onZoom: Ge,
-              onLayerLoading: He,
-              onLayerError: oe
+              onZoom: rt,
+              onLayerLoading: st,
+              onLayerError: se
             }, null, 8, ["visible-layers", "layer-opacities", "layer-list", "tiled-layers", "visible-tiled-layers", "tiled-layer-opacities", "cyclomedia-config", "pictometry-credentials", "basemap-control-position", "navigation-control-position", "geolocation-control-position", "search-control-position", "draw-control-position", "cyclomedia-button-position", "pictometry-button-position", "initial-zoom", "initial-center"])
           ], 2),
           P("button", {
-            class: ne(["layerboard-sidebar-toggle", { "is-collapsed": ge.value }]),
-            style: ee({ left: ge.value ? "0" : o.sidebarWidth }),
-            onClick: xe,
-            "aria-label": "Toggle sidebar"
+            class: re(["layerboard-sidebar-toggle", { "is-collapsed": de.value }]),
+            style: fe({ left: de.value ? "0" : o.sidebarWidth }),
+            "aria-expanded": !de.value,
+            "aria-label": de.value ? "Expand sidebar" : "Collapse sidebar",
+            onClick: Ie
           }, [
-            K(_(ue), {
-              "icon-definition": ge.value ? _(go) : _(ho),
+            H(d(ke), {
+              "icon-definition": de.value ? d(So) : d(Co),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ], 6)
+          ], 14, wa)
         ], 64))
       ]),
       P("button", {
+        ref_key: "mobileToggleRef",
+        ref: ct,
         class: "layerboard-mobile-toggle",
-        style: ee(ze.value),
-        onClick: $e
+        style: fe(Je.value),
+        onClick: Be
       }, [
-        J.value === "map" ? (p(), w("span", sn, j(e.sidebarLabel), 1)) : (p(), w("span", cn, j(e.mapLabel), 1))
+        Le.value === "map" ? (m(), $("span", La, G(e.sidebarLabel), 1)) : (m(), $("span", Sa, G(e.mapLabel), 1))
       ], 4),
       P("footer", {
         class: "layerboard-footer",
-        style: ee(je.value)
+        style: fe(Ue.value)
       }, [
-        ae(L.$slots, "footer", {
-          openModal: be,
-          closeModal: le,
-          isModalOpen: te.value
+        pe(y.$slots, "footer", {
+          openModal: Se,
+          closeModal: ne,
+          isModalOpen: ge.value
         }, () => [
-          F[4] || (F[4] = me(" City of Philadelphia ", -1))
+          M[4] || (M[4] = xe(" City of Philadelphia ", -1))
         ], !0)
       ], 4),
-      te.value ? (p(), w("div", {
+      ge.value ? (m(), $("div", {
         key: 0,
         class: "layerboard-modal-backdrop",
-        onClick: Ze
+        onClick: Ze,
+        onKeydown: dt
       }, [
-        P("div", un, [
+        P("div", {
+          ref_key: "modalRef",
+          ref: je,
+          class: "layerboard-modal",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Application information"
+        }, [
           P("button", {
+            ref_key: "modalCloseRef",
+            ref: Ke,
             class: "layerboard-modal-close",
-            onClick: le,
-            "aria-label": "Close modal"
+            "aria-label": "Close modal",
+            onClick: ne
           }, [
-            K(_(ue), {
-              "icon-definition": _(mt),
+            H(d(ke), {
+              "icon-definition": d(Et),
               size: "medium",
               decorative: ""
             }, null, 8, ["icon-definition"])
-          ]),
-          ae(L.$slots, "modal", { closeModal: le }, void 0, !0)
-        ])
-      ])) : O("", !0)
+          ], 512),
+          pe(y.$slots, "modal", { closeModal: ne }, void 0, !0)
+        ], 512)
+      ], 32)) : A("", !0),
+      P("span", Ca, G(Le.value === "sidebar" ? "Showing layers panel" : "Showing map"), 1)
     ]));
   }
-}), Vn = /* @__PURE__ */ Oe(dn, [["__scopeId", "data-v-dac16679"]]), fn = ["aria-expanded"], pn = {
+}), Ga = /* @__PURE__ */ $e(ka, [["__scopeId", "data-v-67021805"]]), xa = ["aria-expanded"], $a = {
   key: 0,
   class: "topic-icon"
-}, yn = { class: "topic-title" }, gn = { class: "topic-content" }, hn = /* @__PURE__ */ we({
+}, Ma = { class: "topic-title" }, Pa = /* @__PURE__ */ ye({
   __name: "TopicAccordion",
   props: {
     title: {},
-    icon: {},
+    icon: { default: void 0 },
     expanded: { type: Boolean, default: !1 },
     layerIds: { default: () => [] },
-    headerClass: {}
+    headerClass: { default: void 0 }
   },
   emits: ["toggle", "layerChange"],
-  setup(e, { emit: n }) {
-    const t = e, o = n, a = C(t.expanded);
-    Pe(
-      () => t.expanded,
-      (c) => {
-        a.value = c;
+  setup(e, { emit: i }) {
+    const l = e, o = i, r = k(l.expanded), n = `topic-panel-${$t()}`, c = `topic-header-${$t()}`;
+    Oe(
+      () => l.expanded,
+      (p) => {
+        r.value = p;
       }
     );
-    function l() {
-      a.value = !a.value, o("toggle", a.value);
+    function w() {
+      r.value = !r.value, o("toggle", r.value);
     }
-    return (c, h) => {
-      const f = _t("font-awesome-icon");
-      return p(), w("div", {
-        class: ne(["topic-accordion", { "is-expanded": a.value }])
+    return (p, x) => {
+      const h = Kt("font-awesome-icon");
+      return m(), $("div", {
+        class: re(["topic-accordion", { "is-expanded": r.value }])
       }, [
         P("button", {
-          class: ne(["topic-header", e.headerClass]),
+          id: c,
+          class: re(["topic-header", e.headerClass]),
           type: "button",
-          "aria-expanded": a.value,
-          onClick: l
+          "aria-expanded": r.value,
+          "aria-controls": n,
+          onClick: w
         }, [
-          e.icon || c.$slots.icon ? (p(), w("span", pn, [
-            ae(c.$slots, "icon", {}, () => [
-              e.icon ? (p(), Y(f, {
+          e.icon || p.$slots.icon ? (m(), $("span", $a, [
+            pe(p.$slots, "icon", {}, () => [
+              e.icon ? (m(), q(h, {
                 key: 0,
-                icon: ["fas", e.icon]
-              }, null, 8, ["icon"])) : O("", !0)
+                icon: ["fas", e.icon],
+                "aria-hidden": "true"
+              }, null, 8, ["icon"])) : A("", !0)
             ], !0)
-          ])) : O("", !0),
-          P("span", yn, j(e.title), 1),
+          ])) : A("", !0),
+          P("span", Ma, G(e.title), 1),
           P("span", {
-            class: ne(["topic-chevron", { "is-rotated": a.value }])
-          }, [...h[0] || (h[0] = [
+            class: re(["topic-chevron", { "is-rotated": r.value }])
+          }, [...x[0] || (x[0] = [
             P("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               width: "20",
@@ -2216,44 +2444,45 @@ const tn = { class: "layerboard-layout" }, on = {
               stroke: "currentColor",
               "stroke-width": "2",
               "stroke-linecap": "round",
-              "stroke-linejoin": "round"
+              "stroke-linejoin": "round",
+              "aria-hidden": "true"
             }, [
               P("polyline", { points: "6 9 12 15 18 9" })
             ], -1)
           ])], 2)
-        ], 10, fn),
-        St(P("div", gn, [
-          ae(c.$slots, "default", {}, () => [
-            h[1] || (h[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
+        ], 10, xa),
+        Rt(P("div", {
+          id: n,
+          role: "region",
+          "aria-labelledby": c,
+          class: "topic-content"
+        }, [
+          pe(p.$slots, "default", {}, () => [
+            x[1] || (x[1] = P("p", { class: "topic-empty" }, "No content provided for this topic.", -1))
           ], !0)
         ], 512), [
-          [Ot, a.value]
+          [Qt, r.value]
         ])
       ], 2);
     };
   }
-}), An = /* @__PURE__ */ Oe(hn, [["__scopeId", "data-v-fb48c75b"]]), mn = { class: "layer-checkbox-set" }, vn = ["checked", "disabled", "onChange"], bn = { class: "layer-title" }, wn = {
-  key: 0,
-  class: "loading-indicator"
-}, Ln = ["title"], Sn = {
-  key: 2,
-  class: "zoom-indicator"
-}, Cn = { class: "layer-title" }, kn = {
-  key: 0,
-  class: "loading-indicator"
-}, $n = ["title"], xn = {
-  key: 2,
-  class: "zoom-indicator"
-}, Pn = {
-  key: 2,
-  class: "opacity-control"
-}, Mn = { class: "opacity-label" }, Fn = ["value", "onInput"], zn = {
-  key: 3,
-  class: "layer-legend"
-}, Tn = { class: "legend-label" }, En = {
+}), Ha = /* @__PURE__ */ $e(Pa, [["__scopeId", "data-v-a2023afa"]]);
+function Ta(e) {
+  return e.displayOptions?.shouldShowCheckbox !== !1;
+}
+function Vt(e, i) {
+  return i ? e.displayOptions?.shouldShowSlider !== !1 : !1;
+}
+function Nt(e, i) {
+  return i ? e.displayOptions?.shouldShowLegendBox !== !1 : !1;
+}
+function ze(e) {
+  return e.displayOptions?.layerNameChange || e.title;
+}
+const Fa = ["aria-label"], Ea = ["checked", "disabled", "onChange"], Ia = { class: "layer-title" }, Oa = { class: "layer-title" }, za = {
   key: 0,
   class: "empty-state"
-}, _n = /* @__PURE__ */ we({
+}, Da = /* @__PURE__ */ ye({
   __name: "LayerCheckboxSet",
   props: {
     layers: {},
@@ -2263,326 +2492,350 @@ const tn = { class: "layerboard-layout" }, on = {
     layerErrors: { default: () => ({}) },
     currentZoom: { default: 12 },
     showOpacity: { type: Boolean, default: !0 },
-    showLegend: { type: Boolean, default: !0 }
+    showLegend: { type: Boolean, default: !0 },
+    groupLabel: { default: void 0 }
   },
   emits: ["toggleLayer", "setOpacity"],
-  setup(e, { emit: n }) {
-    const t = e, o = n;
-    function a(y) {
-      return t.visibleLayerIds.has(y);
-    }
-    function l(y) {
-      return t.layerOpacities[y] ?? 1;
-    }
-    function c(y) {
-      return t.loadingLayerIds.has(y);
-    }
-    function h(y) {
-      return t.layerErrors[y] || null;
-    }
-    function f(y) {
-      const S = t.currentZoom, g = y.minZoom, b = y.maxZoom;
-      return !(g !== void 0 && S < g || b !== void 0 && S > b);
-    }
-    function M(y) {
-      return y.displayOptions?.shouldShowCheckbox !== !1;
-    }
-    function m(y) {
-      return t.showOpacity ? y.displayOptions?.shouldShowSlider !== !1 : !1;
-    }
-    function v(y) {
-      return t.showLegend ? y.displayOptions?.shouldShowLegendBox !== !1 : !1;
-    }
-    function s(y) {
-      return y.displayOptions?.layerNameChange || y.title;
-    }
-    function d(y) {
-      o("toggleLayer", y);
-    }
-    function $(y, S) {
-      const g = S.target;
-      o("setOpacity", y, parseFloat(g.value));
+  setup(e, { emit: i }) {
+    const l = e, o = i, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: w, isLayerAvailableAtZoom: p } = bt(
+      () => l
+    );
+    function x(h) {
+      o("toggleLayer", h);
     }
-    return (y, S) => (p(), w("div", mn, [
-      (p(!0), w(ie, null, se(e.layers, (g) => (p(), w("div", {
-        key: g.id,
+    return (h, g) => (m(), $("fieldset", {
+      class: "layer-checkbox-set",
+      role: "group",
+      "aria-label": e.groupLabel
+    }, [
+      (m(!0), $(ue, null, ve(e.layers, (a) => (m(), $("div", {
+        key: a.id,
         class: "layer-item"
       }, [
-        M(g) ? (p(), w("label", {
+        d(Ta)(a) ? (m(), $("label", {
           key: 0,
-          class: ne(["layer-checkbox", {
-            "layer-unavailable": !f(g),
-            "layer-error": h(g.id)
+          class: re(["layer-checkbox", {
+            "layer-unavailable": !d(p)(a),
+            "layer-error": d(w)(a.id)
           }])
         }, [
           P("input", {
             type: "checkbox",
-            checked: a(g.id),
-            disabled: !f(g),
-            onChange: (b) => d(g.id)
-          }, null, 40, vn),
-          P("span", bn, [
-            me(j(s(g)) + " ", 1),
-            c(g.id) ? (p(), w("span", wn, " Loading... ")) : O("", !0),
-            h(g.id) ? (p(), w("span", {
-              key: 1,
-              class: "error-indicator",
-              title: h(g.id) || ""
-            }, " Error ", 8, Ln)) : O("", !0),
-            f(g) ? O("", !0) : (p(), w("span", Sn, " (zoom in) "))
+            checked: d(r)(a.id),
+            disabled: !d(p)(a),
+            onChange: (v) => x(a.id)
+          }, null, 40, Ea),
+          P("span", Ia, [
+            xe(G(d(ze)(a)) + " ", 1),
+            H(tt, {
+              loading: d(c)(a.id),
+              error: d(w)(a.id),
+              unavailable: !d(p)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
           ])
-        ], 2)) : (p(), w("div", {
+        ], 2)) : (m(), $("div", {
           key: 1,
-          class: ne(["layer-label-only", {
-            "layer-unavailable": !f(g),
-            "layer-error": h(g.id)
+          class: re(["layer-label-only", {
+            "layer-unavailable": !d(p)(a),
+            "layer-error": d(w)(a.id)
           }])
         }, [
-          P("span", Cn, [
-            me(j(s(g)) + " ", 1),
-            c(g.id) ? (p(), w("span", kn, " Loading... ")) : O("", !0),
-            h(g.id) ? (p(), w("span", {
-              key: 1,
-              class: "error-indicator",
-              title: h(g.id) || ""
-            }, " Error ", 8, $n)) : O("", !0),
-            f(g) ? O("", !0) : (p(), w("span", xn, " (zoom in) "))
+          P("span", Oa, [
+            xe(G(d(ze)(a)) + " ", 1),
+            H(tt, {
+              loading: d(c)(a.id),
+              error: d(w)(a.id),
+              unavailable: !d(p)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
           ])
         ], 2)),
-        m(g) && a(g.id) ? (p(), w("div", Pn, [
-          P("label", Mn, " Opacity: " + j(Math.round(l(g.id) * 100)) + "% ", 1),
+        d(Vt)(a, e.showOpacity) && d(r)(a.id) && d(p)(a) ? (m(), q(gt, {
+          key: 2,
+          "layer-id": a.id,
+          "layer-name": d(ze)(a),
+          opacity: d(n)(a.id),
+          "onUpdate:opacity": (v) => o("setOpacity", a.id, v)
+        }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
+        d(Nt)(a, e.showLegend) && d(r)(a.id) && d(p)(a) && a.legend?.length ? (m(), q(vt, {
+          key: 3,
+          items: a.legend,
+          label: "Legend for " + d(ze)(a)
+        }, null, 8, ["items", "label"])) : A("", !0)
+      ]))), 128)),
+      e.layers.length === 0 ? (m(), $("div", za, "No layers available")) : A("", !0)
+    ], 8, Fa));
+  }
+}), Ja = /* @__PURE__ */ $e(Da, [["__scopeId", "data-v-bfcd7855"]]), _a = ["aria-label"], Ra = ["name", "checked", "disabled", "onChange"], Aa = { class: "layer-title" }, Ba = {
+  key: 0,
+  class: "empty-state"
+}, Za = /* @__PURE__ */ ye({
+  __name: "LayerRadioButtonSet",
+  props: {
+    layers: {},
+    visibleLayerIds: {},
+    layerOpacities: { default: () => ({}) },
+    loadingLayerIds: { default: () => /* @__PURE__ */ new Set() },
+    layerErrors: { default: () => ({}) },
+    currentZoom: { default: 12 },
+    showOpacity: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    groupName: { default: "layer-radio-group" },
+    groupLabel: { default: void 0 }
+  },
+  emits: ["selectLayer", "setOpacity"],
+  setup(e, { emit: i }) {
+    const l = e, o = i, { isVisible: r, getLayerOpacity: n, isLayerLoading: c, getLayerError: w, isLayerAvailableAtZoom: p } = bt(
+      () => l
+    );
+    function x(h) {
+      const g = l.layers.filter((a) => l.visibleLayerIds.has(a.id) && a.id !== h).map((a) => a.id);
+      o("selectLayer", h, g);
+    }
+    return (h, g) => (m(), $("div", {
+      class: "layer-radio-set",
+      role: "radiogroup",
+      "aria-label": e.groupLabel
+    }, [
+      (m(!0), $(ue, null, ve(e.layers, (a) => (m(), $("div", {
+        key: a.id,
+        class: "layer-item"
+      }, [
+        P("label", {
+          class: re(["layer-radio", {
+            "layer-unavailable": !d(p)(a),
+            "layer-error": d(w)(a.id)
+          }])
+        }, [
           P("input", {
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.05",
-            value: l(g.id),
-            class: "opacity-slider",
-            onInput: (b) => $(g.id, b)
-          }, null, 40, Fn)
-        ])) : O("", !0),
-        v(g) && a(g.id) && g.legend?.length ? (p(), w("ul", zn, [
-          (p(!0), w(ie, null, se(g.legend, (b, E) => (p(), w("li", {
-            key: E,
-            class: "legend-item"
-          }, [
-            b.type === "circle" ? (p(), w("span", {
-              key: 0,
-              class: "legend-symbol legend-circle",
-              style: ee({ backgroundColor: b.color })
-            }, null, 4)) : b.type === "line" ? (p(), w("span", {
-              key: 1,
-              class: "legend-symbol legend-line",
-              style: ee({
-                backgroundColor: b.color,
-                height: `${b.width || 2}px`
-              })
-            }, null, 4)) : b.type === "fill" ? (p(), w("span", {
-              key: 2,
-              class: "legend-symbol legend-fill",
-              style: ee({ backgroundColor: b.color })
-            }, null, 4)) : O("", !0),
-            P("span", Tn, j(b.label), 1)
-          ]))), 128))
-        ])) : O("", !0)
+            type: "radio",
+            name: e.groupName,
+            checked: d(r)(a.id),
+            disabled: !d(p)(a),
+            onChange: (v) => x(a.id)
+          }, null, 40, Ra),
+          P("span", Aa, [
+            xe(G(d(ze)(a)) + " ", 1),
+            H(tt, {
+              loading: d(c)(a.id),
+              error: d(w)(a.id),
+              unavailable: !d(p)(a)
+            }, null, 8, ["loading", "error", "unavailable"])
+          ])
+        ], 2),
+        d(Vt)(a, e.showOpacity) && d(r)(a.id) && d(p)(a) ? (m(), q(gt, {
+          key: 0,
+          "layer-id": a.id,
+          "layer-name": d(ze)(a),
+          opacity: d(n)(a.id),
+          "onUpdate:opacity": (v) => o("setOpacity", a.id, v)
+        }, null, 8, ["layer-id", "layer-name", "opacity", "onUpdate:opacity"])) : A("", !0),
+        d(Nt)(a, e.showLegend) && d(r)(a.id) && d(p)(a) && a.legend?.length ? (m(), q(vt, {
+          key: 1,
+          items: a.legend,
+          label: "Legend for " + d(ze)(a)
+        }, null, 8, ["items", "label"])) : A("", !0)
       ]))), 128)),
-      e.layers.length === 0 ? (p(), w("div", En, " No layers available ")) : O("", !0)
-    ]));
+      e.layers.length === 0 ? (m(), $("div", Ba, "No layers available")) : A("", !0)
+    ], 8, _a));
   }
-}), Nn = /* @__PURE__ */ Oe(_n, [["__scopeId", "data-v-cc5e50fd"]]);
-function Un(e) {
-  const n = C([]), t = C(/* @__PURE__ */ new Set()), o = C({}), a = C(/* @__PURE__ */ new Set()), l = C({}), c = C(""), h = C(!1), f = C(!1), M = C(null), m = I(() => {
+}), Ka = /* @__PURE__ */ $e(Za, [["__scopeId", "data-v-c368d815"]]);
+function Qa(e) {
+  const i = k([]), l = k(/* @__PURE__ */ new Set()), o = k({}), r = k(/* @__PURE__ */ new Set()), n = k({}), c = k(""), w = k(!1), p = k(!1), x = k(null), h = z(() => {
     if (!c.value.trim())
-      return n.value;
+      return i.value;
     const T = c.value.toLowerCase();
-    return n.value.filter(
-      (B) => B.title.toLowerCase().includes(T)
-    );
-  }), v = I(() => n.value.map((T) => ({
+    return i.value.filter((I) => I.title.toLowerCase().includes(T));
+  }), g = z(() => i.value.map((T) => ({
     config: T,
     component: T.type
     // "circle", "fill", or "line"
   })));
-  async function s() {
-    if (!f.value) {
-      h.value = !0, M.value = null;
+  async function a() {
+    if (!p.value) {
+      w.value = !0, x.value = null;
       try {
         let T;
-        e.mode === "dynamic" || !e.mode ? e.webMapId ? T = await d(e.webMapId) : T = await it() : T = await it(), n.value = T;
-        const B = {};
-        T.forEach((q) => {
-          B[q.id] = q.opacity ?? 1;
-        }), o.value = B, f.value = !0;
+        e.mode === "dynamic" || !e.mode ? e.webMapId ? T = await v(e.webMapId) : T = await ht() : T = await ht(), i.value = T;
+        const I = {};
+        T.forEach((_) => {
+          I[_.id] = _.opacity ?? 1;
+        }), o.value = I, p.value = !0;
       } catch (T) {
-        M.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
+        x.value = T instanceof Error ? T : new Error("Failed to initialize layerboard");
       } finally {
-        h.value = !1;
+        w.value = !1;
       }
     }
   }
-  async function d(T) {
-    const B = lt(T), q = await fetch(B);
-    if (!q.ok)
-      throw new Error(`Failed to fetch WebMap: ${q.status} ${q.statusText}`);
-    const ce = await q.json();
-    return kt(ce);
+  async function v(T) {
+    const I = Lt(T), _ = await fetch(I, { cache: "no-store" });
+    if (!_.ok)
+      throw new Error(`Failed to fetch WebMap: ${_.status} ${_.statusText}`);
+    const te = await _.json();
+    return Zt(te);
   }
-  function $(T) {
-    const B = new Set(t.value);
-    B.has(T) ? B.delete(T) : B.add(T), t.value = B;
+  function f(T) {
+    const I = new Set(l.value);
+    I.has(T) ? I.delete(T) : I.add(T), l.value = I;
   }
-  function y(T, B) {
+  function L(T, I) {
     o.value = {
       ...o.value,
-      [T]: Math.max(0, Math.min(1, B))
+      [T]: Math.max(0, Math.min(1, I))
     };
   }
   function S(T) {
     c.value = T;
   }
-  function g(T, B) {
-    const q = new Set(a.value);
-    B ? q.add(T) : q.delete(T), a.value = q;
+  function E(T, I) {
+    const _ = new Set(r.value);
+    I ? _.add(T) : _.delete(T), r.value = _;
   }
-  function b(T, B) {
-    if (B)
-      l.value = { ...l.value, [T]: B };
+  function D(T, I) {
+    if (I)
+      n.value = { ...n.value, [T]: I };
     else {
-      const { [T]: q, ...ce } = l.value;
-      l.value = ce;
+      const _ = { ...n.value };
+      delete _[T], n.value = _;
     }
   }
-  function E() {
-    n.value = [], t.value = /* @__PURE__ */ new Set(), o.value = {}, a.value = /* @__PURE__ */ new Set(), l.value = {}, c.value = "", h.value = !1, f.value = !1, M.value = null;
+  function X() {
+    i.value = [], l.value = /* @__PURE__ */ new Set(), o.value = {}, r.value = /* @__PURE__ */ new Set(), n.value = {}, c.value = "", w.value = !1, p.value = !1, x.value = null;
   }
   return {
     // State (readonly)
-    layerConfigs: W(n),
-    visibleLayers: W(t),
-    layerOpacities: W(o),
-    loadingLayers: W(a),
-    layerErrors: W(l),
-    searchQuery: W(c),
-    isLoading: W(h),
-    isInitialized: W(f),
-    error: W(M),
+    layerConfigs: j(i),
+    visibleLayers: j(l),
+    layerOpacities: j(o),
+    loadingLayers: j(r),
+    layerErrors: j(n),
+    searchQuery: j(c),
+    isLoading: j(w),
+    isInitialized: j(p),
+    error: j(x),
     // Computed
-    filteredLayerConfigs: m,
-    layerList: v,
+    filteredLayerConfigs: h,
+    layerList: g,
     // Config
     config: e,
     // Methods
-    initialize: s,
-    toggleLayer: $,
-    setLayerOpacity: y,
+    initialize: a,
+    toggleLayer: f,
+    setLayerOpacity: L,
     filterLayers: S,
-    setLayerLoading: g,
-    setLayerError: b,
-    reset: E
+    setLayerLoading: E,
+    setLayerError: D,
+    reset: X
   };
 }
-function Wn() {
-  const e = C([]), n = C(/* @__PURE__ */ new Set()), t = C(/* @__PURE__ */ new Set());
-  function o(l) {
-    n.value.has(l) ? n.value.delete(l) : n.value.add(l);
+function Xa() {
+  const e = k([]), i = k(/* @__PURE__ */ new Set()), l = k(/* @__PURE__ */ new Set());
+  function o(n) {
+    i.value.has(n) ? i.value.delete(n) : i.value.add(n);
   }
-  function a(l) {
-    e.value = l;
+  function r(n) {
+    e.value = n;
   }
   return {
-    layers: I(() => e.value),
-    visibleLayerIds: I(() => n.value),
-    loadingLayerIds: I(() => t.value),
+    layers: z(() => e.value),
+    visibleLayerIds: z(() => i.value),
+    loadingLayerIds: z(() => l.value),
     toggleLayer: o,
-    setLayers: a
+    setLayers: r
   };
 }
-function On(e) {
-  const n = C(null), t = C(!1), o = C(null), a = C(0);
-  async function l(f = {}) {
-    t.value = !0, o.value = null;
-    const M = e.pageSize || 2e3;
-    let m = 0, v = [], s = !0;
+function Va(e) {
+  const i = k(null), l = k(!1), o = k(null), r = k(0);
+  async function n(p = {}) {
+    l.value = !0, o.value = null;
+    const x = e.pageSize || 2e3;
+    let h = 0, g = [], a = !0;
     try {
-      for (; s; ) {
-        const $ = e.url.replace(/\/$/, ""), y = encodeURIComponent(f.where || e.where || "1=1");
-        let S = `${$}/query?where=${y}&outFields=*&returnGeometry=true&resultRecordCount=${M}&resultOffset=${m}&f=geojson`;
-        if (f.bounds) {
-          const E = JSON.stringify({
-            xmin: f.bounds.west,
-            ymin: f.bounds.south,
-            xmax: f.bounds.east,
-            ymax: f.bounds.north,
+      for (; a; ) {
+        const f = e.url.replace(/\/$/, ""), L = encodeURIComponent(p.where || e.where || "1=1");
+        let S = `${f}/query?where=${L}&outFields=*&returnGeometry=true&resultRecordCount=${x}&resultOffset=${h}&f=geojson`;
+        if (p.bounds) {
+          const X = JSON.stringify({
+            xmin: p.bounds.west,
+            ymin: p.bounds.south,
+            xmax: p.bounds.east,
+            ymax: p.bounds.north,
             spatialReference: { wkid: 4326 }
           });
-          S += `&geometry=${encodeURIComponent(E)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
+          S += `&geometry=${encodeURIComponent(X)}&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects`;
         }
-        const g = await fetch(S);
-        if (!g.ok)
-          throw new Error(`HTTP ${g.status}: ${g.statusText}`);
-        const b = await g.json();
-        b.features && b.features.length > 0 ? (v = v.concat(b.features), m += b.features.length, s = b.features.length === M) : s = !1;
+        const E = await fetch(S);
+        if (!E.ok)
+          throw new Error(`HTTP ${E.status}: ${E.statusText}`);
+        const D = await E.json();
+        D.features && D.features.length > 0 ? (g = g.concat(D.features), h += D.features.length, a = D.features.length === x) : a = !1;
       }
-      const d = {
+      const v = {
         type: "FeatureCollection",
-        features: v
+        features: g
       };
-      return n.value = d, a.value = v.length, d;
-    } catch (d) {
-      const $ = d instanceof Error ? d : new Error("Failed to fetch features");
-      throw o.value = $, $;
+      return i.value = v, r.value = g.length, v;
+    } catch (v) {
+      const f = v instanceof Error ? v : new Error("Failed to fetch features");
+      throw o.value = f, f;
     } finally {
-      t.value = !1;
+      l.value = !1;
     }
   }
   function c() {
-    n.value = null, a.value = 0, o.value = null;
+    i.value = null, r.value = 0, o.value = null;
   }
-  async function h(f = {}) {
-    return l(f);
+  async function w(p = {}) {
+    return n(p);
   }
   return {
     // State (readonly)
-    data: W(n),
-    isLoading: W(t),
-    error: W(o),
-    totalFeatures: W(a),
+    data: j(i),
+    isLoading: j(l),
+    error: j(o),
+    totalFeatures: j(r),
     // Config
     config: e,
     // Methods
-    fetch: l,
-    refetch: h,
+    fetch: n,
+    refetch: w,
     clear: c
   };
 }
-function jn(e, n, t) {
-  const o = On(e);
-  return Pe(
-    n,
-    async (a) => {
-      if (a) {
-        const l = t(a);
-        await o.fetch(l);
+function Ya(e, i, l) {
+  const o = Va(e);
+  return Oe(
+    i,
+    async (r) => {
+      if (r) {
+        const n = l(r);
+        await o.fetch(n);
       }
     },
     { immediate: !0 }
   ), o;
 }
 export {
-  Nn as LayerCheckboxSet,
-  Do as LayerPanel,
-  Vn as Layerboard,
-  Xt as MapPanel,
-  An as TopicAccordion,
-  Zn as WEBMAP_ID,
-  lt as buildWebMapUrl,
-  Qo as clearCache,
-  it as getLayerConfigs,
-  Bn as getWebMapUrl,
-  kt as transformWebMapToLayerConfigs,
-  en as useApiDataSources,
-  On as useDataSource,
-  Wn as useLayerConfig,
-  Un as useLayerboard,
-  jn as useReactiveDataSource
+  Ja as LayerCheckboxSet,
+  Go as LayerPanel,
+  Ka as LayerRadioButtonSet,
+  Ga as Layerboard,
+  lo as MapPanel,
+  Ha as TopicAccordion,
+  ja as WEBMAP_ID,
+  Lt as buildWebMapUrl,
+  sa as clearCache,
+  ht as getLayerConfigs,
+  ze as getLayerDisplayName,
+  qa as getWebMapUrl,
+  At as normalizeUrl,
+  Ta as shouldShowCheckbox,
+  Nt as shouldShowLegendBox,
+  Vt as shouldShowSlider,
+  Zt as transformWebMapToLayerConfigs,
+  fa as useApiDataSources,
+  Va as useDataSource,
+  Xa as useLayerConfig,
+  Qa as useLayerboard,
+  Ya as useReactiveDataSource
 };