@mattilsynet/design 2.2.20 → 2.2.22

package/mtds/atlas/atlas-element.d.ts

@@ -7,6 +7,9 @@ declare global {
         interface IntrinsicElements {
             "mtds-atlas": ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<MTDSAtlasElement>, MTDSAtlasElement> & {
                 class?: string;
+                "data-cluster"?: number | `${number}` | boolean | "true" | "false";
+                "data-scrollzoom"?: boolean | "true" | "false";
+                "data-tiles"?: "color" | "gray";
                 "data-view"?: string | number[];
             };
         }
@@ -15,7 +18,6 @@ declare global {
 export declare class MTDSAtlasElement extends MTDSElement {
     cluster?: L.MarkerClusterGroup;
     map?: L.Map;
-    _popup?: [HTMLElement, L.Popup];
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

package/mtds/atlas/atlas-element.js

@@ -1,74 +1,102 @@
 import s from "../external/leaflet/dist/leaflet-src.js";
-import d from "../external/leaflet/dist/leaflet.css.js";
-import { IS_BROWSER as c, MTDSElement as m, tag as a, attr as l, debounce as h } from "../utils.js";
-import p from "./atlas.css.js";
+import k from "../external/leaflet/dist/leaflet.css.js";
+import A from "./atlas.css.js";
 import "./cluster.js";
-const u = [
+import { IS_BROWSER as E, attr as i, MTDSElement as M, tag as d, debounce as S, onResize as z, on as x } from "../utils.js";
+const c = [30, 30], m = 18, O = [
   [57.5, 4.73],
   [71.5, 31.44]
-], f = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
-class r extends m {
+], L = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
+class p extends M {
   cluster;
   map;
-  // Private properties
-  _popup;
   static get observedAttributes() {
     return ["data-view", "data-scrollzoom"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" }).append(
-      a("style", {}, `${d}
-${p}`),
-      a("slot"),
-      a("div")
+      d("style", {}, `@layer leaflet{${k}}
+${A}`),
+      d("slot"),
+      d("div")
     );
   }
   connectedCallback() {
-    const t = this.shadowRoot?.lastElementChild, o = Number(l(this, "data-cluster")) || 1, e = new s.TileLayer(f, {
+    const e = this.shadowRoot?.lastElementChild, o = i(this, "data-cluster") ?? "false", t = new s.TileLayer(L, {
       attribution: "© Kartverket",
-      maxZoom: 18
+      maxZoom: m
     });
-    this.map = new s.Map(t, {
+    this.map = new s.Map(e, {
       attributionControl: !1,
       wheelPxPerZoomLevel: 20,
       zoomControl: !1,
       zoomSnap: 0,
-      layers: [e]
+      layers: [t]
     }), this.cluster = new s.MarkerClusterGroup({
-      disableClusteringAtZoom: o,
+      zoomToBoundsOnClick: !0,
       showCoverageOnHover: !1,
-      zoomToBoundsOnClick: !0
-    }).addTo(this.map), this.map.addControl(new s.Control.Attribution({ prefix: "" })), this.map.addControl(new s.Control.Zoom({ position: "bottomright" })), r.observedAttributes.forEach((i) => {
-      this.attributeChangedCallback(i, null, l(this, i));
+      disableClusteringAtZoom: o === "false" ? 1 : Number(o) || m,
+      iconCreateFunction: (n) => new s.DivIcon({
+        className: "leaflet-cluster-icon",
+        html: `${n.getAllChildMarkers().length}`,
+        iconSize: c
+      })
+    }).addTo(this.map), this.map.addControl(new s.Control.Attribution({ prefix: "" })), this.map.addControl(new s.Control.Zoom({ position: "bottomright" })), this.map.on("popupopen", f), p.observedAttributes.forEach((n) => {
+      this.attributeChangedCallback(n, null, i(this, n));
     });
   }
-  attributeChangedCallback(t, o = null, e = null) {
-    this.map && (t === "data-view" && this.setView(e || ""), t === "data-scrollzoom" && this.map.scrollWheelZoom[e === "false" ? "disable" : "enable"]());
+  attributeChangedCallback(e, o = null, t = null) {
+    this.map && (e === "data-view" && this.setView(t || ""), e === "data-scrollzoom" && this.map.scrollWheelZoom[t === "false" ? "disable" : "enable"]());
   }
-  setView(t, o) {
-    const e = `${t}`.split(",").map(parseFloat).filter(Number.isFinite), i = this.cluster?.getBounds();
-    e.length === 3 ? this.map?.setView([e[0], e[1]], e[2], o) : t !== "fit" ? this.map?.fitBounds(u, o) : i?.isValid() ? this.map?.fitBounds(i, o || { padding: [40, 40] }) : this.cluster?.on("layeradd", n, this);
+  setView(e, o) {
+    const t = `${e}`.split(",").map(parseFloat).filter(Number.isFinite), n = this.cluster?.getBounds();
+    t.length === 3 ? this.map?.setView([t[0], t[1]], t[2], o) : e !== "fit" ? this.map?.fitBounds(O, o) : n?.isValid() ? this.map?.fitBounds(n, o || { padding: c }) : this.cluster?.on("layeradd", g, this);
   }
-  addMarker(t, o) {
-    return new s.Marker(t, o).addTo(
+  addMarker(e, o) {
+    return new s.Marker(e, o).addTo(
       this.cluster
     );
   }
   disconnectedCallback() {
-    this.map?.remove();
+    this.map?.off("popupopen", f), this.map?.remove();
   }
 }
-c && !window.customElements.get("mtds-atlas") && (s.Marker.prototype.options.icon = new s.DivIcon({
-  html: '<svg class="map-pin" viewBox="0 0 256 256"><rect x="78" y="50" width="100" height="100" /><path fill="var(--mtds-)" d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>',
-  iconSize: [30, 30],
-  iconAnchor: [15, 30],
-  popupAnchor: [0, -15]
-}), window.customElements.define("mtds-atlas", r));
-const n = h(function() {
-  this.cluster?.off("layeradd", n), this.cluster?.getBounds().isValid() && this.setView("fit");
-}, 100);
+if (E && !window.customElements.get("mtds-atlas")) {
+  const l = s.Marker.prototype.onAdd;
+  s.Marker.prototype.onAdd = function(...e) {
+    l.apply(this, e);
+    const o = this.getElement();
+    return o && i(o, "aria-label", this.options.title || null), o && i(o, "title", null), this;
+  }, s.Tooltip.prototype.options.direction = "top", s.Marker.prototype.options.icon = new s.DivIcon({
+    html: '<svg viewBox="0 0 256 256"><rect x="78" y="50" width="100" height="100" /><path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"/></svg>',
+    iconSize: c,
+    iconAnchor: [15, 30],
+    popupAnchor: [0, -15],
+    tooltipAnchor: [0, -30]
+  }), window.customElements.define("mtds-atlas", p);
+}
+const g = S(function() {
+  this.cluster?.off("layeradd", g, this), this.cluster?.getBounds().isValid() && this.setView("fit");
+}, 100), u = "popupclose move resize zoom viewreset", f = ({ target: l, popup: e }) => {
+  const o = e.getContent(), t = String(o)[0] === "#" && document.getElementById(o.slice(1));
+  if (t && t.closest("mtds-atlas")) {
+    const n = e.getLatLng(), w = i(t, "popover");
+    i(e.getElement(), "hidden", ""), i(t, "popover", null);
+    const a = (r) => {
+      if (r?.type === "popupclose" && r?.popup === e)
+        l.off(u, a), i(e.getElement(), "hidden", null), i(t, "data-popover", null), i(t, "popover", w), v(), C();
+      else {
+        const h = l.latLngToContainerPoint(n), b = h.x - t.offsetWidth / 2, y = h.y - t.offsetHeight - c[1];
+        t.style.translate = `${b}px ${y}px`;
+      }
+    }, v = z(() => a(), t), C = x(t, "click", (r) => {
+      r.target?.closest?.('[popovertargetaction="hide"]') && e.close();
+    });
+    l.on(u, a), a();
+  }
+};
 export {
   s as L,
-  r as MTDSAtlasElement
+  p as MTDSAtlasElement
 };
 //# sourceMappingURL=atlas-element.js.map

package/mtds/atlas/atlas-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\";\nimport type * as ReactTypes from \"react\";\nimport { attr, debounce, IS_BROWSER, MTDSElement, tag } from \"../utils\";\nimport css from \"./atlas.css?raw\";\nimport \"./cluster.js\";\nexport { L };\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-atlas\": ReactTypes.DetailedHTMLProps<\n\t\t\t\tReactTypes.HTMLAttributes<MTDSAtlasElement>,\n\t\t\t\tMTDSAtlasElement\n\t\t\t> & {\n\t\t\t\tclass?: string;\n\t\t\t\t\"data-view\"?: string | number[];\n\t\t\t};\n\t\t}\n\t}\n}\n\n// const EVENTS = \"popupopen popupclose move zoom resize\";\nconst BOUNDS_NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\n// Turns out Kartverket's color tiles are better in grayscale than their grayscale tiles\n// const TILES_GRAY = \"https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png\";\nconst TILES_COLOR =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\t// Private properties\n\t_popup?: [HTMLElement, L.Popup];\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; //TODO: \"data-layers\" // Using ES2015 syntax for backwards compatibility\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\"style\", {}, `${LeafletCSS}\\n${css}`),\n\t\t\ttag(\"slot\"),\n\t\t\ttag(\"div\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst div = this.shadowRoot?.lastElementChild;\n\t\tconst cluster = Number(attr(this, \"data-cluster\")) || 1;\n\t\tconst tiles = new L.TileLayer(TILES_COLOR, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tmaxZoom: 18,\n\t\t});\n\n\t\tthis.map = new L.Map(div as HTMLElement, {\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 20,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t\tlayers: [tiles],\n\t\t});\n\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tdisableClusteringAtZoom: cluster,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tzoomToBoundsOnClick: true,\n\t\t}).addTo(this.map);\n\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\t// this.map.on(EVENTS, handleEvents);\n\n\t\t// Initial setup when map is connected\n\t\tMTDSAtlasElement.observedAttributes.forEach((name) => {\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t\t});\n\t}\n\tattributeChangedCallback(\n\t\tname: string,\n\t\t_prev: string | null = null,\n\t\tnext: string | null = null,\n\t) {\n\t\tif (!this.map) return; // No map yet\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], options?: L.ZoomPanOptions) {\n\t\tconst pos = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst bounds = this.cluster?.getBounds();\n\n\t\tif (pos.length === 3) this.map?.setView([pos[0], pos[1]], pos[2], options);\n\t\telse if (view !== \"fit\") this.map?.fitBounds(BOUNDS_NORWAY, options);\n\t\telse if (!bounds?.isValid())\n\t\t\tthis.cluster?.on(\"layeradd\", fitWhenMarkers, this);\n\t\telse this.map?.fitBounds(bounds, options || { padding: [40, 40] });\n\t}\n\taddMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions) {\n\t\treturn new L.Marker(latlng, options).addTo(\n\t\t\tthis.cluster as L.MarkerClusterGroup,\n\t\t);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t\t// this.map?.off(EVENTS, handleEvents);\n\t}\n}\n\n// Set default marker icon and define custom element\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\")) {\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<svg class=\"map-pin\" viewBox=\"0 0 256 256\"><rect x=\"78\" y=\"50\" width=\"100\" height=\"100\" /><path fill=\"var(--mtds-)\" d=\"M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z\"/></svg>',\n\t\ticonSize: [30, 30],\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t});\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\nconst fitWhenMarkers = debounce(function (this: MTDSAtlasElement) {\n\tthis.cluster?.off(\"layeradd\", fitWhenMarkers);\n\tif (this.cluster?.getBounds().isValid()) this.setView(\"fit\");\n}, 100);\n\n// const handleEvents: L.LeafletEventHandlerFn = ({ type, target, popup }) => {\n// \tconst self = target.getContainer();\n\n// \tif (type === \"popupopen\" || type === \"popupclose\") {\n// \t\tif (self._popup) {\n// \t\t\tconst [el] = self._popup;\n// \t\t\tself._popup = el.hidePopover();\n// \t\t\tself._popup = undefined;\n// \t\t}\n// \t\tconst id = type === \"popupopen\" && popup.getContent();\n// \t\tconst el = String(id)[0] === \"#\" && document.getElementById(id.slice(1));\n\n// \t\tif (el) {\n// \t\t\tattr(el, \"popover\", \"manual\");\n// \t\t\tattr(popup.getElement(), \"data-atlas-popup\", id);\n// \t\t\tel.showPopover();\n// \t\t\tself._popup = [el, popup];\n// \t\t\tanchorPopover(target, popup, el);\n// \t\t}\n// \t} else if (self._popup) {\n// \t\tanchorPopover(target, self._popup[1], self._popup[0]);\n// \t}\n// };\n\n// const anchorPopover = (map: L.Map, popup: L.Popup, popover: HTMLElement) => {\n// \tconst point = map.latLngToContainerPoint(popup.getLatLng() as L.LatLng);\n// \tconst rect = map.getContainer().getBoundingClientRect();\n// \tpopover.style.translate = `${rect.x + point.x + window.scrollX}px ${rect.y + point.y + window.scrollY}px`;\n// };\n\n// .on(\"click\", ({ target: marker, originalEvent: event }) => {\n// \tconst id = (marker.options as Record<string, string>)?.popoverTarget;\n// \tconst el = document.getElementById(id || \"\");\n\n// \tif (el) {\n// \t\tconsole.log(el, this);\n// \t\tevent.stopPropagation();\n// \t\tel.showPopover();\n// \t\tthis.popup = el;\n// \t\tthis.map?.fire(\"move\"); // Trigger position update\n\n// \t\t// \tconst updatePosition = () => {\n// \t\t// \t\tconst point = this.map?.latLngToContainerPoint(marker.getLatLng());\n// \t\t// \t\tconst rect = this.getBoundingClientRect();\n// \t\t// \t\tconsole.dir(rect);\n// \t\t// \t\t// console.log(point, this.map?.getBounds().getCenter().lat);\n// \t\t// \t\tif (point)\n// \t\t// \t\t\tel.style.translate = `${rect.x + point.x + window.scrollX}px ${rect.y + point.y + window.scrollY}px`;\n// \t\t// \t};\n\n// \t\t// \tupdatePosition();\n// \t}\n// })\n\n// export type Adresse = {\n// \tadressekode: number;\n// \tadressetekst: string;\n// \tbokstav: string;\n// \tbruksenhetsnummer: string[];\n// \tbruksnummer: number;\n// \tfestenummer: number;\n// \tgardsnummer: number;\n// \tkommunenavn: string;\n// \tkommunenummer: string;\n// \tnummer: number;\n// \tobjtype: string;\n// \toppdateringsdato: string;\n// \tpostnummer: string;\n// \tpoststed: string;\n// \trepresentasjonspunkt: {\n// \t\tepsg: string;\n// \t\tlat: number;\n// \t\tlon: number;\n// \t};\n// \tstedfestingverifisert: boolean;\n// \tundernummer: string | null;\n// };\n\n// // Hent punkt for adresse fra GeoNorge\n// export async function getPunktFraAdresse(\n// \tadresseSoek: string,\n// ): Promise<Adresse[]> {\n// \ttry {\n// \t\tconst response = await fetch(\n// \t\t\t`https://ws.geonorge.no/adresser/v1/sok?sok=${adresseSoek}&fuzzy=false&utkoordsys=3857&treffPerSide=100&asciiKompatibel=true`,\n// \t\t);\n// \t\tconst jsonresponse = await response.json();\n// \t\tif (jsonresponse.adresser.length > 0) {\n// \t\t\treturn jsonresponse.adresser.map((adresse: Adresse) => ({\n// \t\t\t\tadressekode: adresse.adressekode,\n// \t\t\t\tadressetekst: adresse.adressetekst,\n// \t\t\t\tbokstav: adresse.bokstav,\n// \t\t\t\tbruksenhetsnummer: adresse.bruksenhetsnummer,\n// \t\t\t\tbruksnummer: adresse.bruksnummer,\n// \t\t\t\tfestenummer: adresse.festenummer,\n// \t\t\t\tgardsnummer: adresse.gardsnummer,\n// \t\t\t\tkommunenavn: adresse.kommunenavn,\n// \t\t\t\tkommunenummer: adresse.kommunenummer,\n// \t\t\t\tnummer: adresse.nummer,\n// \t\t\t\tobjtype: adresse.objtype,\n// \t\t\t\toppdateringsdato: adresse.oppdateringsdato,\n// \t\t\t\tpostnummer: adresse.postnummer,\n// \t\t\t\tpoststed: adresse.poststed,\n// \t\t\t\trepresentasjonspunkt: {\n// \t\t\t\t\tepsg: adresse.representasjonspunkt.epsg,\n// \t\t\t\t\tlat: adresse.representasjonspunkt.lat,\n// \t\t\t\t\tlon: adresse.representasjonspunkt.lon,\n// \t\t\t\t},\n// \t\t\t}));\n// \t\t} else {\n// \t\t\treturn [];\n// \t\t}\n// \t} catch (error) {\n// \t\tconsole.log(`Feilet i å hente adresse fra punkt: ${error}`);\n// \t\treturn [];\n// \t}\n// }\n"],"names":["BOUNDS_NORWAY","TILES_COLOR","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","div","cluster","attr","tiles","L","name","_prev","next","view","options","pos","bounds","fitWhenMarkers","latlng","IS_BROWSER","debounce"],"mappings":"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"}
+{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport type {} from \"leaflet.markercluster\";\nimport type * as ReactTypes from \"react\";\nimport css from \"./atlas.css?raw\";\nimport \"./cluster.js\";\nimport {\n\tattr,\n\tdebounce,\n\tIS_BROWSER,\n\tMTDSElement,\n\ton,\n\tonResize,\n\ttag,\n} from \"../utils\";\nexport { L };\n\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t\"mtds-atlas\": ReactTypes.DetailedHTMLProps<\n\t\t\t\tReactTypes.HTMLAttributes<MTDSAtlasElement>,\n\t\t\t\tMTDSAtlasElement\n\t\t\t> & {\n\t\t\t\tclass?: string;\n\t\t\t\t\"data-cluster\"?: number | `${number}` | boolean | \"true\" | \"false\";\n\t\t\t\t\"data-scrollzoom\"?: boolean | \"true\" | \"false\";\n\t\t\t\t\"data-tiles\"?: \"color\" | \"gray\";\n\t\t\t\t\"data-view\"?: string | number[];\n\t\t\t};\n\t\t}\n\t}\n}\n\nconst ICON_SIZE = [30, 30] as L.PointTuple;\nconst MAX_ZOOM = 18; // Kartverket does not support more than zoom level 18\nconst NORWAY: L.LatLngBoundsLiteral = [\n\t[57.5, 4.73],\n\t[71.5, 31.44],\n];\n\n// Turns out Kartverket's color tiles are better in grayscale than their grayscale tiles\nconst TILES_COLOR =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tcluster?: L.MarkerClusterGroup;\n\tmap?: L.Map;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-scrollzoom\"]; //TODO: \"data-layers\" // Using ES2015 syntax for backwards compatibility\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\"style\", {}, `@layer leaflet{${LeafletCSS}}\\n${css}`),\n\t\t\ttag(\"slot\"),\n\t\t\ttag(\"div\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst div = this.shadowRoot?.lastElementChild;\n\t\tconst cluster = attr(this, \"data-cluster\") ?? \"false\";\n\t\tconst tiles = new L.TileLayer(TILES_COLOR, {\n\t\t\tattribution: \"&copy; Kartverket\",\n\t\t\tmaxZoom: MAX_ZOOM,\n\t\t});\n\n\t\tthis.map = new L.Map(div as HTMLElement, {\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 20,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t\tlayers: [tiles],\n\t\t});\n\n\t\tthis.cluster = new L.MarkerClusterGroup({\n\t\t\tzoomToBoundsOnClick: true,\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom:\n\t\t\t\tcluster === \"false\" ? 1 : Number(cluster) || MAX_ZOOM,\n\t\t\ticonCreateFunction: (cluster) =>\n\t\t\t\tnew L.DivIcon({\n\t\t\t\t\tclassName: \"leaflet-cluster-icon\",\n\t\t\t\t\thtml: `${cluster.getAllChildMarkers().length}`,\n\t\t\t\t\ticonSize: ICON_SIZE,\n\t\t\t\t}),\n\t\t}).addTo(this.map);\n\n\t\tthis.map.addControl(new L.Control.Attribution({ prefix: \"\" }));\n\t\tthis.map.addControl(new L.Control.Zoom({ position: \"bottomright\" }));\n\t\tthis.map.on(\"popupopen\", handlePopupById);\n\n\t\t// Initial setup when map is connected\n\t\tMTDSAtlasElement.observedAttributes.forEach((name) => {\n\t\t\tthis.attributeChangedCallback(name, null, attr(this, name));\n\t\t});\n\t}\n\tattributeChangedCallback(\n\t\tname: string,\n\t\t_prev: string | null = null,\n\t\tnext: string | null = null,\n\t) {\n\t\tif (!this.map) return; // No map yet\n\t\tif (name === \"data-view\") this.setView(next || \"\");\n\t\tif (name === \"data-scrollzoom\")\n\t\t\tthis.map.scrollWheelZoom[next === \"false\" ? \"disable\" : \"enable\"]();\n\t}\n\tsetView(view: string | number[], options?: L.ZoomPanOptions) {\n\t\tconst pos = `${view}`.split(\",\").map(parseFloat).filter(Number.isFinite);\n\t\tconst bounds = this.cluster?.getBounds();\n\n\t\tif (pos.length === 3) this.map?.setView([pos[0], pos[1]], pos[2], options);\n\t\telse if (view !== \"fit\") this.map?.fitBounds(NORWAY, options);\n\t\telse if (!bounds?.isValid())\n\t\t\tthis.cluster?.on(\"layeradd\", fitWhenMarkers, this);\n\t\telse this.map?.fitBounds(bounds, options || { padding: ICON_SIZE });\n\t}\n\taddMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions) {\n\t\treturn new L.Marker(latlng, options).addTo(\n\t\t\tthis.cluster as L.MarkerClusterGroup,\n\t\t);\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.off(\"popupopen\", handlePopupById);\n\t\tthis.map?.remove();\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\")) {\n\t// Fix accessibility\n\tconst onAddOriginal = L.Marker.prototype.onAdd;\n\tL.Marker.prototype.onAdd = function (...args) {\n\t\tonAddOriginal.apply(this, args);\n\t\tconst el = this.getElement();\n\t\tif (el) attr(el, \"aria-label\", this.options.title || null);\n\t\tif (el) attr(el, \"title\", null);\n\t\treturn this;\n\t};\n\n\t// Set defaults\n\tL.Tooltip.prototype.options.direction = \"top\";\n\tL.Marker.prototype.options.icon = new L.DivIcon({\n\t\thtml: '<svg viewBox=\"0 0 256 256\"><rect x=\"78\" y=\"50\" width=\"100\" height=\"100\" /><path d=\"M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z\"/></svg>',\n\t\ticonSize: ICON_SIZE,\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t\ttooltipAnchor: [0, -30],\n\t});\n\n\t// Define custom element\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\n// TODO: Style markers\n// TODO: Synlig label til marker\n// TODO: Add minimum zoom level for adding markers (minimum 17 som standard?)\n// TODO: data-layers: https://matgeoservice-256616427209.europe-north1.run.app/ogc/features/collections\n\nconst fitWhenMarkers = debounce(function (this: MTDSAtlasElement) {\n\tthis.cluster?.off(\"layeradd\", fitWhenMarkers, this);\n\tif (this.cluster?.getBounds().isValid()) this.setView(\"fit\");\n}, 100);\n\nconst HANDLE_POPUP_EVENTS = \"popupclose move resize zoom viewreset\";\nconst handlePopupById = ({ target: map, popup }: L.LeafletEvent) => {\n\tconst id = popup.getContent();\n\tconst popover = String(id)[0] === \"#\" && document.getElementById(id.slice(1));\n\n\tif (!!popover && popover.closest(\"mtds-atlas\")) {\n\t\tconst latlng = popup.getLatLng();\n\t\tconst mode = attr(popover, \"popover\"); // Save current popover mode\n\t\tattr(popup.getElement(), \"hidden\", \"\"); // Hide Leaflet popup element\n\t\tattr(popover, \"popover\", null); // Disable Popover API to show and ensure overflow: clip on mtds-atlas works\n\n\t\tconst update = (event?: L.LeafletEvent) => {\n\t\t\tif (event?.type === \"popupclose\" && event?.popup === popup) {\n\t\t\t\tmap.off(HANDLE_POPUP_EVENTS, update);\n\t\t\t\tattr(popup.getElement(), \"hidden\", null); // Un-hide Leaflet popup element\n\t\t\t\tattr(popover, \"data-popover\", null); // Hide popover\n\t\t\t\tattr(popover, \"popover\", mode); // Re-enable Popover API\n\t\t\t\tunresize();\n\t\t\t\tunclick();\n\t\t\t} else {\n\t\t\t\tconst point = map.latLngToContainerPoint(latlng);\n\t\t\t\tconst x = point.x - popover.offsetWidth / 2;\n\t\t\t\tconst y = point.y - popover.offsetHeight - ICON_SIZE[1];\n\t\t\t\tpopover.style.translate = `${x}px ${y}px`;\n\t\t\t}\n\t\t};\n\n\t\tconst unresize = onResize(() => update(), popover);\n\t\tconst unclick = on(popover, \"click\", (e: Event) => {\n\t\t\tif ((e.target as Element)?.closest?.('[popovertargetaction=\"hide\"]'))\n\t\t\t\tpopup.close(); // Listen for close actions inside popover since we are not using actual Popover API\n\t\t});\n\n\t\tmap.on(HANDLE_POPUP_EVENTS, update);\n\t\tupdate(); // Initial position\n\t}\n};\n\n// export type Adresse = {\n// \tadressekode: number;\n// \tadressetekst: string;\n// \tbokstav: string;\n// \tbruksenhetsnummer: string[];\n// \tbruksnummer: number;\n// \tfestenummer: number;\n// \tgardsnummer: number;\n// \tkommunenavn: string;\n// \tkommunenummer: string;\n// \tnummer: number;\n// \tobjtype: string;\n// \toppdateringsdato: string;\n// \tpostnummer: string;\n// \tpoststed: string;\n// \trepresentasjonspunkt: {\n// \t\tepsg: string;\n// \t\tlat: number;\n// \t\tlon: number;\n// \t};\n// \tstedfestingverifisert: boolean;\n// \tundernummer: string | null;\n// };\n\n// type GeoNorgeAdresser = {\n// \tmetadata: {\n// \t\tside: number;\n// \t\tviserFra: number;\n// \t\ttotaltAntallTreff: number;\n// \t\tasciiKompatibel: boolean;\n// \t\ttreffPerSide: number;\n// \t\tviserTil: number;\n// \t\tsokeStreng: string;\n// \t};\n// \tadresser: {\n// \t\tadressenavn: string;\n// \t\tadressetekst: string;\n// \t\tadressetilleggsnavn: string | null;\n// \t\tadressekode: number;\n// \t\tnummer: number;\n// \t\tbokstav: string;\n// \t\tkommunenummer: string;\n// \t\tkommunenavn: string;\n// \t\tgardsnummer: number;\n// \t\tbruksnummer: number;\n// \t\tfestenummer: number;\n// \t\tundernummer: string | null;\n// \t\tbruksenhetsnummer: (string | null)[];\n// \t\tobjtype: string;\n// \t\tpoststed: string;\n// \t\tpostnummer: string;\n// \t\tadressetekstutenadressetilleggsnavn: string;\n// \t\tstedfestingverifisert: boolean;\n// \t\toppdateringsdato: string;\n// \t\trepresentasjonspunkt: {\n// \t\t\tepsg: string;\n// \t\t\tlat: number;\n// \t\t\tlon: number;\n// \t\t};\n// \t}[];\n// };\n\n// // Hent punkt for adresse fra GeoNorge\n// const toUrlQuery = (obj: Record<string, unknown>) =>\n// \tnew URLSearchParams(\n// \t\tObject.fromEntries(Object.entries(obj).map(([k, v]) => [k, `${v}`])),\n// \t).toString();\n\n// export const getGeoNorgeAdresser = async (params: {\n// \tadressekode?: number;\n// \tadressenavn?: string;\n// \tadressetekst?: string;\n// \tadressetilleggsnavn?: string;\n// \tasciiKompatibel?: boolean;\n// \tbokstav?: string;\n// \tbruksenhetsnummer?: string;\n// \tbruksnummer?: number;\n// \tfestenummer?: number;\n// \tfiltrer?: string;\n// \tfuzzy?: boolean;\n// \tgardsnummer?: number;\n// \tkommunenavn?: string;\n// \tkommunenummer?: number;\n// \tnummer?: number;\n// \tobjtype?: \"Vegadresse\" | \"Matrikkeladresse\";\n// \tpostnummer?: string;\n// \tpoststed?: string;\n// \tside?: number;\n// \tsok?: string;\n// \tsokemodus?: \"AND\" | \"OR\";\n// \ttreffPerSide?: number;\n// \tundernummer?: string;\n// \tutkoordsys?: number;\n// }): Promise<GeoNorgeAdresser | undefined> =>\n// \tfetch(\n// \t\t`https://ws.geonorge.no/adresser/v1/sok?${toUrlQuery({\n// \t\t\tasciiKompatibel: true,\n// \t\t\tfuzzy: true,\n// \t\t\tside: 0,\n// \t\t\ttreffPerSide: 10,\n// \t\t\tutkoordsys: 4326,\n// \t\t\t...params,\n// \t\t})}`,\n// \t)\n// \t\t.then((res) => res.json())\n// \t\t.catch((error) =>\n// \t\t\tconsole.log(`Feilet i å hente adresse fra punkt: ${error}`),\n// \t\t);\n"],"names":["ICON_SIZE","MAX_ZOOM","NORWAY","TILES_COLOR","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","css","div","cluster","attr","tiles","L","handlePopupById","name","_prev","next","view","options","pos","bounds","fitWhenMarkers","latlng","IS_BROWSER","onAddOriginal","args","el","debounce","HANDLE_POPUP_EVENTS","map","popup","id","popover","mode","update","event","unresize","unclick","point","x","onResize","on","e"],"mappings":"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"}

package/mtds/atlas/atlas.css.js

@@ -1,39 +1,23 @@
-const t = `:host {
-	--mtdsc-atlas-cluster-size: var(--mtds-8);
+const t = `/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */
+:host {
 	--mtdsc-atlas-background: #fbfbfb;
-	--mtdsc-atlas-border-color: var(--mtds-color-border-subtle);
 	--mtdsc-atlas-border: var(--mtds-border-width-default) solid
-		var(--mtdsc-atlas-border-color);
+		var(--mtds-color-border-subtle);
 
 	border-radius: var(--mtds-border-radius-md);
 	aspect-ratio: 2;
 	overflow: clip;
 	position: relative;
-	user-select: none;
 }
 :host(:not([hidden])) {
-	display: grid;
+	display: block;
 }
 :host([data-cursor="pointer"]) .leaflet-grab {
 	cursor: pointer;
 }
-.leaflet-tile-container {
-	filter: grayscale(1) contrast(0.75) brightness(1.15);
-}
-:host([data-tiles="color"]) .leaflet-tile-container {
-	filter: grayscale(0.2);
-}
-:host([data-tiles="color"]) {
-	--mtdsc-atlas-background: #e5fcfd;
-}
-:host:has(.leaflet-container:focus-visible) {
-	box-shadow: var(--mtdsc-focus-boxShadow);
-	outline: var(--mtdsc-focus-outline);
-	outline-offset: var(--mtds-border-width-focus);
-}
 slot {
-	display: grid;
-	inset: var(--mtds-3);
+	display: block;
+	inset: 0;
 	pointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet */
 	position: absolute;
 	z-index: 2;
@@ -41,46 +25,116 @@ slot {
 ::slotted(*) {
 	pointer-events: all; /* But let children of slot stop pointer from reaching leaflet */
 }
-.leaflet-div-icon {
-	background: none;
-	border: 0;
+
+/* Focus */
+.leaflet-control-zoom a:focus-visible,
+:host:has(.leaflet-container:focus-visible) {
+	box-shadow: var(--mtdsc-focus-boxShadow);
+	outline: var(--mtdsc-focus-outline);
+	outline-offset: var(--mtds-border-width-focus);
 }
+
+/* Map and tiles */
 .leaflet-container {
 	background: var(--mtdsc-atlas-background);
 	border-radius: inherit;
 	border: var(--mtdsc-atlas-border);
 	box-sizing: border-box;
 	font: inherit;
+	height: 100%;
 	outline: 0;
+	position: relative;
+	z-index: 1; /* Ensure <slot> is always on top */
+}
+.leaflet-tile-container {
+	filter: grayscale(1) contrast(0.75) brightness(1.15);
+	transition: filter 0.5s;
 }
+:host([data-tiles="color"]) {
+	--mtdsc-atlas-background: #e5fcfd;
+}
+:host([data-tiles="color"]) .leaflet-tile-container {
+	filter: grayscale(0.2);
+}
+
+/* Controls */
 .leaflet-control-attribution {
 	font-size: 12px;
 	border-top-left-radius: var(--mtds-border-radius-md);
 }
+.leaflet-control-zoom {
+	border-radius: var(--mtds-border-radius-md);
+	border: 1px solid var(--mtds-color-border-default);
+}
+.leaflet-control-zoom a {
+	border-color: inherit;
+	background: var(--mtds-color-surface-default);
+	color: var(--mtds-color-text-default);
+	display: flex;
+	height: var(--mtds-10);
+	outline: 0;
+	place-content: center;
+	place-items: center;
+	transition: 0.2s;
+	width: var(--mtds-10);
+}
+.leaflet-control-zoom a:first-child {
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+}
+.leaflet-control-zoom a:last-child {
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+}
+.leaflet-control-zoom a:hover {
+	background: var(--mtds-color-surface-hover);
+}
+.leaflet-control-zoom a:active {
+	background: var(--mtds-color-surface-active);
+}
 
-.map-pin rect {
+/* Markers */
+.leaflet-tooltip {
+	background: var(--mtds-color-surface-default);
+	border-radius: var(--mtds-border-radius-md);
+	box-shadow: var(--mtds-box-shadow-sm);
+	color: var(--mtds-color-text-default);
+	padding: var(--mtds-1) var(--mtds-2);
+}
+.leaflet-marker-icon {
+	background: none;
+	border: 0;
+}
+.leaflet-marker-icon rect {
 	fill: var(--mtds-color-base-contrast-default);
 }
-.map-pin path {
+.leaflet-marker-icon path {
 	fill: var(--mtds-color-base-default);
+	stroke: var(--mtds-color-base-contrast-default);
+	vector-effect: non-scaling-stroke;
 }
-
-.marker-cluster {
+.leaflet-cluster-icon {
 	background-color: var(--mtds-color-base-default);
 	border-radius: 100%;
+	border: 1px solid;
+	box-sizing: border-box;
 	color: var(--mtds-color-base-contrast-default);
-	font-weight: 500;
+	display: flex;
 	font-size: var(--mtds-body-xs-font-size);
-	line-height: var(--mtdsc-atlas-cluster-size);
-	text-align: center;
-
-	/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */
-	width: var(--mtdsc-atlas-cluster-size) !important;
-	/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */
-	height: var(--mtdsc-atlas-cluster-size) !important;
-	/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */
-	margin: calc(var(--mtdsc-atlas-cluster-size) / -2) !important;
+	font-weight: 500;
+	place-content: center;
+	place-items: center;
 }
+/* .leaflet-marker-icon::after {
+	aspect-ratio: 1;
+	background: #fff;
+	border-radius: 50% 50% 0 50%;
+	border: 1px solid red;
+	content: "";
+	inset: 0 0 auto;
+	position: absolute;
+	rotate: 45deg;
+} */
 `;
 export {
   t as default

package/mtds/atlas/atlas.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \":host {\\n\\t--mtdsc-atlas-cluster-size: var(--mtds-8);\\n\\t--mtdsc-atlas-background: #fbfbfb;\\n\\t--mtdsc-atlas-border-color: var(--ds-color-border-subtle);\\n\\t--mtdsc-atlas-border: var(--ds-border-width-default) solid\\n\\t\\tvar(--mtdsc-atlas-border-color);\\n\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\n.leaflet-tile-container {\\n\\tfilter: grayscale(1) contrast(0.75) brightness(1.15);\\n}\\n:host([data-tiles=\\\"color\\\"]) .leaflet-tile-container {\\n\\tfilter: grayscale(0.2);\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e5fcfd;\\n}\\n:host:has(.leaflet-container:focus-visible) {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--ds-border-width-focus);\\n}\\nslot {\\n\\tdisplay: grid;\\n\\tinset: var(--mtds-3);\\n\\tpointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet */\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted(*) {\\n\\tpointer-events: all; /* But let children of slot stop pointer from reaching leaflet */\\n}\\n.leaflet-div-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\toutline: 0;\\n}\\n.leaflet-control-attribution {\\n\\tfont-size: 12px;\\n\\tborder-top-left-radius: var(--ds-border-radius-md);\\n}\\n\\n.map-pin rect {\\n\\tfill: var(--ds-color-base-contrast-default);\\n}\\n.map-pin path {\\n\\tfill: var(--ds-color-base-default);\\n}\\n\\n.marker-cluster {\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tfont-weight: 500;\\n\\tfont-size: var(--ds-body-xs-font-size);\\n\\tline-height: var(--mtdsc-atlas-cluster-size);\\n\\ttext-align: center;\\n\\n\\t/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */\\n\\twidth: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */\\n\\theight: var(--mtdsc-atlas-cluster-size) !important;\\n\\t/* biome-ignore lint/complexity/noImportantStyles: need to overwrite style attribute */\\n\\tmargin: calc(var(--mtdsc-atlas-cluster-size) / -2) !important;\\n}\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"atlas.css.js","sources":["../../designsystem/atlas/atlas.css?raw"],"sourcesContent":["export default \"/* NOTE: Using --mtds- not --mtds- since we're inside shadow dom */\\n:host {\\n\\t--mtdsc-atlas-background: #fbfbfb;\\n\\t--mtdsc-atlas-border: var(--mtds-border-width-default) solid\\n\\t\\tvar(--mtds-color-border-subtle);\\n\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\taspect-ratio: 2;\\n\\toverflow: clip;\\n\\tposition: relative;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: block;\\n}\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\nslot {\\n\\tdisplay: block;\\n\\tinset: 0;\\n\\tpointer-events: none; /* Ensure slot does not stop pointer from reaching leaflet */\\n\\tposition: absolute;\\n\\tz-index: 2;\\n}\\n::slotted(*) {\\n\\tpointer-events: all; /* But let children of slot stop pointer from reaching leaflet */\\n}\\n\\n/* Focus */\\n.leaflet-control-zoom a:focus-visible,\\n:host:has(.leaflet-container:focus-visible) {\\n\\tbox-shadow: var(--dsc-focus-boxShadow);\\n\\toutline: var(--dsc-focus-outline);\\n\\toutline-offset: var(--mtds-border-width-focus);\\n}\\n\\n/* Map and tiles */\\n.leaflet-container {\\n\\tbackground: var(--mtdsc-atlas-background);\\n\\tborder-radius: inherit;\\n\\tborder: var(--mtdsc-atlas-border);\\n\\tbox-sizing: border-box;\\n\\tfont: inherit;\\n\\theight: 100%;\\n\\toutline: 0;\\n\\tposition: relative;\\n\\tz-index: 1; /* Ensure <slot> is always on top */\\n}\\n.leaflet-tile-container {\\n\\tfilter: grayscale(1) contrast(0.75) brightness(1.15);\\n\\ttransition: filter 0.5s;\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e5fcfd;\\n}\\n:host([data-tiles=\\\"color\\\"]) .leaflet-tile-container {\\n\\tfilter: grayscale(0.2);\\n}\\n\\n/* Controls */\\n.leaflet-control-attribution {\\n\\tfont-size: 12px;\\n\\tborder-top-left-radius: var(--mtds-border-radius-md);\\n}\\n.leaflet-control-zoom {\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\tborder: 1px solid var(--mtds-color-border-default);\\n}\\n.leaflet-control-zoom a {\\n\\tborder-color: inherit;\\n\\tbackground: var(--mtds-color-surface-default);\\n\\tcolor: var(--mtds-color-text-default);\\n\\tdisplay: flex;\\n\\theight: var(--mtds-10);\\n\\toutline: 0;\\n\\tplace-content: center;\\n\\tplace-items: center;\\n\\ttransition: 0.2s;\\n\\twidth: var(--mtds-10);\\n}\\n.leaflet-control-zoom a:first-child {\\n\\tborder-top-left-radius: inherit;\\n\\tborder-top-right-radius: inherit;\\n}\\n.leaflet-control-zoom a:last-child {\\n\\tborder-bottom-left-radius: inherit;\\n\\tborder-bottom-right-radius: inherit;\\n}\\n.leaflet-control-zoom a:hover {\\n\\tbackground: var(--mtds-color-surface-hover);\\n}\\n.leaflet-control-zoom a:active {\\n\\tbackground: var(--mtds-color-surface-active);\\n}\\n\\n/* Markers */\\n.leaflet-tooltip {\\n\\tbackground: var(--mtds-color-surface-default);\\n\\tborder-radius: var(--mtds-border-radius-md);\\n\\tbox-shadow: var(--mtds-box-shadow-sm);\\n\\tcolor: var(--mtds-color-text-default);\\n\\tpadding: var(--mtds-1) var(--mtds-2);\\n}\\n.leaflet-marker-icon {\\n\\tbackground: none;\\n\\tborder: 0;\\n}\\n.leaflet-marker-icon rect {\\n\\tfill: var(--mtds-color-base-contrast-default);\\n}\\n.leaflet-marker-icon path {\\n\\tfill: var(--mtds-color-base-default);\\n\\tstroke: var(--mtds-color-base-contrast-default);\\n\\tvector-effect: non-scaling-stroke;\\n}\\n.leaflet-cluster-icon {\\n\\tbackground-color: var(--mtds-color-base-default);\\n\\tborder-radius: 100%;\\n\\tborder: 1px solid;\\n\\tbox-sizing: border-box;\\n\\tcolor: var(--mtds-color-base-contrast-default);\\n\\tdisplay: flex;\\n\\tfont-size: var(--mtds-body-xs-font-size);\\n\\tfont-weight: 500;\\n\\tplace-content: center;\\n\\tplace-items: center;\\n}\\n/* .leaflet-marker-icon::after {\\n\\taspect-ratio: 1;\\n\\tbackground: #fff;\\n\\tborder-radius: 50% 50% 0 50%;\\n\\tborder: 1px solid red;\\n\\tcontent: \\\"\\\";\\n\\tinset: 0 0 auto;\\n\\tposition: absolute;\\n\\trotate: 45deg;\\n} */\\n\""],"names":["css"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/mtds/atlas/atlas.stories.d.ts

@@ -15,4 +15,6 @@ export declare const WithCustomSize: Story;
 export declare const WithMarker: Story;
 export declare const WithClickToAddMarker: Story;
 export declare const WithClustering: Story;
+export declare const WithPopover: Story;
+export declare const WithTooltip: Story;
 export declare const WithoutScrollZoom: Story;

package/mtds/atlas/cluster.js

@@ -52,7 +52,7 @@ u.MarkerClusterGroup = u.FeatureGroup.extend({
       return this._needsClustering.push(t), this.fire("layeradd", { layer: t, propagatedFrom: t }), this;
     if (this.hasLayer(t))
       return this;
-    this._unspiderfy && this._unspiderfy(), this._addLayer(t, this._maxZoom), this.fire("layeradd", { layer: t }), this._topClusterLevel._recalculateBounds(), this._refreshClustersIcons();
+    this._unspiderfy && this._unspiderfy(), this._addLayer(t, this._maxZoom), this.fire("layeradd", { layer: t, propagatedFrom: t }), this._topClusterLevel._recalculateBounds(), this._refreshClustersIcons();
     var e = t, i = this._zoom;
     if (t.__parent)
       for (; e.__parent._zoom >= i; )