leaflet-html 0.3.4 → 0.3.6
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +5 -1
- package/.github/workflows/master.yml +0 -15
- package/.github/workflows/npm-publish.yml +0 -37
- package/.prettierignore +0 -2
- package/.prettierrc +0 -1
- package/docs/config.toml +0 -16
- package/docs/content/_index.md +0 -89
- package/docs/content/articles/_index.md +0 -5
- package/docs/content/articles/basic.md +0 -110
- package/docs/content/articles/htmx.md +0 -84
- package/docs/content/articles/icons.md +0 -47
- package/docs/content/articles/style.md +0 -14
- package/docs/public/icons/leaf-green.png +0 -0
- package/docs/public/icons/leaf-orange.png +0 -0
- package/docs/public/icons/leaf-red.png +0 -0
- package/docs/public/icons/leaf-shadow.png +0 -0
- package/docs/static/htmx/clicked.html +0 -1
- package/docs/static/htmx/marker.html +0 -3
- package/docs/static/htmx/tile-esri.html +0 -3
- package/docs/static/htmx/tile-osm.html +0 -4
- package/docs/static/htmx/tile-voyager.html +0 -4
- package/docs/static/icons/leaf-green.png +0 -0
- package/docs/static/icons/leaf-orange.png +0 -0
- package/docs/static/icons/leaf-red.png +0 -0
- package/docs/static/icons/leaf-shadow.png +0 -0
- package/docs/static/style.css +0 -48
- package/docs/templates/article-page.html +0 -8
- package/docs/templates/article.html +0 -12
- package/docs/templates/base.html +0 -43
- package/docs/templates/index.html +0 -6
- package/docs/templates/shortcodes/url.html +0 -1
- package/example/geojson/index.html +0 -44
- package/example/index.html +0 -113
- package/example/overlays/index.html +0 -78
- package/src/events.js +0 -3
- package/src/index.js +0 -33
- package/src/l-base-layers.js +0 -16
- package/src/l-control-layers.js +0 -39
- package/src/l-geojson.js +0 -27
- package/src/l-icon.js +0 -124
- package/src/l-image-overlay.js +0 -54
- package/src/l-lat-lng-bounds.js +0 -21
- package/src/l-layer-group.js +0 -51
- package/src/l-layer.js +0 -8
- package/src/l-map.js +0 -56
- package/src/l-marker.js +0 -95
- package/src/l-overlay-layers.js +0 -16
- package/src/l-popup.js +0 -22
- package/src/l-tile-layer.js +0 -32
- package/src/l-video-overlay.js +0 -34
- package/vite.config.js +0 -7
package/src/l-marker.js
DELETED
@@ -1,95 +0,0 @@
|
|
1
|
-
// @vitest-environment happy-dom
|
2
|
-
import * as L from "leaflet";
|
3
|
-
import { mapAddTo, popupAdd } from "./events.js";
|
4
|
-
import LLayer from "./l-layer.js";
|
5
|
-
|
6
|
-
class LMarker extends LLayer {
|
7
|
-
static observedAttributes = ["lat-lng", "opacity", "icon"];
|
8
|
-
|
9
|
-
constructor() {
|
10
|
-
super();
|
11
|
-
this.layer = null;
|
12
|
-
this.addEventListener("icon:add", (ev) => {
|
13
|
-
ev.stopPropagation();
|
14
|
-
this.layer.setIcon(ev.detail.icon);
|
15
|
-
});
|
16
|
-
}
|
17
|
-
|
18
|
-
connectedCallback() {
|
19
|
-
const latLng = JSON.parse(this.getAttribute("lat-lng"));
|
20
|
-
const opacity = parseFloat(this.getAttribute("opacity") || "1.0");
|
21
|
-
this.layer = L.marker(latLng, { opacity });
|
22
|
-
if (this.hasAttribute("icon")) {
|
23
|
-
const icon = L.icon(JSON.parse(this.getAttribute("icon")));
|
24
|
-
this.layer.setIcon(icon);
|
25
|
-
}
|
26
|
-
|
27
|
-
this.setAttribute("leaflet-id", L.stamp(this.layer));
|
28
|
-
|
29
|
-
this.addEventListener(popupAdd, (ev) => {
|
30
|
-
const { content } = ev.detail;
|
31
|
-
this.layer.bindPopup(content);
|
32
|
-
});
|
33
|
-
|
34
|
-
const event = new CustomEvent(mapAddTo, {
|
35
|
-
cancelable: true,
|
36
|
-
bubbles: true,
|
37
|
-
detail: {
|
38
|
-
layer: this.layer,
|
39
|
-
},
|
40
|
-
});
|
41
|
-
this.dispatchEvent(event);
|
42
|
-
}
|
43
|
-
|
44
|
-
attributeChangedCallback(name, _oldValue, newValue) {
|
45
|
-
if (this.layer !== null) {
|
46
|
-
if (name === "lat-lng") {
|
47
|
-
this.layer.setLatLng(JSON.parse(newValue));
|
48
|
-
}
|
49
|
-
if (name === "opacity") {
|
50
|
-
this.layer.setOpacity(parseFloat(newValue));
|
51
|
-
}
|
52
|
-
if (name === "icon") {
|
53
|
-
this.layer.setIcon(L.icon(JSON.parse(newValue)));
|
54
|
-
}
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
if (import.meta.vitest) {
|
60
|
-
const { it, expect, beforeAll } = import.meta.vitest;
|
61
|
-
|
62
|
-
beforeAll(() => {
|
63
|
-
customElements.define("l-marker", LMarker);
|
64
|
-
});
|
65
|
-
|
66
|
-
it("default icon", () => {
|
67
|
-
const el = document.createElement("l-marker");
|
68
|
-
document.body.appendChild(el);
|
69
|
-
let actual = el.layer.getIcon();
|
70
|
-
let expected = new L.Icon.Default();
|
71
|
-
expect(actual).toEqual(expected);
|
72
|
-
});
|
73
|
-
|
74
|
-
it("adds an icon", () => {
|
75
|
-
const el = document.createElement("l-marker");
|
76
|
-
// Set attribute before appendChild
|
77
|
-
el.setAttribute("icon", JSON.stringify({ iconUrl: "foo.png" }));
|
78
|
-
document.body.appendChild(el);
|
79
|
-
let actual = el.layer.getIcon();
|
80
|
-
let expected = L.icon({ iconUrl: "foo.png" });
|
81
|
-
expect(actual).toEqual(expected);
|
82
|
-
});
|
83
|
-
|
84
|
-
it("changes an icon", () => {
|
85
|
-
const el = document.createElement("l-marker");
|
86
|
-
// Set attribute after appendChild
|
87
|
-
document.body.appendChild(el);
|
88
|
-
el.setAttribute("icon", JSON.stringify({ iconUrl: "bar.png" }));
|
89
|
-
let actual = el.layer.getIcon();
|
90
|
-
let expected = L.icon({ iconUrl: "bar.png" });
|
91
|
-
expect(actual).toEqual(expected);
|
92
|
-
});
|
93
|
-
}
|
94
|
-
|
95
|
-
export default LMarker;
|
package/src/l-overlay-layers.js
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
// @ts-check
|
2
|
-
import { mapAddTo } from "./events.js";
|
3
|
-
|
4
|
-
class LOverlayLayers extends HTMLElement {
|
5
|
-
constructor() {
|
6
|
-
super();
|
7
|
-
}
|
8
|
-
|
9
|
-
connectedCallback() {
|
10
|
-
this.addEventListener(mapAddTo, (ev) => {
|
11
|
-
ev.detail["type"] = "overlay";
|
12
|
-
});
|
13
|
-
}
|
14
|
-
}
|
15
|
-
|
16
|
-
export default LOverlayLayers;
|
package/src/l-popup.js
DELETED
@@ -1,22 +0,0 @@
|
|
1
|
-
// @ts-check
|
2
|
-
import { popupAdd } from "./events.js";
|
3
|
-
|
4
|
-
class LPopup extends HTMLElement {
|
5
|
-
constructor() {
|
6
|
-
super();
|
7
|
-
}
|
8
|
-
|
9
|
-
connectedCallback() {
|
10
|
-
const content = this.getAttribute("content");
|
11
|
-
const event = new CustomEvent(popupAdd, {
|
12
|
-
cancelable: true,
|
13
|
-
bubbles: true,
|
14
|
-
detail: {
|
15
|
-
content,
|
16
|
-
},
|
17
|
-
});
|
18
|
-
this.dispatchEvent(event);
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
export default LPopup;
|
package/src/l-tile-layer.js
DELETED
@@ -1,32 +0,0 @@
|
|
1
|
-
// @ts-check
|
2
|
-
import { tileLayer } from "leaflet";
|
3
|
-
import { mapAddTo } from "./events.js";
|
4
|
-
import LLayer from "./l-layer.js";
|
5
|
-
|
6
|
-
class LTileLayer extends LLayer {
|
7
|
-
constructor() {
|
8
|
-
super();
|
9
|
-
this.layer = null
|
10
|
-
}
|
11
|
-
|
12
|
-
connectedCallback() {
|
13
|
-
const name = this.getAttribute("name");
|
14
|
-
const urlTemplate = this.getAttribute("url-template");
|
15
|
-
if (urlTemplate === null) {
|
16
|
-
return;
|
17
|
-
}
|
18
|
-
const options = {};
|
19
|
-
const key = "attribution";
|
20
|
-
if (this.hasAttribute(key)) {
|
21
|
-
options[key] = this.getAttribute(key);
|
22
|
-
}
|
23
|
-
this.layer = tileLayer(urlTemplate, options);
|
24
|
-
const event = new CustomEvent(mapAddTo, {
|
25
|
-
detail: { name, layer: this.layer },
|
26
|
-
bubbles: true,
|
27
|
-
});
|
28
|
-
this.dispatchEvent(event);
|
29
|
-
}
|
30
|
-
}
|
31
|
-
|
32
|
-
export default LTileLayer;
|
package/src/l-video-overlay.js
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
// @ts-check
|
2
|
-
import { videoOverlay } from "leaflet";
|
3
|
-
import { mapAddTo } from "./events.js";
|
4
|
-
import LLayer from "./l-layer.js";
|
5
|
-
|
6
|
-
class LVideoOverlay extends LLayer {
|
7
|
-
constructor() {
|
8
|
-
super();
|
9
|
-
}
|
10
|
-
|
11
|
-
connectedCallback() {
|
12
|
-
const url = JSON.parse(this.getAttribute("url"));
|
13
|
-
const bounds = JSON.parse(this.getAttribute("bounds"));
|
14
|
-
const options = {
|
15
|
-
opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
|
16
|
-
alt: this.getAttribute("alt") || "",
|
17
|
-
autoplay: true,
|
18
|
-
muted: true,
|
19
|
-
playsInline: true,
|
20
|
-
};
|
21
|
-
const layer = videoOverlay(url, bounds, options);
|
22
|
-
this.dispatchEvent(
|
23
|
-
new CustomEvent(mapAddTo, {
|
24
|
-
cancelable: true,
|
25
|
-
bubbles: true,
|
26
|
-
detail: {
|
27
|
-
layer,
|
28
|
-
},
|
29
|
-
}),
|
30
|
-
);
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
export default LVideoOverlay;
|