@mattilsynet/design 2.2.19 → 2.2.21

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

@@ -1,24 +1,26 @@
+import { default as L } from 'leaflet';
 import { MTDSElement } from '../utils';
-import * as L from "leaflet";
 import type * as ReactTypes from "react";
+export { L };
 declare global {
     namespace React.JSX {
         interface IntrinsicElements {
             "mtds-atlas": ReactTypes.DetailedHTMLProps<ReactTypes.HTMLAttributes<MTDSAtlasElement>, MTDSAtlasElement> & {
                 class?: string;
-                "data-view"?: string;
+                "data-view"?: string | number[];
             };
         }
     }
 }
 export declare class MTDSAtlasElement extends MTDSElement {
-    map?: L.Map;
-    tiles?: L.TileLayer;
     cluster?: L.MarkerClusterGroup;
-    leaflet: typeof L;
+    map?: L.Map;
+    _popup?: [HTMLElement, L.Popup];
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
+    attributeChangedCallback(name: string, _prev?: string | null, next?: string | null): void;
+    setView(view: string | number[], options?: L.ZoomPanOptions): void;
     addMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker<any>;
     disconnectedCallback(): void;
 }

package/mtds/atlas/atlas-element.js

@@ -1,57 +1,89 @@
-import * as e from "leaflet";
-import c from "leaflet/dist/leaflet.css?raw";
-import d from "leaflet.markercluster/dist/MarkerCluster.css?raw";
-import "leaflet.markercluster";
-import { IS_BROWSER as h, MTDSElement as p, tag as s, attr as a } from "../utils.js";
-import u from "./atlas.css.js";
-e.Marker.prototype.options.icon = e.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>',
-  iconAnchor: [15, 30],
-  iconSize: [30, 30]
-});
-const f = "57.95, 4.73, 71.19, 31.44, 15", v = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png", w = "https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png";
-class g extends p {
-  map;
-  tiles;
+import i from "../external/leaflet/dist/leaflet-src.js";
+import C from "../external/leaflet/dist/leaflet.css.js";
+import k from "./atlas.css.js";
+import "./cluster.js";
+import { IS_BROWSER as y, MTDSElement as E, tag as c, attr as s, debounce as S, on as x, off as z } from "../utils.js";
+const d = [30, 30], A = [
+  [57.5, 4.73],
+  [71.5, 31.44]
+], B = "https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png";
+class p extends E {
   cluster;
-  leaflet;
+  map;
+  // Private properties
+  _popup;
   static get observedAttributes() {
-    return ["data-view", "data-layers", "data-tiles"];
+    return ["data-view", "data-scrollzoom"];
   }
   constructor() {
-    super(), this.leaflet = e, this.attachShadow({ mode: "open" }).append(
-      s("style", {}, `${c}
-${d}
-${u}`),
-      s("slot"),
-      s("div")
+    super(), this.attachShadow({ mode: "open" }).append(
+      c("style", {}, `${C}
+${k}`),
+      c("slot"),
+      c("div")
     );
   }
   connectedCallback() {
-    const t = JSON.parse(`[${a(this, "data-view") || f}]`), o = this.shadowRoot?.lastElementChild, r = Number(a(this, "data-cluster")) || 1, i = a(this, "data-tiles") === "color" ? v : w;
-    if (this.tiles = e.tileLayer(i, { maxZoom: 18 }), this.cluster = e.markerClusterGroup({
-      showCoverageOnHover: !1,
-      disableClusteringAtZoom: r
-    }), this.map = e.map(o, {
-      layers: [this.tiles, this.cluster],
+    const e = this.shadowRoot?.lastElementChild, o = Number(s(this, "data-cluster")) || 1, t = new i.TileLayer(B, {
+      attribution: "&copy; Kartverket",
+      maxZoom: 18
+    });
+    this.map = new i.Map(e, {
       attributionControl: !1,
       wheelPxPerZoomLevel: 20,
       zoomControl: !1,
-      zoomSnap: 0
-    }), this.map.addControl(e.control.zoom({ position: "bottomright" })), t.length === 3 && this.map.setView([t[0], t[1]], t[2]), t.length >= 4) {
-      const l = [t[0], t[1]], n = [t[2], t[3]], m = [t[4] ?? 0, t[5] ?? t[4] ?? 0];
-      this.map.fitBounds([l, n], { padding: m });
-    }
+      zoomSnap: 0,
+      layers: [t]
+    }), this.cluster = new i.MarkerClusterGroup({
+      disableClusteringAtZoom: o,
+      showCoverageOnHover: !1,
+      zoomToBoundsOnClick: !0
+    }).addTo(this.map), this.map.addControl(new i.Control.Attribution({ prefix: "" })), this.map.addControl(new i.Control.Zoom({ position: "bottomright" })), this.map.on("popupopen", L), p.observedAttributes.forEach((n) => {
+      this.attributeChangedCallback(n, null, s(this, n));
+    });
+  }
+  attributeChangedCallback(e, o = null, t = null) {
+    this.map && (e === "data-view" && this.setView(t || ""), e === "data-scrollzoom" && this.map.scrollWheelZoom[t === "false" ? "disable" : "enable"]());
   }
-  addMarker(t, o) {
-    return e.marker(t, o).addTo(this.cluster || this.map);
+  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(A, o) : n?.isValid() ? this.map?.fitBounds(n, o || { padding: [40, 40] }) : this.cluster?.on("layeradd", g, this);
+  }
+  addMarker(e, o) {
+    return new i.Marker(e, o).addTo(
+      this.cluster
+    );
   }
   disconnectedCallback() {
     this.map?.remove();
   }
 }
-h && !window.customElements.get("mtds-atlas") && window.customElements.define("mtds-atlas", g);
+y && !window.customElements.get("mtds-atlas") && (i.Marker.prototype.options.icon = new i.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: d,
+  iconAnchor: [15, 30],
+  popupAnchor: [0, -15]
+}), window.customElements.define("mtds-atlas", p));
+const g = S(function() {
+  this.cluster?.off("layeradd", g), this.cluster?.getBounds().isValid() && this.setView("fit");
+}, 100), f = "popupclose move resize zoomanim viewreset", L = ({ 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(), v = s(t, "popover");
+    s(e.getElement(), "hidden", ""), s(t, "data-popover", "open"), s(t, "popover", "manual");
+    const m = new ResizeObserver(() => a()), a = (r) => {
+      if (r?.type === "popupclose" && r?.popup === e)
+        m.disconnect(), l.off(f, a), s(e.getElement(), "hidden", null), s(t, "data-popover", null), s(t, "popover", v), z(t, "click", h);
+      else {
+        const u = l.latLngToContainerPoint(n), w = u.x - t.offsetWidth / 2 - d[0] / 2, b = u.y - t.offsetHeight - d[1];
+        t.style.translate = `${w}px ${b}px`;
+      }
+    }, h = ({ target: r }) => r?.closest?.('[popovertargetaction="hide"]') && e.close();
+    l.on(f, a), x(t, "click", h), m.observe(t), a();
+  }
+};
 export {
-  g as MTDSAtlasElement
+  i as L,
+  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 * as L from \"leaflet\";\nimport LeafletCSS from \"leaflet/dist/leaflet.css?raw\";\nimport LeafletClusterCSS from \"leaflet.markercluster/dist/MarkerCluster.css?raw\";\nimport type * as ReactTypes from \"react\";\nimport \"leaflet.markercluster\";\n\nimport { attr, IS_BROWSER, MTDSElement, tag } from \"../utils\";\nimport css from \"./atlas.css?raw\";\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-view\"?: string;\n\t\t\t};\n\t\t}\n\t}\n}\n\nL.Marker.prototype.options.icon = L.divIcon({\n\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\ticonAnchor: [15, 30],\n\ticonSize: [30, 30],\n});\n\n// const strToLatLng = (str?: string | null) =>\n// \t[0, 0, ...(str || \"\").split(\",\").map(parseFloat)].slice(-2) as L.LatLngTuple;\n\nconst VIEW_NORWAY = \"57.95, 4.73, 71.19, 31.44, 15\";\nconst TILES_COLOR =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png\";\nconst TILES_GRAY =\n\t\"https://cache.kartverket.no/v1/wmts/1.0.0/topograatone/default/webmercator/{z}/{y}/{x}.png\";\n\nexport class MTDSAtlasElement extends MTDSElement {\n\tmap?: L.Map;\n\ttiles?: L.TileLayer;\n\tcluster?: L.MarkerClusterGroup;\n\tleaflet: typeof L;\n\n\tstatic get observedAttributes() {\n\t\treturn [\"data-view\", \"data-layers\", \"data-tiles\"]; // Using ES2015 syntax for backwards compatibility\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.leaflet = L;\n\t\tthis.attachShadow({ mode: \"open\" }).append(\n\t\t\ttag(\"style\", {}, `${LeafletCSS}\\n${LeafletClusterCSS}\\n${css}`),\n\t\t\ttag(\"slot\"),\n\t\t\ttag(\"div\"),\n\t\t);\n\t}\n\tconnectedCallback() {\n\t\tconst view = JSON.parse(`[${attr(this, \"data-view\") || VIEW_NORWAY}]`);\n\t\tconst div = this.shadowRoot?.lastElementChild;\n\t\tconst cluster = Number(attr(this, \"data-cluster\")) || 1;\n\t\tconst tiles =\n\t\t\tattr(this, \"data-tiles\") === \"color\" ? TILES_COLOR : TILES_GRAY;\n\n\t\tthis.tiles = L.tileLayer(tiles, { maxZoom: 18 });\n\t\tthis.cluster = L.markerClusterGroup({\n\t\t\tshowCoverageOnHover: false,\n\t\t\tdisableClusteringAtZoom: cluster,\n\t\t});\n\n\t\tthis.map = L.map(div as HTMLElement, {\n\t\t\tlayers: [this.tiles, this.cluster],\n\t\t\tattributionControl: false,\n\t\t\twheelPxPerZoomLevel: 20,\n\t\t\tzoomControl: false,\n\t\t\tzoomSnap: 0,\n\t\t});\n\t\tthis.map.addControl(L.control.zoom({ position: \"bottomright\" }));\n\n\t\t// If no view is set, use Norway as default bounding box\n\t\tif (view.length === 3) this.map.setView([view[0], view[1]], view[2]);\n\t\tif (view.length >= 4) {\n\t\t\tconst nw = [view[0], view[1]] as L.LatLngTuple;\n\t\t\tconst se = [view[2], view[3]] as L.LatLngTuple;\n\t\t\tconst padding = [view[4] ?? 0, view[5] ?? view[4] ?? 0] as L.PointTuple;\n\t\t\tthis.map.fitBounds([nw, se], { padding });\n\t\t}\n\t}\n\taddMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions) {\n\t\treturn L.marker(latlng, options).addTo(this.cluster || (this.map as L.Map));\n\t}\n\tdisconnectedCallback() {\n\t\tthis.map?.remove();\n\t}\n}\n\nif (IS_BROWSER && !window.customElements.get(\"mtds-atlas\"))\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\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":["L","VIEW_NORWAY","TILES_COLOR","TILES_GRAY","MTDSAtlasElement","MTDSElement","tag","LeafletCSS","LeafletClusterCSS","css","view","attr","div","cluster","tiles","nw","se","padding","latlng","options","IS_BROWSER"],"mappings":";;;;;;AAuBAA,EAAE,OAAO,UAAU,QAAQ,OAAOA,EAAE,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,YAAY,CAAC,IAAI,EAAE;AAAA,EACnB,UAAU,CAAC,IAAI,EAAE;AAClB,CAAC;AAKD,MAAMC,IAAc,iCACdC,IACL,sFACKC,IACL;AAEM,MAAMC,UAAyBC,EAAY;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,WAAW,qBAAqB;AAC/B,WAAO,CAAC,aAAa,eAAe,YAAY;AAAA,EACjD;AAAA,EAEA,cAAc;AACb,UAAA,GACA,KAAK,UAAUL,GACf,KAAK,aAAa,EAAE,MAAM,OAAA,CAAQ,EAAE;AAAA,MACnCM,EAAI,SAAS,IAAI,GAAGC,CAAU;AAAA,EAAKC,CAAiB;AAAA,EAAKC,CAAG,EAAE;AAAA,MAC9DH,EAAI,MAAM;AAAA,MACVA,EAAI,KAAK;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,oBAAoB;AACnB,UAAMI,IAAO,KAAK,MAAM,IAAIC,EAAK,MAAM,WAAW,KAAKV,CAAW,GAAG,GAC/DW,IAAM,KAAK,YAAY,kBACvBC,IAAU,OAAOF,EAAK,MAAM,cAAc,CAAC,KAAK,GAChDG,IACLH,EAAK,MAAM,YAAY,MAAM,UAAUT,IAAcC;AAmBtD,QAjBA,KAAK,QAAQH,EAAE,UAAUc,GAAO,EAAE,SAAS,IAAI,GAC/C,KAAK,UAAUd,EAAE,mBAAmB;AAAA,MACnC,qBAAqB;AAAA,MACrB,yBAAyBa;AAAA,IAAA,CACzB,GAED,KAAK,MAAMb,EAAE,IAAIY,GAAoB;AAAA,MACpC,QAAQ,CAAC,KAAK,OAAO,KAAK,OAAO;AAAA,MACjC,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB,aAAa;AAAA,MACb,UAAU;AAAA,IAAA,CACV,GACD,KAAK,IAAI,WAAWZ,EAAE,QAAQ,KAAK,EAAE,UAAU,cAAA,CAAe,CAAC,GAG3DU,EAAK,WAAW,KAAG,KAAK,IAAI,QAAQ,CAACA,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GAAGA,EAAK,CAAC,CAAC,GAC/DA,EAAK,UAAU,GAAG;AACrB,YAAMK,IAAK,CAACL,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GACtBM,IAAK,CAACN,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GACtBO,IAAU,CAACP,EAAK,CAAC,KAAK,GAAGA,EAAK,CAAC,KAAKA,EAAK,CAAC,KAAK,CAAC;AACtD,WAAK,IAAI,UAAU,CAACK,GAAIC,CAAE,GAAG,EAAE,SAAAC,GAAS;AAAA,IACzC;AAAA,EACD;AAAA,EACA,UAAUC,GAA4BC,GAA2B;AAChE,WAAOnB,EAAE,OAAOkB,GAAQC,CAAO,EAAE,MAAM,KAAK,WAAY,KAAK,GAAa;AAAA,EAC3E;AAAA,EACA,uBAAuB;AACtB,SAAK,KAAK,OAAA;AAAA,EACX;AACD;AAEIC,KAAc,CAAC,OAAO,eAAe,IAAI,YAAY,KACxD,OAAO,eAAe,OAAO,cAAchB,CAAgB;"}
+{"version":3,"file":"atlas-element.js","sources":["../../designsystem/atlas/atlas-element.ts"],"sourcesContent":["import L, { type PointExpression } 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\toff,\n\ton,\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-view\"?: string | number[];\n\t\t\t};\n\t\t}\n\t}\n}\n\nconst MARKER_SIZE = [30, 30];\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\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\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(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}\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: MARKER_SIZE as PointExpression,\n\t\ticonAnchor: [15, 30],\n\t\tpopupAnchor: [0, -15],\n\t});\n\twindow.customElements.define(\"mtds-atlas\", MTDSAtlasElement);\n}\n\n// TODO: Style markers\n// TODO: Synlig label til marker\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\nconst HANDLE_POPUP_EVENTS = \"popupclose move resize zoomanim 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, \"data-popover\", \"open\"); // Show popover\n\t\tattr(popover, \"popover\", \"manual\"); // Disable Popover API to show and ensure overflow: clip on mtds-atlas works\n\n\t\tconst resize = new ResizeObserver(() => update());\n\t\tconst update = (event?: L.LeafletEvent) => {\n\t\t\tif (event?.type === \"popupclose\" && event?.popup === popup) {\n\t\t\t\tresize.disconnect();\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\toff(popover, \"click\", click);\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 - MARKER_SIZE[0] / 2;\n\t\t\t\tconst y = point.y - popover.offsetHeight - MARKER_SIZE[1];\n\t\t\t\tpopover.style.translate = `${x}px ${y}px`;\n\t\t\t}\n\t\t};\n\t\tconst click = ({ target: el }: Event) =>\n\t\t\t(el as Element)?.closest?.('[popovertargetaction=\"hide\"]') &&\n\t\t\tpopup.close();\n\n\t\tmap.on(HANDLE_POPUP_EVENTS, update);\n\t\ton(popover, \"click\", click); // Listen for close actions inside popover since we are not using actual Popover API\n\t\tresize.observe(popover); // Listen for changes of popover size\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// // 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":["MARKER_SIZE","BOUNDS_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","debounce","HANDLE_POPUP_EVENTS","map","popup","id","popover","mode","resize","update","event","off","click","point","x","y","el","on"],"mappings":"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"}

package/mtds/atlas/atlas.css.js

@@ -1,10 +1,12 @@
 const t = `:host {
-	--mtdsc-atlas-background: var(--mtds-color-surface-default);
 	--mtdsc-atlas-cluster-size: var(--mtds-8);
+	--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);
 
-	aspect-ratio: 2; /* TODO: make possible to overwrite */
 	border-radius: var(--mtds-border-radius-md);
-	border: 1px solid var(--mtds-color-border-subtle);
+	aspect-ratio: 2;
 	overflow: clip;
 	position: relative;
 	user-select: none;
@@ -12,16 +14,22 @@ const t = `:host {
 :host(:not([hidden])) {
 	display: grid;
 }
-
 :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: #e0fefe;
+	--mtdsc-atlas-background: #e5fcfd;
 }
-:host([data-tiles="grayscale"]) .leaflet-tile-container,
-:host(:not([data-tiles])) .leaflet-tile-container {
-	filter: contrast(0.75) brightness(1.15);
+: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;
@@ -38,10 +46,20 @@ slot {
 	border: 0;
 }
 .leaflet-container {
-	font: inherit;
 	background: var(--mtdsc-atlas-background);
+	border-radius: inherit;
+	border: var(--mtdsc-atlas-border);
+	box-sizing: border-box;
+	font: inherit;
 	outline: 0;
+	position: relative;
+	z-index: 1; /* Ensure <slot> is always on top */
 }
+.leaflet-control-attribution {
+	font-size: 12px;
+	border-top-left-radius: var(--mtds-border-radius-md);
+}
+
 .map-pin rect {
 	fill: var(--mtds-color-base-contrast-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-background: var(--ds-color-surface-default);\\n\\t--mtdsc-atlas-cluster-size: var(--mtds-8);\\n\\n\\taspect-ratio: 2; /* TODO: make possible to overwrite */\\n\\tborder-radius: var(--ds-border-radius-md);\\n\\tborder: 1px solid var(--ds-color-border-subtle);\\n\\toverflow: clip;\\n\\tposition: relative;\\n\\tuser-select: none;\\n}\\n:host(:not([hidden])) {\\n\\tdisplay: grid;\\n}\\n\\n:host([data-cursor=\\\"pointer\\\"]) .leaflet-grab {\\n\\tcursor: pointer;\\n}\\n:host([data-tiles=\\\"color\\\"]) {\\n\\t--mtdsc-atlas-background: #e0fefe;\\n}\\n:host([data-tiles=\\\"grayscale\\\"]) .leaflet-tile-container,\\n:host(:not([data-tiles])) .leaflet-tile-container {\\n\\tfilter: contrast(0.75) brightness(1.15);\\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\\tfont: inherit;\\n\\tbackground: var(--mtdsc-atlas-background);\\n\\toutline: 0;\\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;"}
+{"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\\tposition: relative;\\n\\tz-index: 1; /* Ensure <slot> is always on top */\\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;AAAA;AAAA;"}

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

@@ -9,8 +9,11 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const WithView: Story;
+export declare const WithViewAdvanced: Story;
 export declare const WithColor: Story;
 export declare const WithCustomSize: Story;
 export declare const WithMarker: Story;
-export declare const WithClickToMarker: Story;
+export declare const WithClickToAddMarker: Story;
 export declare const WithClustering: Story;
+export declare const WithPopover: Story;
+export declare const WithoutScrollZoom: Story;