maplibre-gl-layer 0.1.0 → 0.2.0
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,23 +16,33 @@ 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";
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
import 'maplibre-gl-layer/style.css'
|
|
20
|
+
|
|
21
|
+
const map = new Map({ /* YOUR_MAP_OPTIONS */ });
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Parameters for LayerControl
|
|
25
|
+
* {
|
|
26
|
+
* layers: Array<{
|
|
27
|
+
* name: string;
|
|
28
|
+
* style: string | StyleSpecification;
|
|
29
|
+
* checked?: boolean;
|
|
30
|
+
* }>;
|
|
31
|
+
* }
|
|
32
|
+
*/
|
|
33
|
+
const layerControl = new LayerControl({
|
|
23
34
|
layers: [
|
|
24
35
|
{
|
|
25
|
-
name: '
|
|
26
|
-
style:
|
|
36
|
+
name: 'STYLE 1',
|
|
37
|
+
style: YOUR_AWESOME_STYLE
|
|
27
38
|
},
|
|
28
39
|
{
|
|
29
|
-
name: '
|
|
30
|
-
style:
|
|
40
|
+
name: 'STYLE 2',
|
|
41
|
+
style: YOUR_AWESOME_STYLE
|
|
31
42
|
}
|
|
32
43
|
]
|
|
33
|
-
})
|
|
44
|
+
})
|
|
45
|
+
map.addControl(layerControl)
|
|
34
46
|
```
|
|
35
47
|
|
|
36
48
|
## License
|
|
@@ -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: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,7 +1,8 @@
|
|
|
1
|
-
import { Map, IControl } from 'maplibre-gl';
|
|
1
|
+
import { Map, StyleSpecification, IControl } from 'maplibre-gl';
|
|
2
2
|
export type Layer = {
|
|
3
3
|
name: string;
|
|
4
|
-
style: string;
|
|
4
|
+
style: string | StyleSpecification;
|
|
5
|
+
checked?: boolean;
|
|
5
6
|
};
|
|
6
7
|
export type LayerControlOptions = {
|
|
7
8
|
layers: Layer[];
|
|
@@ -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 s = (c, e, t) => g(c, typeof e != "symbol" ? e + "" : e, t);
|
|
4
4
|
class m {
|
|
5
5
|
constructor(e, t) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
s(this, "dialog");
|
|
7
|
+
s(this, "options");
|
|
8
|
+
s(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 ===
|
|
23
|
-
var
|
|
24
|
-
(
|
|
22
|
+
n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name === r.name && n.setAttribute("checked", "checked"), n.addEventListener("change", () => {
|
|
23
|
+
var y;
|
|
24
|
+
(y = this.layerChangeCallback) == null || y.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,26 +38,26 @@ 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
|
-
|
|
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) => {
|
|
47
|
+
s(this, "map", null);
|
|
48
|
+
s(this, "options");
|
|
49
|
+
s(this, "container");
|
|
50
|
+
s(this, "currentLayer");
|
|
51
|
+
s(this, "currentInitStyle", null);
|
|
52
|
+
s(this, "addedSources", {});
|
|
53
|
+
s(this, "addedLayers", []);
|
|
54
|
+
s(this, "layerDialog");
|
|
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
|
});
|
|
58
58
|
}
|
|
59
59
|
onAdd(e) {
|
|
60
|
-
this.map = e, this.map.
|
|
60
|
+
this.map = e, this.currentInitStyle = this.map.getStyle(), this.currentInitStyle || this.map.once("style.load", () => {
|
|
61
61
|
this.map && (this.currentInitStyle = this.map.getStyle());
|
|
62
62
|
});
|
|
63
63
|
const t = this.createButton();
|
|
@@ -72,41 +72,41 @@ 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
|
+
(l) => !t.some((o) => o.id === l.id)
|
|
87
87
|
);
|
|
88
|
-
this.addedLayers = [...this.addedLayers, ...
|
|
89
|
-
const
|
|
90
|
-
(
|
|
88
|
+
this.addedLayers = [...this.addedLayers, ...r];
|
|
89
|
+
const a = t.filter(
|
|
90
|
+
(l) => !i.some((o) => o.id === l.id)
|
|
91
91
|
);
|
|
92
92
|
this.addedLayers = this.addedLayers.filter(
|
|
93
|
-
(
|
|
93
|
+
(l) => !a.some((o) => o.id === l.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(([l, o]) => {
|
|
97
|
+
Object.keys(d).includes(l) || (h[l] = o);
|
|
98
98
|
}), this.addedSources = { ...this.addedSources, ...h }, Object.keys(d).filter(
|
|
99
|
-
(
|
|
100
|
-
).forEach((
|
|
101
|
-
delete this.addedSources[
|
|
99
|
+
(l) => !Object.keys(n).includes(l)
|
|
100
|
+
).forEach((l) => {
|
|
101
|
+
delete this.addedSources[l];
|
|
102
102
|
}), this.map.setStyle(e.style, {
|
|
103
|
-
transformStyle: (
|
|
104
|
-
const
|
|
103
|
+
transformStyle: (l, o) => {
|
|
104
|
+
const p = {
|
|
105
105
|
...o,
|
|
106
106
|
sources: { ...o.sources, ...this.addedSources },
|
|
107
107
|
layers: o.layers.concat(this.addedLayers)
|
|
108
108
|
};
|
|
109
|
-
return this.currentInitStyle =
|
|
109
|
+
return this.currentInitStyle = p, p;
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
112
|
}
|
|
@@ -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",l=>{l.stopPropagation()}),this.dialog.appendChild(i),this.options.layers.forEach(l=>{const n=document.createElement("div");n.classList.add("maplibregl-ctrl-layer-dialog-item");const u=document.createElement("label");n.appendChild(u);const c=document.createElement("input");c.setAttribute("type","radio"),c.setAttribute("name","layer"),t.name===l.name&&c.setAttribute("checked","checked"),c.addEventListener("change",()=>{var y;(y=this.layerChangeCallback)==null||y.call(this,l)}),u.appendChild(c);const p=document.createElement("span");p.textContent=l.name,u.appendChild(p),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 l="",n="";t==="top-right"?(l=`${i.y}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="top-left"?(l=`${i.y}px`,n=`${i.x+i.width+12}px`):t==="bottom-right"?(l=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="bottom-left"&&(l=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x+i.width+12}px`),this.dialog.style.setProperty("top",l),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.find(t=>t.checked)||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.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,l=i.filter(s=>!t.some(d=>d.id===s.id));this.addedLayers=[...this.addedLayers,...l];const n=t.filter(s=>!i.some(d=>d.id===s.id));this.addedLayers=this.addedLayers.filter(s=>!n.some(d=>d.id===s.id));const u=this.currentInitStyle.sources,c=this.map.getStyle().sources,p={};Object.entries(c).forEach(([s,d])=>{Object.keys(u).includes(s)||(p[s]=d)}),this.addedSources={...this.addedSources,...p},Object.keys(u).filter(s=>!Object.keys(c).includes(s)).forEach(s=>{delete this.addedSources[s]}),this.map.setStyle(e.style,{transformStyle:(s,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
|