leaflet-html 0.1.7 → 0.2.1

package/src/l-base-layers.js

@@ -0,0 +1,15 @@
+import { mapAddTo } from "./events.js";
+
+class LBaseLayers extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.addEventListener(mapAddTo, (ev) => {
+      ev.detail["type"] = "base";
+    });
+  }
+}
+
+export default LBaseLayers;

package/src/l-control-layers.js

@@ -0,0 +1,34 @@
+import { mapAddTo } from "./events.js";
+
+class LControlLayers extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const base = {};
+    const overlay = {};
+    const control = L.control.layers(base, overlay);
+
+    this.addEventListener(mapAddTo, (ev) => {
+      const { type, name, layer } = ev.detail;
+      if (type === "overlay") {
+        control.addOverlay(layer, name);
+      } else if (type === "base") {
+        control.addBaseLayer(layer, name);
+      }
+      ev.preventDefault();
+    });
+
+    const event = new CustomEvent(mapAddTo, {
+      cancelable: true,
+      bubbles: true,
+      detail: {
+        layer: control,
+      },
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+export default LControlLayers;

package/src/l-geojson.js

@@ -0,0 +1,22 @@
+import { mapAddTo } from "./events.js";
+
+class LGeoJSON extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const layer = L.geoJSON(JSON.parse(this.getAttribute("geojson")));
+    this.dispatchEvent(
+      new CustomEvent(mapAddTo, {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          layer,
+        },
+      }),
+    );
+  }
+}
+
+export default LGeoJSON;

package/src/l-icon.js

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import * as L from "leaflet";
+
+const camelCase = (kebab) => kebab.replace(/-./g, (x) => x[1].toUpperCase());
+
+class LIcon extends HTMLElement {
+  constructor() {
+    super();
+    this.icon = null;
+  }
+
+  connectedCallback() {
+    const options = {};
+
+    // Strings
+    let keys = [
+      "icon-url",
+      "icon-retina-url",
+      "shadow-url",
+      "shadow-retina-url",
+      "class-name",
+    ];
+    keys.forEach((key) => {
+      if (this.hasAttribute(key)) {
+        options[camelCase(key)] = this.getAttribute(key);
+      }
+    });
+
+    // Points
+    let points = [
+      "icon-anchor",
+      "icon-size",
+      "shadow-anchor",
+      "shadow-size",
+      "tooltip-anchor",
+      "popup-anchor",
+    ];
+    points.forEach((key) => {
+      if (this.hasAttribute(key)) {
+        options[camelCase(key)] = JSON.parse(this.getAttribute(key));
+      }
+    });
+
+    if (this.hasAttribute("cross-origin")) {
+      options.crossOrigin = this.getAttribute("cross-origin") === "true";
+    }
+    this.icon = L.icon(options);
+
+    const event = new CustomEvent("icon:add", {
+      cancelable: true,
+      bubbles: true,
+      detail: {
+        icon: this.icon,
+      },
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+if (import.meta.vitest) {
+  const { it, expect, beforeAll } = import.meta.vitest;
+
+  beforeAll(() => {
+    customElements.define("l-icon", LIcon);
+  });
+
+  it("default", () => {
+    const el = document.createElement("l-icon");
+    document.body.appendChild(el);
+
+    let actual = el.icon;
+    let expected = L.icon();
+    expect(actual).toEqual(expected);
+  });
+
+  it("emits icon:add event", async () => {
+    const el = document.createElement("l-icon");
+    let promise = new Promise((resolve) => {
+      el.addEventListener("icon:add", (ev) => {
+        resolve(ev.detail.icon);
+      });
+    });
+    document.body.appendChild(el);
+    let actual = await promise;
+    let expected = L.icon();
+    expect(actual).toEqual(expected);
+  });
+
+  it("options", () => {
+    const el = document.createElement("l-icon");
+    el.setAttribute("icon-url", "url.png");
+    el.setAttribute("icon-retina-url", "retina.png");
+    el.setAttribute("icon-size", "[0, 0]");
+    el.setAttribute("icon-anchor", "[0, 0]");
+    el.setAttribute("popup-anchor", "[0, 0]");
+    el.setAttribute("tooltip-anchor", "[0, 0]");
+    el.setAttribute("shadow-url", "urlShadow.png");
+    el.setAttribute("shadow-retina-url", "retinaShadow.png");
+    el.setAttribute("shadow-size", "[0, 0]");
+    el.setAttribute("shadow-anchor", "[0, 0]");
+    el.setAttribute("class-name", "foo");
+    el.setAttribute("cross-origin", "true");
+    document.body.appendChild(el);
+
+    let actual = el.icon;
+    let expected = L.icon({
+      iconUrl: "url.png",
+      iconRetinaUrl: "retina.png",
+      iconSize: [0, 0],
+      iconAnchor: [0, 0],
+      popupAnchor: [0, 0],
+      tooltipAnchor: [0, 0],
+      shadowUrl: "urlShadow.png",
+      shadowRetinaUrl: "retinaShadow.png",
+      shadowSize: [0, 0],
+      shadowAnchor: [0, 0],
+      className: "foo",
+      crossOrigin: true,
+    });
+    expect(actual).toEqual(expected);
+  });
+}
+
+export default LIcon;

package/src/l-image-overlay.js

@@ -0,0 +1,43 @@
+import { mapAddTo } from "./events.js";
+
+class LImageOverlay extends HTMLElement {
+  static observedAttributes = ["url", "bounds", "opacity"];
+
+  constructor() {
+    super();
+    this.layer = null;
+  }
+
+  connectedCallback() {
+    const url = this.getAttribute("url");
+    const bounds = JSON.parse(this.getAttribute("bounds"));
+    const options = {
+      opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
+      alt: this.getAttribute("alt") || "",
+    };
+    this.layer = L.imageOverlay(url, bounds, options);
+    this.dispatchEvent(
+      new CustomEvent(mapAddTo, {
+        cancelable: true,
+        bubbles: true,
+        detail: {
+          layer: this.layer,
+        },
+      }),
+    );
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (this.layer !== null) {
+      if (name === "url") {
+        this.layer.setUrl(newValue);
+      } else if (name === "bounds") {
+        this.layer.setBounds(JSON.parse(newValue));
+      } else if (name === "opacity") {
+        this.layer.setOpacity(parseFloat(newValue));
+      }
+    }
+  }
+}
+
+export default LImageOverlay;

package/src/l-lat-lng-bounds.js

@@ -0,0 +1,20 @@
+class LLatLngBounds extends HTMLElement {
+  static observedAttributes = ["bounds"];
+
+  constructor() {
+    super();
+  }
+
+  attributeChangedCallback(_name, _oldValue, newValue) {
+    const event = new CustomEvent("map:bounds", {
+      bubbles: true,
+      detail: {
+        bounds: JSON.parse(newValue),
+        method: this.getAttribute("method") || "fitBounds",
+      },
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+export default LLatLngBounds;

package/src/l-layer-group.js

@@ -0,0 +1,39 @@
+import { mapAddTo } from "./events.js";
+
+class LLayerGroup extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const name = this.getAttribute("name");
+    const group = L.layerGroup();
+    const event = new CustomEvent(mapAddTo, {
+      cancelable: true,
+      bubbles: true,
+      detail: {
+        layer: group,
+        name,
+      },
+    });
+    this.dispatchEvent(event);
+
+    this.addEventListener(mapAddTo, (ev) => {
+      ev.stopPropagation();
+      group.addLayer(ev.detail.layer);
+    });
+
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach((mutation) => {
+        mutation.removedNodes.forEach((node) => {
+          const leafletId = node.getAttribute("leaflet-id");
+          const layer = group.getLayer(leafletId);
+          group.removeLayer(layer);
+        });
+      });
+    });
+    observer.observe(this, { childList: true });
+  }
+}
+
+export default LLayerGroup;

package/src/l-map.js

@@ -0,0 +1,33 @@
+// @ts-check
+import { layerRemove, mapAddTo } from "./events.js";
+
+class LMap extends HTMLElement {
+  constructor() {
+    super();
+
+    this.map = null;
+    this.addEventListener("map:bounds", (ev) => {
+      const { bounds, method } = ev.detail;
+      this.map[method](bounds);
+    });
+  }
+
+  connectedCallback() {
+    this.map = L.map(this);
+    const center = this.getAttribute("center");
+    const zoom = this.getAttribute("zoom");
+    if (center !== null && zoom !== null) {
+      this.map.setView(JSON.parse(center), parseInt(zoom));
+    }
+    this.addEventListener(mapAddTo, (ev) => {
+      const layer = ev.detail.layer;
+      layer.addTo(this.map);
+    });
+
+    this.addEventListener(layerRemove, (ev) => {
+      this.map.remove(ev.detail.layer);
+    });
+  }
+}
+
+export default LMap;

package/src/l-marker.js

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import * as L from "leaflet";
+import { mapAddTo, popupAdd } from "./events.js";
+
+class LMarker extends HTMLElement {
+  static observedAttributes = ["lat-lng", "opacity", "icon"];
+
+  constructor() {
+    super();
+    this.layer = null;
+    this.addEventListener("icon:add", (ev) => {
+      ev.stopPropagation();
+      this.layer.setIcon(ev.detail.icon);
+    })
+  }
+
+  connectedCallback() {
+    const latLng = JSON.parse(this.getAttribute("lat-lng"));
+    const opacity = parseFloat(this.getAttribute("opacity") || "1.0");
+    this.layer = L.marker(latLng, { opacity });
+    if (this.hasAttribute("icon")) {
+      const icon = L.icon(JSON.parse(this.getAttribute("icon")));
+      this.layer.setIcon(icon);
+    }
+
+    this.setAttribute("leaflet-id", L.stamp(this.layer));
+
+    this.addEventListener(popupAdd, (ev) => {
+      const { content } = ev.detail;
+      this.layer.bindPopup(content);
+    });
+
+    const event = new CustomEvent(mapAddTo, {
+      cancelable: true,
+      bubbles: true,
+      detail: {
+        layer: this.layer,
+      },
+    });
+    this.dispatchEvent(event);
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (this.layer !== null) {
+      if (name === "lat-lng") {
+        this.layer.setLatLng(JSON.parse(newValue));
+      }
+      if (name === "opacity") {
+        this.layer.setOpacity(parseFloat(newValue));
+      }
+      if (name === "icon") {
+        this.layer.setIcon(L.icon(JSON.parse(newValue)));
+      }
+    }
+  }
+}
+
+if (import.meta.vitest) {
+  const { it, expect, beforeAll } = import.meta.vitest;
+
+  beforeAll(() => {
+    customElements.define("l-marker", LMarker);
+  });
+
+  it("default icon", () => {
+    const el = document.createElement("l-marker");
+    document.body.appendChild(el);
+    let actual = el.layer.getIcon();
+    let expected = new L.Icon.Default();
+    expect(actual).toEqual(expected);
+  });
+
+  it("adds an icon", () => {
+    const el = document.createElement("l-marker");
+    // Set attribute before appendChild
+    el.setAttribute("icon", JSON.stringify({ iconUrl: "foo.png" }));
+    document.body.appendChild(el);
+    let actual = el.layer.getIcon();
+    let expected = L.icon({ iconUrl: "foo.png" });
+    expect(actual).toEqual(expected);
+  });
+
+  it("changes an icon", () => {
+    const el = document.createElement("l-marker");
+    // Set attribute after appendChild
+    document.body.appendChild(el);
+    el.setAttribute("icon", JSON.stringify({ iconUrl: "bar.png" }));
+    let actual = el.layer.getIcon();
+    let expected = L.icon({ iconUrl: "bar.png" });
+    expect(actual).toEqual(expected);
+  });
+}
+
+export default LMarker;

package/src/l-overlay-layers.js

@@ -0,0 +1,15 @@
+import { mapAddTo } from "./events.js";
+
+class LOverlayLayers extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.addEventListener(mapAddTo, (ev) => {
+      ev.detail["type"] = "overlay";
+    });
+  }
+}
+
+export default LOverlayLayers;

package/src/l-popup.js

@@ -0,0 +1,21 @@
+import { popupAdd } from "./events.js";
+
+class LPopup extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const content = this.getAttribute("content");
+    const event = new CustomEvent(popupAdd, {
+      cancelable: true,
+      bubbles: true,
+      detail: {
+        content,
+      },
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+export default LPopup;

package/src/l-tile-layer.js

@@ -0,0 +1,22 @@
+import { mapAddTo } from "./events.js";
+
+class LTileLayer extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const name = this.getAttribute("name");
+    const urlTemplate = this.getAttribute("url-template");
+    const attribution = this.getAttribute("attribution");
+    const options = { attribution };
+    const layer = L.tileLayer(urlTemplate, options);
+    const event = new CustomEvent(mapAddTo, {
+      detail: { name, layer },
+      bubbles: true,
+    });
+    this.dispatchEvent(event);
+  }
+}
+
+export default LTileLayer;

package/src/l-video-overlay.js

@@ -0,0 +1,31 @@
+import { mapAddTo } from "./events.js";
+
+class LVideoOverlay extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const url = JSON.parse(this.getAttribute("url"));
+    const bounds = JSON.parse(this.getAttribute("bounds"));
+    const options = {
+      opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
+      alt: this.getAttribute("alt") || "",
+      autoplay: true,
+      muted: true,
+      playsInline: true,
+    };
+    const layer = L.videoOverlay(url, bounds, options);
+    this.dispatchEvent(
+      new CustomEvent(mapAddTo, {
+        cancelable: true,
+        bubbles: true,
+        detail: {
+          layer,
+        },
+      }),
+    );
+  }
+}
+
+export default LVideoOverlay;

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  test: {
+    includeSource: ["src/**/*.{js,ts}"],
+  },
+});