@arcgis/map-components 5.2.0-next.11 → 5.2.0-next.13

package/dist/components/arcgis-layer-list-next/layer-list-item/customElement.js

@@ -1,29 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { html as c } from "lit";
-import { keyed as W } from "lit/directives/keyed.js";
-import { isLayerFromCatalog as Ae } from "@arcgis/core/layers/catalog/catalogUtils.js";
-import { safeClassMap as d, safeStyleMap as Ce, nothing as r } from "@arcgis/lumina";
-import { classes as P } from "@arcgis/toolkit/dom";
-import { createRef as X, ref as Y } from "lit/directives/ref.js";
-import { repeat as Se } from "lit/directives/repeat.js";
-import { g as Te, a as ie } from "../../../chunks/action-utils.js";
-import { h as xe, j as Z, l as Me, k as Le, n as Ee, o as ke, g as we } from "../../../chunks/layer-list-utils.js";
+import { keyed as Y } from "lit/directives/keyed.js";
+import { isLayerFromCatalog as Ce } from "@arcgis/core/layers/catalog/catalogUtils.js";
+import { safeClassMap as d, safeStyleMap as Se, nothing as r } from "@arcgis/lumina";
+import { classes as F } from "@arcgis/toolkit/dom";
+import { createRef as Z, ref as ee } from "lit/directives/ref.js";
+import { g as Te, a as le } from "../../../chunks/action-utils.js";
+import { h as xe, j as te, l as Me, k as Le, n as Ee, o as ke, g as we } from "../../../chunks/layer-list-utils.js";
 import { s as Pe } from "../../../chunks/component-utils.js";
-const ae = /* @__PURE__ */ new Map();
-function le(i) {
-  return i ? ae.get(i) ?? !1 : !1;
+const ne = /* @__PURE__ */ new Map();
+function ce(i) {
+  return i ? ne.get(i) ?? !1 : !1;
 }
 function De(i, e) {
-  const l = !(i.aria?.pressed ?? le(e));
-  return i.aria = { ...i.aria, pressed: l }, e && ae.set(e, l), l;
+  const l = !(i.aria?.pressed ?? ce(e));
+  return i.aria = { ...i.aria, pressed: l }, e && ne.set(e, l), l;
 }
-function D(i) {
+function O(i) {
   return i && "visibilityMode" in i ? i.visibilityMode : null;
 }
-function ee(i, e) {
+function ie(i, e) {
   if (!("visible" in i))
     return;
-  D(e) === "exclusive" && i.visible || (i.visible = !i.visible);
+  O(e) === "exclusive" && i.visible || (i.visible = !i.visible);
 }
 function Fe(i, e) {
   i.panel.open = !i.panel.open, i.panel.open && e && e();
@@ -31,77 +30,77 @@ function Fe(i, e) {
 function Oe(i, e, l, m) {
   i && l === e.layer?.uid && (Pe(i), m?.(null));
 }
-function Re(i, e, l) {
+function Ge(i, e, l) {
   l.type === "toggle" && (l.value = !l.value), i(l, e);
 }
-function Ve(i) {
+function Re(i) {
   return i.actionsSections.map((e) => e.filter((l) => l.visible));
 }
-function ne(i, e) {
+function se(i, e) {
   const { icon: l } = e;
   if (l)
     return null;
   const m = "image" in e ? e.image : void 0;
-  return m ? c`<span aria-hidden=true class=${d(P(i.itemActionIcon, { [i.itemActionImage]: !!m }))} style=${Ce(Te(m))}></span>` : null;
+  return m ? c`<span aria-hidden=true class=${d(F(i.itemActionIcon, { [i.itemActionImage]: !!m }))} style=${Se(Te(m))}></span>` : null;
 }
-function te(i, e, l) {
-  const { item: m, css: a, handleAction: v } = i, { active: C, disabled: I, title: g, type: S, indicator: f } = e, T = ie(e);
-  return c`<calcite-action .active=${S === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${T} .indicator=${f} .loading=${C} @click=${() => Re(v, m, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${g ?? ""} .textEnabled=${l} title=${g ?? void 0 ?? r}>${ne(a, e)}</calcite-action>`;
+function ae(i, e, l) {
+  const { item: m, css: a, handleAction: f } = i, { active: C, disabled: I, title: b, type: S, indicator: h } = e, T = le(e);
+  return c`<calcite-action .active=${S === "toggle" ? e.value : !1} data-action-id=${e.id ?? r} .disabled=${I} .icon=${T} .indicator=${h} .loading=${C} @click=${() => Ge(f, m, e)} scale=s slot=${(l ? void 0 : "actions-end") ?? r} .text=${b ?? ""} .textEnabled=${l} title=${b ?? void 0 ?? r}>${se(a, e)}</calcite-action>`;
 }
-function Ge(i) {
-  const { item: e, parent: l, hideStatusIndicators: m, css: a, visibilityAppearance: v, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: g, listModeDisabled: S = !1, selectionMode: f, displayMode: T, layerTablesEnabled: x, showErrors: ce, parentTitles: F, selectedItems: se, activeItem: oe, handleCatalogOpen: re, handleTablesOpen: de, selectedDragItemLayerUid: ue, handleSelectedDragItemLayerUidChange: me, handlePanelOpen: pe, messages: n, setCurrentActiveItem: O, clearActiveItem: R } = i, $ = X(), M = X(), b = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
-  let V = null;
-  m || (V = c`<arcgis-layer-list-item-indicator class=${d(a.statusIndicator)} .messages=${n} .item=${e} .parent=${l} slot=content-end></arcgis-layer-list-item-indicator>`);
-  let G = null;
+function Ve(i) {
+  const { item: e, parent: l, hideStatusIndicators: m, css: a, visibilityAppearance: f, hideCatalogLayerList: C, dragEnabled: I = !1, rootGroupUid: b, listModeDisabled: S = !1, selectionMode: h, displayMode: T, layerTablesEnabled: x, showErrors: oe, parentTitles: G, selectedItems: re, activeItem: de, handleCatalogOpen: ue, handleTablesOpen: me, selectedDragItemLayerUid: $e, handleSelectedDragItemLayerUidChange: pe, handlePanelOpen: ge, messages: n, setCurrentActiveItem: R, clearActiveItem: V } = i, p = Z(), M = Z(), y = e.title || ("untitledTable" in n ? n.untitledTable : n.untitledLayer ?? "");
+  let H = null;
+  m || (H = c`<arcgis-layer-list-item-indicator class=${d(a.statusIndicator)} .messages=${n} .item=${e} .parent=${l} slot=content-end></arcgis-layer-list-item-indicator>`);
+  let U = null;
   {
-    const { layer: t } = e, s = t && "persistenceEnabled" in t && (Ae(t) || !t.persistenceEnabled);
-    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && s && (G = c`<calcite-icon class=${d(a.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
+    const { layer: t } = e, s = t && "persistenceEnabled" in t && (Ce(t) || !t.persistenceEnabled);
+    (i.showTemporaryLayerIndicators || i.showTemporaryTableIndicators) && s && (U = c`<calcite-icon class=${d(a.itemTemporaryIcon)} icon=temporary scale=s slot=content-start title=${n.temporary ?? r}></calcite-icon>`);
   }
-  let H = null;
-  if ("visible" in e && "visibleToggle" in a && v) {
-    const t = D(l);
+  let q = null;
+  if ("visible" in e && "visibleToggle" in a && f) {
+    const t = O(l);
     if (t !== "inherited") {
       const s = xe({
         visible: e.visible,
         exclusive: t === "exclusive",
-        visibilityAppearance: v
-      }), o = v === "checkbox", p = n.layerVisibility, h = le(e.layer?.id);
-      H = c`<calcite-action .aria=${{ pressed: h }} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} @click=${(y) => {
-        De(y.currentTarget, e.layer?.id), ee(e, l);
-      }} .slot=${o ? "actions-start" : "actions-end"} .text=${p ?? ""} title=${p ?? r}>${o ? null : c`<calcite-icon class=${d(P({
+        visibilityAppearance: f
+      }), o = f === "checkbox", u = n.layerVisibility, v = e.title ?? e.layer?.title ?? "", g = v ? `${u ?? ""}: ${v}` : u ?? "", P = ce(e.layer?.id);
+      q = c`<calcite-action .aria=${{ pressed: P }} class=${d(a.visibleToggle)} .icon=${o ? s : void 0} .label=${g} @click=${(D) => {
+        De(D.currentTarget, e.layer?.id), ie(e, l);
+      }} .slot=${o ? "actions-start" : "actions-end"} .text=${u ?? ""} title=${u ?? r}>${o ? null : c`<calcite-icon class=${d(F({
         [a.visibleIcon]: t !== "exclusive" && e.visible
       }))} .icon=${s} scale=s></calcite-icon>`}</calcite-action>`;
     }
   }
-  let U = null;
+  let j = null;
   {
     const t = e.panel;
-    t?.open && !t.disabled && !t.flowEnabled && (U = c`<div class=${d(a.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
+    t?.open && !t.disabled && !t.flowEnabled && (j = c`<div class=${d(a.itemContentBottom)} slot=content-bottom><arcgis-layer-list-item-panel .item=${e} .view=${i.view}></arcgis-layer-list-item-panel></div>`);
   }
-  let q = null;
+  let B = null;
   {
     const t = e.panel;
     if (t?.visible) {
-      const { open: s, title: o, disabled: p } = t, h = { icon: t.icon, image: t.image, indicator: !1 }, y = ie(h);
-      q = c`<calcite-action .active=${s} .disabled=${p} .icon=${y} @click=${() => Fe(e, pe)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${ne(a, t)}</calcite-action>`;
+      const { open: s, title: o, disabled: u } = t, v = { icon: t.icon, image: t.image, indicator: !1 }, g = le(v);
+      B = c`<calcite-action .active=${s} .disabled=${u} .icon=${g} @click=${() => Fe(e, ge)} slot=actions-end .text=${o ?? ""} title=${o ?? void 0 ?? r}>${se(a, t)}</calcite-action>`;
     }
   }
-  let j = null;
+  let N = null;
   {
-    const t = e.layer, s = t?.type === "catalog-footprint", o = t?.type === "sublayer" && Z(t, "footprints");
-    "itemCatalogIcon" in a && (s || o) && (j = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
+    const t = e.layer, s = t?.type === "catalog-footprint", o = t?.type === "sublayer" && te(t, "footprints");
+    "itemCatalogIcon" in a && (s || o) && (N = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=footprint scale=s slot=content-start></calcite-icon>`);
   }
-  let B = null;
+  let _ = null;
   {
-    const t = e.layer, s = t?.type === "catalog-dynamic-group", o = t?.type === "sublayer" && Z(t, "layers-in-view");
-    "itemCatalogIcon" in a && (s || o) && (B = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
+    const t = e.layer, s = t?.type === "catalog-dynamic-group", o = t?.type === "sublayer" && te(t, "layers-in-view");
+    "itemCatalogIcon" in a && (s || o) && (_ = c`<calcite-icon class=${d(a.itemCatalogIcon)} icon=catalog-dataset scale=s slot=content-start></calcite-icon>`);
   }
-  let N = null;
+  let z = null;
   if ("visible" in e) {
     const t = e.layer;
-    !C && t?.type === "catalog-dynamic-group" && (N = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => re?.(e)} scale=s slot=actions-end .text=${b ?? ""}></calcite-action>`);
+    !C && t?.type === "catalog-dynamic-group" && (z = c`<calcite-action .disabled=${!t.visible} icon=chevron-right icon-flip-rtl @click=${() => ue?.(e)} scale=s slot=actions-end .text=${y ?? ""}></calcite-action>`);
   }
-  let _ = null, L = !1;
+  let J = null, L = !1;
   {
     const t = e.layer;
     if (x && t)
@@ -114,43 +113,43 @@ function Ge(i) {
           L = x.includes(t.type) && "subtables" in t && !!t.subtables?.length;
           break;
       }
-    "itemTableIcon" in a && "visible" in e && "tables" in n && L && (_ = W(`${e.uid}-tables`, c`<calcite-list-item class=${d(a.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => de?.(e)} .value=${e}><calcite-icon class=${d(a.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
+    "itemTableIcon" in a && "visible" in e && "tables" in n && L && (J = Y(`${e.uid}-tables`, c`<calcite-list-item class=${d(a.item)} data-layer-id=${t?.id ?? r} drag-disabled .label=${n.tables} title=${n.tables ?? r} @calciteListItemSelect=${() => me?.(e)} .value=${e}><calcite-icon class=${d(a.itemTableIcon)} icon=table scale=s slot=content-start></calcite-icon><calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`));
   }
-  let z = null;
+  let K = null;
   if ("children" in e) {
-    const t = [...F ?? [], e.title], { children: s, layer: o } = e, p = o?.type !== "catalog-dynamic-group" && Me(e), h = S ? !1 : Le(o), y = o?.type === "group", fe = !h && !p && I && y, he = I && "childrenSortable" in e && e.childrenSortable && Ee(e), Ie = p ? Se(s?.filter((u) => !u.hidden && (ce || !u.error)).toArray() ?? [], (u) => u.uid, (u) => Ge({ ...i, item: u, parent: e, parentTitles: t })) : null;
-    (p || fe) && (z = c`<calcite-list .canPull=${(u) => i.canMove ? i.canMove(u, "pull") : !1} .canPut=${(u) => i.canMove ? i.canMove(u, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${g ?? r} .displayMode=${T} .dragEnabled=${he} .group=${y ? g : `${g}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${f}>${Ie}${_}</calcite-list>`);
+    const t = [...G ?? [], e.title], { children: s, layer: o } = e, u = o?.type !== "catalog-dynamic-group" && Me(e), v = S ? !1 : Le(o), g = o?.type === "group", P = !v && !u && I && g, D = g && "sortable" in e && e.sortable, Ie = I && ("childrenSortable" in e && e.childrenSortable || D) && Ee(e), Ae = u ? (s?.filter(($) => !$.hidden && (oe || !$.error)).toArray() ?? []).map(($) => Ve({ ...i, item: $, parent: e, parentTitles: t })) : null;
+    (u || P) && (K = c`<calcite-list .canPull=${($) => i.canMove ? i.canMove($, "pull") : !1} .canPut=${($) => i.canMove ? i.canMove($, "put") : !1} data-item=${e.uid ?? r} data-layer-type=${b ?? r} .displayMode=${T} .dragEnabled=${Ie} .group=${g ? b : `${b}-${o?.uid}`} .label=${e.title} selection-appearance=highlight .selectionMode=${h}>${Ae}${J}</calcite-list>`);
   }
   let E = null;
   if (e.error) {
     const t = "layerError" in n ? n.layerError : n.tableError;
     E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s width=full><div slot=message>${t}</div></calcite-notice></div>`;
-  } else "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${Y(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
-  const J = Ve(e), k = e.actionsSections.reduce((t, s) => t + s.length, 0), K = ke(J), $e = J.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((s) => te(i, s, !0))}</calcite-action-group>`), ge = (t) => {
+  } else "incompatible" in e && e.incompatible && "layerIncompatible" in n && (E = c`<div class=${d(a.itemMessage)} slot=content-bottom><calcite-notice icon=exclamation-mark-triangle kind=warning open scale=s tabindex=0 width=full ${ee(M)}><div slot=message>${n.layerIncompatible}</div></calcite-notice></div>`);
+  const Q = Re(e), k = e.actionsSections.reduce((t, s) => t + s.length, 0), W = ke(Q), be = Q.toArray().map((t) => c`<calcite-action-group>${t.toArray().map((s) => ae(i, s, !0))}</calcite-action-group>`), ye = (t) => {
     e.actionsOpen = t.currentTarget.open;
   };
-  let Q = null;
-  k > 1 && (Q = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${ge}><calcite-action .aria=${{
+  let X = null;
+  k > 1 && (X = c`<calcite-action-menu appearance=transparent .label=${n.menu ?? ""} .open=${e.actionsOpen} overlay-positioning=fixed placement=bottom-end slot=actions-end @calciteActionMenuOpen=${ye}><calcite-action .aria=${{
     expanded: e.actionsOpen ?? !1,
     hasPopup: "true"
-  }} icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${$e}</calcite-action-menu>`);
+  }} icon=ellipsis scale=s slot=trigger .text=${n.options ?? ""} title=${n.options ?? r}></calcite-action>${be}</calcite-action-menu>`);
   let w = null;
-  k === 1 && K ? w = te(i, K, !1) : k > 1 && (w = Q);
-  const be = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${b} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${b} (${n.layerInvisibleAtScale})` : b, ye = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, ve = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
+  k === 1 && W ? w = ae(i, W, !1) : k > 1 && (w = X);
+  const ve = "visibleAtCurrentTimeExtent" in e && "layerInvisibleAtTime" in n && !e.visibleAtCurrentTimeExtent ? `${y} (${n.layerInvisibleAtTime})` : "visibleAtCurrentScale" in e && "layerInvisibleAtScale" in n && !e.visibleAtCurrentScale ? `${y} (${n.layerInvisibleAtScale})` : y, fe = "parent" in e && e.parent?.layer?.type === "catalog", A = e.layer, he = "visibleAtCurrentScale" in e && !e.visibleAtCurrentScale || "visibleAtCurrentTimeExtent" in e && !e.visibleAtCurrentTimeExtent;
   return queueMicrotask(() => {
-    Oe($.value ?? null, e, ue, me), M.value && (i.handleTooltipReferenceChange?.(A?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(A?.uid, null))), e.panel && (e.panel.container = $.value);
-  }), W(e.uid, c`<calcite-list-item class=${d(P(a.item, "itemActive" in a && { [a.itemActive]: oe?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || ye} id=${A?.uid ?? r} .label=${b} .metadata=${{ parentTitles: F ?? [], _title: b }} .expanded=${"open" in e && e.open} .selected=${f !== "none" ? se.includes(e) : !1} title=${be ?? r} .unavailable=${ve} .value=${e} @focusin=${() => {
-    O?.(e), $.value?.classList.add(a.itemActive);
+    Oe(p.value ?? null, e, $e, pe), M.value && (i.handleTooltipReferenceChange?.(A?.uid, M.value), queueMicrotask(() => i.handleTooltipReferenceChange?.(A?.uid, null))), e.panel && (e.panel.container = p.value);
+  }), Y(e.uid, c`<calcite-list-item class=${d(F(a.item, "itemActive" in a && { [a.itemActive]: de?.uid === e.uid }))} data-item=${e.uid ?? r} data-layer-id=${A?.id ?? r} .dragDisabled=${!("sortable" in e && e.sortable) || fe} id=${A?.uid ?? r} .label=${y} .metadata=${{ parentTitles: G ?? [], _title: y }} .expanded=${"open" in e && e.open} .selected=${h !== "none" ? re.includes(e) : !1} title=${ve ?? r} .unavailable=${he} .value=${e} @focusin=${() => {
+    R?.(e), p.value?.classList.add(a.itemActive);
   }} @focusout=${() => {
-    R?.(), $.value?.classList.remove(a.itemActive);
+    V?.(), p.value?.classList.remove(a.itemActive);
   }} @mouseover=${() => {
-    O?.(e), $.value?.classList.add(a.itemActive);
+    R?.(e), p.value?.classList.add(a.itemActive);
   }} @mouseleave=${() => {
-    R?.(), $.value?.classList.remove(a.itemActive);
-  }} @calciteListItemSelect=${(t) => "visible" in e && we(t.currentTarget, i.operationalItems) === e && f === "none" && D(l) !== "inherited" && ee(e, l)} @calciteListItemToggle=${(t) => {
+    V?.(), p.value?.classList.remove(a.itemActive);
+  }} @calciteListItemSelect=${(t) => "visible" in e && we(t.currentTarget, i.operationalItems) === e && h === "none" && O(l) !== "inherited" && ie(e, l)} @calciteListItemToggle=${(t) => {
     "open" in e && (t.stopPropagation(), e.open = t.target.expanded);
-  }} ${Y($)}>${j}${B}${V}${H}${N}${G}${z}${E}${U}${q}${w}</calcite-list-item>`);
+  }} ${ee(p)}>${N}${_}${H}${q}${z}${U}${K}${E}${j}${B}${w}</calcite-list-item>`);
 }
 export {
-  Ge as ArcgisLayerListItem
+  Ve as ArcgisLayerListItem
 };

package/dist/components/arcgis-layer-list-next/types.d.ts

@@ -0,0 +1,18 @@
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type KnowledgeGraphLayer from "@arcgis/core/layers/KnowledgeGraphLayer.js";
+import type MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
+import type TileLayer from "@arcgis/core/layers/TileLayer.js";
+import type { CatalogLayerListProperties } from "@arcgis/core/widgets/CatalogLayerList.js";
+import type { TableListProperties } from "@arcgis/core/widgets/TableList.js";
+
+/** Catalog layer list configuration passed through Layer List (next). */
+export type CatalogLayerListParams = CatalogLayerListProperties;
+
+/** Table list configuration passed through Layer List (next). */
+export type TableListParams = TableListProperties;
+
+/** Layer types that can open a nested flow list from Layer List (next). */
+export type FlowLayer = CatalogLayer | SubtablesLayer;
+
+/** Layer types that expose tables via the Table List flow. */
+export type SubtablesLayer = KnowledgeGraphLayer | MapImageLayer | TileLayer;