maplibre-gl-layer 0.1.0 → 0.1.1
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.
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A layer control for [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/).
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```sh
|
|
@@ -14,6 +16,7 @@ npm install maplibre-gl-layer
|
|
|
14
16
|
import { Map } from "maplibre-gl";
|
|
15
17
|
import "maplibre-gl/dist/maplibre-gl.css";
|
|
16
18
|
import { LayerControl } from "maplibre-gl-layer";
|
|
19
|
+
import 'maplibre-gl-layer/style.css'
|
|
17
20
|
|
|
18
21
|
const map = new Map({
|
|
19
22
|
/* YOUR_MAP_OPTIONS */
|
|
@@ -22,12 +25,12 @@ const map = new Map({
|
|
|
22
25
|
map.addControl(new LayerControl({
|
|
23
26
|
layers: [
|
|
24
27
|
{
|
|
25
|
-
name: '
|
|
26
|
-
style:
|
|
28
|
+
name: 'STYLE 1',
|
|
29
|
+
style: YOUR_AWESOME_STYLE
|
|
27
30
|
},
|
|
28
31
|
{
|
|
29
|
-
name: '
|
|
30
|
-
style:
|
|
32
|
+
name: 'STYLE 2',
|
|
33
|
+
style: YOUR_AWESOME_STYLE,
|
|
31
34
|
}
|
|
32
35
|
]
|
|
33
36
|
}))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.maplibregl-ctrl button.maplibregl-ctrl-
|
|
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:#fff3}.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,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 l = (c, e, t) => g(c, typeof e != "symbol" ? e + "" : e, t);
|
|
4
4
|
class m {
|
|
5
5
|
constructor(e, t) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
l(this, "dialog");
|
|
7
|
+
l(this, "options");
|
|
8
|
+
l(this, "layerChangeCallback", () => {
|
|
9
9
|
});
|
|
10
|
-
this.options = e, this.dialog = document.createElement("dialog"), this.dialog.classList.add("maplibregl-ctrl-
|
|
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-
|
|
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", (r) => {
|
|
15
|
+
r.stopPropagation();
|
|
16
|
+
}), this.dialog.appendChild(i), this.options.layers.forEach((r) => {
|
|
17
|
+
const a = document.createElement("div");
|
|
18
|
+
a.classList.add("maplibregl-ctrl-layer-dialog-item");
|
|
19
19
|
const d = document.createElement("label");
|
|
20
|
-
|
|
20
|
+
a.appendChild(d);
|
|
21
21
|
const n = document.createElement("input");
|
|
22
|
-
n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name ===
|
|
22
|
+
n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name === r.name && n.setAttribute("checked", "checked"), n.addEventListener("change", () => {
|
|
23
23
|
var p;
|
|
24
|
-
(p = this.layerChangeCallback) == null || p.call(this,
|
|
24
|
+
(p = this.layerChangeCallback) == null || p.call(this, r);
|
|
25
25
|
}), d.appendChild(n);
|
|
26
26
|
const h = document.createElement("span");
|
|
27
|
-
h.textContent =
|
|
27
|
+
h.textContent = r.name, d.appendChild(h), i.appendChild(a);
|
|
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 r = "", a = "";
|
|
42
|
+
t === "top-right" ? (r = `${i.y}px`, a = `${i.x - this.dialog.clientWidth - 12}px`) : t === "top-left" ? (r = `${i.y}px`, a = `${i.x + i.width + 12}px`) : t === "bottom-right" ? (r = `${i.y - this.dialog.clientHeight + i.height}px`, a = `${i.x - this.dialog.clientWidth - 12}px`) : t === "bottom-left" && (r = `${i.y - this.dialog.clientHeight + i.height}px`, a = `${i.x + i.width + 12}px`), this.dialog.style.setProperty("top", r), this.dialog.style.setProperty("left", a);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
class f {
|
|
46
46
|
constructor(e) {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
l(this, "map", null);
|
|
48
|
+
l(this, "options");
|
|
49
|
+
l(this, "container");
|
|
50
|
+
l(this, "currentLayer");
|
|
51
|
+
l(this, "currentInitStyle", null);
|
|
52
|
+
l(this, "addedSources", {});
|
|
53
|
+
l(this, "addedLayers", []);
|
|
54
|
+
l(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[0], this.layerDialog = new m(this.options, this.currentLayer), this.layerDialog.on("layerchange", (t) => {
|
|
56
56
|
this.changeLayer(t), this.layerDialog.close();
|
|
57
57
|
});
|
|
@@ -72,35 +72,35 @@ class f {
|
|
|
72
72
|
getPosition() {
|
|
73
73
|
if (!this.map) return null;
|
|
74
74
|
const e = this.map._controlPositions;
|
|
75
|
-
return e["top-left"].querySelector(".maplibregl-ctrl-
|
|
75
|
+
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;
|
|
76
76
|
}
|
|
77
77
|
createButton() {
|
|
78
78
|
const e = document.createElement("button");
|
|
79
|
-
e.classList.add("maplibregl-ctrl-
|
|
79
|
+
e.classList.add("maplibregl-ctrl-layer"), e.setAttribute("title", "Change map style"), e.setAttribute("aria-label", "Change map style");
|
|
80
80
|
const t = document.createElement("i");
|
|
81
81
|
return t.classList.add("maplibregl-ctrl-icon"), e.appendChild(t), e;
|
|
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, r = i.filter(
|
|
86
|
+
(s) => !t.some((o) => o.id === s.id)
|
|
87
87
|
);
|
|
88
|
-
this.addedLayers = [...this.addedLayers, ...
|
|
89
|
-
const
|
|
90
|
-
(
|
|
88
|
+
this.addedLayers = [...this.addedLayers, ...r];
|
|
89
|
+
const a = t.filter(
|
|
90
|
+
(s) => !i.some((o) => o.id === s.id)
|
|
91
91
|
);
|
|
92
92
|
this.addedLayers = this.addedLayers.filter(
|
|
93
|
-
(
|
|
93
|
+
(s) => !a.some((o) => o.id === s.id)
|
|
94
94
|
);
|
|
95
95
|
const d = this.currentInitStyle.sources, n = this.map.getStyle().sources, h = {};
|
|
96
|
-
Object.entries(n).forEach(([
|
|
97
|
-
Object.keys(d).includes(
|
|
96
|
+
Object.entries(n).forEach(([s, o]) => {
|
|
97
|
+
Object.keys(d).includes(s) || (h[s] = o);
|
|
98
98
|
}), this.addedSources = { ...this.addedSources, ...h }, Object.keys(d).filter(
|
|
99
|
-
(
|
|
100
|
-
).forEach((
|
|
101
|
-
delete this.addedSources[
|
|
99
|
+
(s) => !Object.keys(n).includes(s)
|
|
100
|
+
).forEach((s) => {
|
|
101
|
+
delete this.addedSources[s];
|
|
102
102
|
}), this.map.setStyle(e.style, {
|
|
103
|
-
transformStyle: (
|
|
103
|
+
transformStyle: (s, o) => {
|
|
104
104
|
const y = {
|
|
105
105
|
...o,
|
|
106
106
|
sources: { ...o.sources, ...this.addedSources },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(a,
|
|
1
|
+
(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a["maplibre-gl-layer"]={}))})(this,function(a){"use strict";var f=Object.defineProperty;var b=(a,r,h)=>r in a?f(a,r,{enumerable:!0,configurable:!0,writable:!0,value:h}):a[r]=h;var o=(a,r,h)=>b(a,typeof r!="symbol"?r+"":r,h);class r{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 n=document.createElement("div");n.classList.add("maplibregl-ctrl-layer-dialog-item");const p=document.createElement("label");n.appendChild(p);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 y;(y=this.layerChangeCallback)==null||y.call(this,s)}),p.appendChild(c);const u=document.createElement("span");u.textContent=s.name,p.appendChild(u),i.appendChild(n)})}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="",n="";t==="top-right"?(s=`${i.y}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="top-left"?(s=`${i.y}px`,n=`${i.x+i.width+12}px`):t==="bottom-right"?(s=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="bottom-left"&&(s=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x+i.width+12}px`),this.dialog.style.setProperty("top",s),this.dialog.style.setProperty("left",n)}}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");this.options=e,this.container=document.createElement("div"),this.container.classList.add("maplibregl-ctrl","maplibregl-ctrl-group"),this.currentLayer=e.layers[0],this.layerDialog=new r(this.options,this.currentLayer),this.layerDialog.on("layerchange",t=>{this.changeLayer(t),this.layerDialog.close()})}onAdd(e){this.map=e,this.map.setStyle(this.currentLayer.style),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,s=i.filter(l=>!t.some(d=>d.id===l.id));this.addedLayers=[...this.addedLayers,...s];const n=t.filter(l=>!i.some(d=>d.id===l.id));this.addedLayers=this.addedLayers.filter(l=>!n.some(d=>d.id===l.id));const p=this.currentInitStyle.sources,c=this.map.getStyle().sources,u={};Object.entries(c).forEach(([l,d])=>{Object.keys(p).includes(l)||(u[l]=d)}),this.addedSources={...this.addedSources,...u},Object.keys(p).filter(l=>!Object.keys(c).includes(l)).forEach(l=>{delete this.addedSources[l]}),this.map.setStyle(e.style,{transformStyle:(l,d)=>{const g={...d,sources:{...d.sources,...this.addedSources},layers:d.layers.concat(this.addedLayers)};return this.currentInitStyle=g,g}})}}a.LayerControl=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
File without changes
|