maplibre-gl-layer 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
.maplibregl-ctrl button.maplibregl-ctrl-layer .maplibregl-ctrl-icon{background-image:url(./layer.svg)}.maplibregl-ctrl-layer-dialog{position:absolute;margin:0;padding:0;background-color:transparent;border:none;box-shadow:0 0 0 2px #0000001a;border-radius:5px}.maplibregl-ctrl-layer-dialog .maplibregl-ctrl-layer-dialog-content{padding:6px 14px;background-color:#fff}.maplibregl-ctrl-layer-dialog::backdrop{background:transparent}.maplibregl-ctrl-layer-dialog-item{margin:6px 0}.maplibregl-ctrl-layer-dialog-item label{display:flex;align-items:center;font-size:14px;color:#333}.maplibregl-ctrl-layer-dialog-item input{margin:0 8px 0 0}
|
|
1
|
+
.maplibregl-ctrl button.maplibregl-ctrl-layer .maplibregl-ctrl-icon{background-image:url(./layer.svg)}.maplibregl-ctrl-layer-dialog{position:absolute;margin:0;padding:0;background-color:transparent;border:none;box-shadow:0 0 0 2px #0000001a;border-radius:5px}.maplibregl-ctrl-layer-dialog .maplibregl-ctrl-layer-dialog-content{padding:6px 14px;background-color:#fff}.maplibregl-ctrl-layer-dialog::backdrop{background:transparent}.maplibregl-ctrl-layer-dialog-item{margin:6px 0}.maplibregl-ctrl-layer-dialog-item label{display:flex;align-items:center;font-size:14px;color:#333}.maplibregl-ctrl-layer-dialog-item input{margin:0 8px 0 0}.maplibregl-ctrl-layer-dialog-item input:focus{outline:none}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
var u = Object.defineProperty;
|
|
2
2
|
var g = (c, e, t) => e in c ? u(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
|
|
3
|
-
var
|
|
3
|
+
var a = (c, e, t) => g(c, typeof e != "symbol" ? e + "" : e, t);
|
|
4
4
|
class m {
|
|
5
5
|
constructor(e, t) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
a(this, "dialog");
|
|
7
|
+
a(this, "options");
|
|
8
|
+
a(this, "layerChangeCallback", () => {
|
|
9
9
|
});
|
|
10
10
|
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", () => {
|
|
11
11
|
this.dialog.close();
|
|
12
12
|
});
|
|
13
13
|
const i = document.createElement("div");
|
|
14
|
-
i.classList.add("maplibregl-ctrl-layer-dialog-content"), i.addEventListener("click", (
|
|
15
|
-
|
|
16
|
-
}), this.dialog.appendChild(i), this.options.layers.forEach((
|
|
17
|
-
const
|
|
18
|
-
|
|
14
|
+
i.classList.add("maplibregl-ctrl-layer-dialog-content"), i.addEventListener("click", (l) => {
|
|
15
|
+
l.stopPropagation();
|
|
16
|
+
}), this.dialog.appendChild(i), this.options.layers.forEach((l) => {
|
|
17
|
+
const o = document.createElement("div");
|
|
18
|
+
o.classList.add("maplibregl-ctrl-layer-dialog-item");
|
|
19
19
|
const d = document.createElement("label");
|
|
20
|
-
|
|
20
|
+
o.appendChild(d);
|
|
21
21
|
const n = document.createElement("input");
|
|
22
|
-
n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name ===
|
|
23
|
-
var
|
|
24
|
-
(
|
|
22
|
+
n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name === l.name && n.setAttribute("checked", "checked"), n.addEventListener("change", () => {
|
|
23
|
+
var p;
|
|
24
|
+
(p = this.layerChangeCallback) == null || p.call(this, l);
|
|
25
25
|
}), d.appendChild(n);
|
|
26
26
|
const h = document.createElement("span");
|
|
27
|
-
h.textContent =
|
|
27
|
+
h.textContent = l.name, d.appendChild(h), i.appendChild(o);
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
open(e, t = null) {
|
|
@@ -38,20 +38,20 @@ class m {
|
|
|
38
38
|
}
|
|
39
39
|
setPosition(e, t) {
|
|
40
40
|
const i = e.getBoundingClientRect();
|
|
41
|
-
let
|
|
42
|
-
t === "top-right" ? (
|
|
41
|
+
let l = "", o = "";
|
|
42
|
+
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);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
class
|
|
45
|
+
class b {
|
|
46
46
|
constructor(e) {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
a(this, "map", null);
|
|
48
|
+
a(this, "options");
|
|
49
|
+
a(this, "container");
|
|
50
|
+
a(this, "currentLayer");
|
|
51
|
+
a(this, "currentInitStyle", null);
|
|
52
|
+
a(this, "addedSources", {});
|
|
53
|
+
a(this, "addedLayers", []);
|
|
54
|
+
a(this, "layerDialog");
|
|
55
55
|
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) => {
|
|
56
56
|
this.changeLayer(t), this.layerDialog.close();
|
|
57
57
|
});
|
|
@@ -82,35 +82,38 @@ class f {
|
|
|
82
82
|
}
|
|
83
83
|
changeLayer(e) {
|
|
84
84
|
if (!this.map) return;
|
|
85
|
-
const t = this.currentInitStyle.layers, i = this.map.getStyle().layers,
|
|
86
|
-
(
|
|
85
|
+
const t = this.currentInitStyle.layers, i = this.map.getStyle().layers, l = i.filter(
|
|
86
|
+
(r) => !t.some((s) => s.id === r.id)
|
|
87
87
|
);
|
|
88
|
-
this.addedLayers = [...this.addedLayers, ...
|
|
89
|
-
const
|
|
90
|
-
(
|
|
88
|
+
this.addedLayers = [...this.addedLayers, ...l];
|
|
89
|
+
const o = t.filter(
|
|
90
|
+
(r) => !i.some((s) => s.id === r.id)
|
|
91
91
|
);
|
|
92
92
|
this.addedLayers = this.addedLayers.filter(
|
|
93
|
-
(
|
|
94
|
-
)
|
|
93
|
+
(r) => !o.some((s) => s.id === r.id)
|
|
94
|
+
), this.addedLayers.forEach((r) => {
|
|
95
|
+
const s = i.find((y) => y.id === r.id);
|
|
96
|
+
r.filter = s == null ? void 0 : s.filter;
|
|
97
|
+
});
|
|
95
98
|
const d = this.currentInitStyle.sources, n = this.map.getStyle().sources, h = {};
|
|
96
|
-
Object.entries(n).forEach(([
|
|
97
|
-
Object.keys(d).includes(
|
|
99
|
+
Object.entries(n).forEach(([r, s]) => {
|
|
100
|
+
Object.keys(d).includes(r) || (h[r] = s);
|
|
98
101
|
}), this.addedSources = { ...this.addedSources, ...h }, Object.keys(d).filter(
|
|
99
|
-
(
|
|
100
|
-
).forEach((
|
|
101
|
-
delete this.addedSources[
|
|
102
|
+
(r) => !Object.keys(n).includes(r)
|
|
103
|
+
).forEach((r) => {
|
|
104
|
+
delete this.addedSources[r];
|
|
102
105
|
}), this.map.setStyle(e.style, {
|
|
103
|
-
transformStyle: (
|
|
104
|
-
const
|
|
105
|
-
...
|
|
106
|
-
sources: { ...
|
|
107
|
-
layers:
|
|
106
|
+
transformStyle: (r, s) => {
|
|
107
|
+
const y = {
|
|
108
|
+
...s,
|
|
109
|
+
sources: { ...s.sources, ...this.addedSources },
|
|
110
|
+
layers: s.layers.concat(this.addedLayers)
|
|
108
111
|
};
|
|
109
|
-
return this.currentInitStyle =
|
|
112
|
+
return this.currentInitStyle = y, y;
|
|
110
113
|
}
|
|
111
114
|
});
|
|
112
115
|
}
|
|
113
116
|
}
|
|
114
117
|
export {
|
|
115
|
-
|
|
118
|
+
b as LayerControl
|
|
116
119
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
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"})});
|