maplibre-gl-layer 0.2.2 → 0.2.3

package/README.md

@@ -42,6 +42,9 @@ const layerControl = new LayerControl({
     }
   ]
 })
+layerControl.on('layerchange', (layer) => {
+  console.log('Layer changed to:', layer.name)
+})
 map.addControl(layerControl)
 ```
 

package/dist/maplibre-gl-layer.d.ts

@@ -16,9 +16,11 @@ export declare class LayerControl implements IControl {
     private addedSources;
     private addedLayers;
     private layerDialog;
+    private layerChangeCallback;
     constructor(options: LayerControlOptions);
     onAdd(map: Map): HTMLElement;
     onRemove(): void;
+    on(type: string, callback: (layer: Layer) => void): void;
     private getPosition;
     private createButton;
     private changeLayer;

package/dist/maplibre-gl-layer.js

@@ -1,11 +1,11 @@
-var u = Object.defineProperty;
-var g = (c, e, t) => e in c ? u(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
-var a = (c, e, t) => g(c, typeof e != "symbol" ? e + "" : e, t);
-class m {
+var g = Object.defineProperty;
+var m = (c, e, t) => e in c ? g(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var s = (c, e, t) => m(c, typeof e != "symbol" ? e + "" : e, t);
+class b {
   constructor(e, t) {
-    a(this, "dialog");
-    a(this, "options");
-    a(this, "layerChangeCallback", () => {
+    s(this, "dialog");
+    s(this, "options");
+    s(this, "layerChangeCallback", () => {
     });
     this.options = e, this.dialog = document.createElement("dialog"), this.dialog.classList.add("maplibregl-ctrl-layer-dialog"), document.body.appendChild(this.dialog), this.dialog.addEventListener("click", () => {
       this.dialog.close();
@@ -42,17 +42,19 @@ class m {
     t === "top-right" ? (l = `${i.y}px`, o = `${i.x - this.dialog.clientWidth - 12}px`) : t === "top-left" ? (l = `${i.y}px`, o = `${i.x + i.width + 12}px`) : t === "bottom-right" ? (l = `${i.y - this.dialog.clientHeight + i.height}px`, o = `${i.x - this.dialog.clientWidth - 12}px`) : t === "bottom-left" && (l = `${i.y - this.dialog.clientHeight + i.height}px`, o = `${i.x + i.width + 12}px`), this.dialog.style.setProperty("top", l), this.dialog.style.setProperty("left", o);
   }
 }
-class b {
+class L {
   constructor(e) {
-    a(this, "map", null);
-    a(this, "options");
-    a(this, "container");
-    a(this, "currentLayer");
-    a(this, "currentInitStyle", null);
-    a(this, "addedSources", {});
-    a(this, "addedLayers", []);
-    a(this, "layerDialog");
-    this.options = e, this.container = document.createElement("div"), this.container.classList.add("maplibregl-ctrl", "maplibregl-ctrl-group"), this.currentLayer = e.layers.find((t) => t.checked) || e.layers[0], this.layerDialog = new m(this.options, this.currentLayer), this.layerDialog.on("layerchange", (t) => {
+    s(this, "map", null);
+    s(this, "options");
+    s(this, "container");
+    s(this, "currentLayer");
+    s(this, "currentInitStyle", null);
+    s(this, "addedSources", {});
+    s(this, "addedLayers", []);
+    s(this, "layerDialog");
+    s(this, "layerChangeCallback", () => {
+    });
+    this.options = e, this.container = document.createElement("div"), this.container.classList.add("maplibregl-ctrl", "maplibregl-ctrl-group"), this.currentLayer = e.layers.find((t) => t.checked) || e.layers[0], this.layerDialog = new b(this.options, this.currentLayer), this.layerDialog.on("layerchange", (t) => {
       this.changeLayer(t), this.layerDialog.close();
     });
   }
@@ -69,6 +71,9 @@ class b {
     var e;
     (e = this.container.parentNode) == null || e.removeChild(this.container);
   }
+  on(e, t) {
+    e === "layerchange" && (this.layerChangeCallback = t);
+  }
   getPosition() {
     if (!this.map) return null;
     const e = this.map._controlPositions;
@@ -81,39 +86,40 @@ class b {
     return t.classList.add("maplibregl-ctrl-icon"), e.appendChild(t), e;
   }
   changeLayer(e) {
+    var u;
     if (!this.map) return;
     const t = this.currentInitStyle.layers, i = this.map.getStyle().layers, l = i.filter(
-      (r) => !t.some((s) => s.id === r.id)
+      (a) => !t.some((r) => r.id === a.id)
     );
     this.addedLayers = [...this.addedLayers, ...l];
     const o = t.filter(
-      (r) => !i.some((s) => s.id === r.id)
+      (a) => !i.some((r) => r.id === a.id)
     );
     this.addedLayers = this.addedLayers.filter(
-      (r) => !o.some((s) => s.id === r.id)
-    ), this.addedLayers.forEach((r) => {
-      const s = i.find((y) => y.id === r.id);
-      r.filter = s == null ? void 0 : s.filter;
+      (a) => !o.some((r) => r.id === a.id)
+    ), this.addedLayers.forEach((a) => {
+      const r = i.find((y) => y.id === a.id);
+      a.filter = r == null ? void 0 : r.filter;
     });
     const d = this.currentInitStyle.sources, n = this.map.getStyle().sources, h = {};
-    Object.entries(n).forEach(([r, s]) => {
-      Object.keys(d).includes(r) || (h[r] = s);
+    Object.entries(n).forEach(([a, r]) => {
+      Object.keys(d).includes(a) || (h[a] = r);
     }), this.addedSources = { ...this.addedSources, ...h }, Object.keys(d).filter(
-      (r) => !Object.keys(n).includes(r)
-    ).forEach((r) => {
-      delete this.addedSources[r];
+      (a) => !Object.keys(n).includes(a)
+    ).forEach((a) => {
+      delete this.addedSources[a];
     }), this.map.setStyle(e.style, {
-      transformStyle: (r, s) => {
+      transformStyle: (a, r) => {
         const y = {
-          ...s,
-          sources: { ...s.sources, ...this.addedSources },
-          layers: s.layers.concat(this.addedLayers)
+          ...r,
+          sources: { ...r.sources, ...this.addedSources },
+          layers: r.layers.concat(this.addedLayers)
         };
         return this.currentInitStyle = y, y;
       }
-    });
+    }), this.currentLayer = e, (u = this.layerChangeCallback) == null || u.call(this, e);
   }
 }
 export {
-  b as LayerControl
+  L as LayerControl
 };

package/dist/maplibre-gl-layer.umd.cjs

@@ -1 +1 @@
-(function(o,l){typeof exports=="object"&&typeof module<"u"?l(exports):typeof define=="function"&&define.amd?define(["exports"],l):(o=typeof globalThis<"u"?globalThis:o||self,l(o["maplibre-gl-layer"]={}))})(this,function(o){"use strict";var f=Object.defineProperty;var b=(o,l,h)=>l in o?f(o,l,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[l]=h;var n=(o,l,h)=>b(o,typeof l!="symbol"?l+"":l,h);class l{constructor(e,t){n(this,"dialog");n(this,"options");n(this,"layerChangeCallback",()=>{});this.options=e,this.dialog=document.createElement("dialog"),this.dialog.classList.add("maplibregl-ctrl-layer-dialog"),document.body.appendChild(this.dialog),this.dialog.addEventListener("click",()=>{this.dialog.close()});const i=document.createElement("div");i.classList.add("maplibregl-ctrl-layer-dialog-content"),i.addEventListener("click",a=>{a.stopPropagation()}),this.dialog.appendChild(i),this.options.layers.forEach(a=>{const d=document.createElement("div");d.classList.add("maplibregl-ctrl-layer-dialog-item");const p=document.createElement("label");d.appendChild(p);const c=document.createElement("input");c.setAttribute("type","radio"),c.setAttribute("name","layer"),t.name===a.name&&c.setAttribute("checked","checked"),c.addEventListener("change",()=>{var g;(g=this.layerChangeCallback)==null||g.call(this,a)}),p.appendChild(c);const u=document.createElement("span");u.textContent=a.name,p.appendChild(u),i.appendChild(d)})}open(e,t=null){this.dialog.showModal(),this.setPosition(e,t)}close(){this.dialog.close()}on(e,t){e==="layerchange"&&(this.layerChangeCallback=t)}setPosition(e,t){const i=e.getBoundingClientRect();let a="",d="";t==="top-right"?(a=`${i.y}px`,d=`${i.x-this.dialog.clientWidth-12}px`):t==="top-left"?(a=`${i.y}px`,d=`${i.x+i.width+12}px`):t==="bottom-right"?(a=`${i.y-this.dialog.clientHeight+i.height}px`,d=`${i.x-this.dialog.clientWidth-12}px`):t==="bottom-left"&&(a=`${i.y-this.dialog.clientHeight+i.height}px`,d=`${i.x+i.width+12}px`),this.dialog.style.setProperty("top",a),this.dialog.style.setProperty("left",d)}}class h{constructor(e){n(this,"map",null);n(this,"options");n(this,"container");n(this,"currentLayer");n(this,"currentInitStyle",null);n(this,"addedSources",{});n(this,"addedLayers",[]);n(this,"layerDialog");this.options=e,this.container=document.createElement("div"),this.container.classList.add("maplibregl-ctrl","maplibregl-ctrl-group"),this.currentLayer=e.layers.find(t=>t.checked)||e.layers[0],this.layerDialog=new l(this.options,this.currentLayer),this.layerDialog.on("layerchange",t=>{this.changeLayer(t),this.layerDialog.close()})}onAdd(e){this.map=e,this.currentInitStyle=this.map.getStyle(),this.currentInitStyle||this.map.once("style.load",()=>{this.map&&(this.currentInitStyle=this.map.getStyle())});const t=this.createButton();return t.addEventListener("click",()=>{this.layerDialog.open(t,this.getPosition())}),this.container.appendChild(t),this.container}onRemove(){var e;(e=this.container.parentNode)==null||e.removeChild(this.container)}getPosition(){if(!this.map)return null;const e=this.map._controlPositions;return e["top-left"].querySelector(".maplibregl-ctrl-layer")?"top-left":e["top-right"].querySelector(".maplibregl-ctrl-layer")?"top-right":e["bottom-left"].querySelector(".maplibregl-ctrl-layer")?"bottom-left":e["bottom-right"].querySelector(".maplibregl-ctrl-layer")?"bottom-right":null}createButton(){const e=document.createElement("button");e.classList.add("maplibregl-ctrl-layer"),e.setAttribute("title","Change map style"),e.setAttribute("aria-label","Change map style");const t=document.createElement("i");return t.classList.add("maplibregl-ctrl-icon"),e.appendChild(t),e}changeLayer(e){if(!this.map)return;const t=this.currentInitStyle.layers,i=this.map.getStyle().layers,a=i.filter(r=>!t.some(s=>s.id===r.id));this.addedLayers=[...this.addedLayers,...a];const d=t.filter(r=>!i.some(s=>s.id===r.id));this.addedLayers=this.addedLayers.filter(r=>!d.some(s=>s.id===r.id)),this.addedLayers.forEach(r=>{const s=i.find(y=>y.id===r.id);r.filter=s==null?void 0:s.filter});const p=this.currentInitStyle.sources,c=this.map.getStyle().sources,u={};Object.entries(c).forEach(([r,s])=>{Object.keys(p).includes(r)||(u[r]=s)}),this.addedSources={...this.addedSources,...u},Object.keys(p).filter(r=>!Object.keys(c).includes(r)).forEach(r=>{delete this.addedSources[r]}),this.map.setStyle(e.style,{transformStyle:(r,s)=>{const y={...s,sources:{...s.sources,...this.addedSources},layers:s.layers.concat(this.addedLayers)};return this.currentInitStyle=y,y}})}}o.LayerControl=h,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(n,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(n=typeof globalThis<"u"?globalThis:n||self,a(n["maplibre-gl-layer"]={}))})(this,function(n){"use strict";var b=Object.defineProperty;var L=(n,a,h)=>a in n?b(n,a,{enumerable:!0,configurable:!0,writable:!0,value:h}):n[a]=h;var o=(n,a,h)=>L(n,typeof a!="symbol"?a+"":a,h);class a{constructor(e,t){o(this,"dialog");o(this,"options");o(this,"layerChangeCallback",()=>{});this.options=e,this.dialog=document.createElement("dialog"),this.dialog.classList.add("maplibregl-ctrl-layer-dialog"),document.body.appendChild(this.dialog),this.dialog.addEventListener("click",()=>{this.dialog.close()});const i=document.createElement("div");i.classList.add("maplibregl-ctrl-layer-dialog-content"),i.addEventListener("click",s=>{s.stopPropagation()}),this.dialog.appendChild(i),this.options.layers.forEach(s=>{const d=document.createElement("div");d.classList.add("maplibregl-ctrl-layer-dialog-item");const y=document.createElement("label");d.appendChild(y);const c=document.createElement("input");c.setAttribute("type","radio"),c.setAttribute("name","layer"),t.name===s.name&&c.setAttribute("checked","checked"),c.addEventListener("change",()=>{var g;(g=this.layerChangeCallback)==null||g.call(this,s)}),y.appendChild(c);const u=document.createElement("span");u.textContent=s.name,y.appendChild(u),i.appendChild(d)})}open(e,t=null){this.dialog.showModal(),this.setPosition(e,t)}close(){this.dialog.close()}on(e,t){e==="layerchange"&&(this.layerChangeCallback=t)}setPosition(e,t){const i=e.getBoundingClientRect();let s="",d="";t==="top-right"?(s=`${i.y}px`,d=`${i.x-this.dialog.clientWidth-12}px`):t==="top-left"?(s=`${i.y}px`,d=`${i.x+i.width+12}px`):t==="bottom-right"?(s=`${i.y-this.dialog.clientHeight+i.height}px`,d=`${i.x-this.dialog.clientWidth-12}px`):t==="bottom-left"&&(s=`${i.y-this.dialog.clientHeight+i.height}px`,d=`${i.x+i.width+12}px`),this.dialog.style.setProperty("top",s),this.dialog.style.setProperty("left",d)}}class h{constructor(e){o(this,"map",null);o(this,"options");o(this,"container");o(this,"currentLayer");o(this,"currentInitStyle",null);o(this,"addedSources",{});o(this,"addedLayers",[]);o(this,"layerDialog");o(this,"layerChangeCallback",()=>{});this.options=e,this.container=document.createElement("div"),this.container.classList.add("maplibregl-ctrl","maplibregl-ctrl-group"),this.currentLayer=e.layers.find(t=>t.checked)||e.layers[0],this.layerDialog=new a(this.options,this.currentLayer),this.layerDialog.on("layerchange",t=>{this.changeLayer(t),this.layerDialog.close()})}onAdd(e){this.map=e,this.currentInitStyle=this.map.getStyle(),this.currentInitStyle||this.map.once("style.load",()=>{this.map&&(this.currentInitStyle=this.map.getStyle())});const t=this.createButton();return t.addEventListener("click",()=>{this.layerDialog.open(t,this.getPosition())}),this.container.appendChild(t),this.container}onRemove(){var e;(e=this.container.parentNode)==null||e.removeChild(this.container)}on(e,t){e==="layerchange"&&(this.layerChangeCallback=t)}getPosition(){if(!this.map)return null;const e=this.map._controlPositions;return e["top-left"].querySelector(".maplibregl-ctrl-layer")?"top-left":e["top-right"].querySelector(".maplibregl-ctrl-layer")?"top-right":e["bottom-left"].querySelector(".maplibregl-ctrl-layer")?"bottom-left":e["bottom-right"].querySelector(".maplibregl-ctrl-layer")?"bottom-right":null}createButton(){const e=document.createElement("button");e.classList.add("maplibregl-ctrl-layer"),e.setAttribute("title","Change map style"),e.setAttribute("aria-label","Change map style");const t=document.createElement("i");return t.classList.add("maplibregl-ctrl-icon"),e.appendChild(t),e}changeLayer(e){var m;if(!this.map)return;const t=this.currentInitStyle.layers,i=this.map.getStyle().layers,s=i.filter(l=>!t.some(r=>r.id===l.id));this.addedLayers=[...this.addedLayers,...s];const d=t.filter(l=>!i.some(r=>r.id===l.id));this.addedLayers=this.addedLayers.filter(l=>!d.some(r=>r.id===l.id)),this.addedLayers.forEach(l=>{const r=i.find(p=>p.id===l.id);l.filter=r==null?void 0:r.filter});const y=this.currentInitStyle.sources,c=this.map.getStyle().sources,u={};Object.entries(c).forEach(([l,r])=>{Object.keys(y).includes(l)||(u[l]=r)}),this.addedSources={...this.addedSources,...u},Object.keys(y).filter(l=>!Object.keys(c).includes(l)).forEach(l=>{delete this.addedSources[l]}),this.map.setStyle(e.style,{transformStyle:(l,r)=>{const p={...r,sources:{...r.sources,...this.addedSources},layers:r.layers.concat(this.addedLayers)};return this.currentInitStyle=p,p}}),this.currentLayer=e,(m=this.layerChangeCallback)==null||m.call(this,e)}}n.LayerControl=h,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maplibre-gl-layer",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "A layer control for MapLibre GL JS",
   "type": "module",
   "files": [