leaflet-html 0.2.0 → 0.2.1

package/src/l-control-layers.js

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

package/src/l-geojson.js

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

@@ -1,41 +1,43 @@
-import { mapAddTo } from "./events.js"
+import { mapAddTo } from "./events.js";
 
 class LImageOverlay extends HTMLElement {
-  static observedAttributes = ["url", "bounds", "opacity"]
+  static observedAttributes = ["url", "bounds", "opacity"];
 
   constructor() {
-    super()
-    this.layer = null
+    super();
+    this.layer = null;
   }
 
   connectedCallback() {
-    const url = this.getAttribute("url")
-    const bounds = JSON.parse(this.getAttribute("bounds"))
+    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
-      }
-    }))
+      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)
+        this.layer.setUrl(newValue);
       } else if (name === "bounds") {
-        this.layer.setBounds(JSON.parse(newValue))
+        this.layer.setBounds(JSON.parse(newValue));
       } else if (name === "opacity") {
-        this.layer.setOpacity(parseFloat(newValue))
+        this.layer.setOpacity(parseFloat(newValue));
       }
     }
   }
 }
 
-export default LImageOverlay
+export default LImageOverlay;

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

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

package/src/l-layer-group.js

@@ -1,29 +1,29 @@
-import { mapAddTo } from "./events.js"
+import { mapAddTo } from "./events.js";
 
 class LLayerGroup extends HTMLElement {
   constructor() {
-    super()
+    super();
   }
-  
+
   connectedCallback() {
-    const name = this.getAttribute("name")
-    const group = L.layerGroup()
+    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)
+        name,
+      },
+    });
+    this.dispatchEvent(event);
 
     this.addEventListener(mapAddTo, (ev) => {
-      ev.stopPropagation()
-      group.addLayer(ev.detail.layer)
-    })
+      ev.stopPropagation();
+      group.addLayer(ev.detail.layer);
+    });
 
-    const observer = new MutationObserver(function(mutations) {
+    const observer = new MutationObserver(function (mutations) {
       mutations.forEach((mutation) => {
         mutation.removedNodes.forEach((node) => {
           const leafletId = node.getAttribute("leaflet-id");
@@ -32,8 +32,8 @@ class LLayerGroup extends HTMLElement {
         });
       });
     });
-    observer.observe(this, { childList: true })
+    observer.observe(this, { childList: true });
   }
 }
 
-export default LLayerGroup
+export default LLayerGroup;

package/src/l-map.js

@@ -1,33 +1,33 @@
 // @ts-check
-import { layerRemove, mapAddTo } from "./events.js"
+import { layerRemove, mapAddTo } from "./events.js";
 
 class LMap extends HTMLElement {
   constructor() {
-    super()
+    super();
 
-    this.map = null
+    this.map = null;
     this.addEventListener("map:bounds", (ev) => {
-      const { bounds, method } = ev.detail
-      this.map[method](bounds)
-    })
+      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.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)
-    })
+      const layer = ev.detail.layer;
+      layer.addTo(this.map);
+    });
 
     this.addEventListener(layerRemove, (ev) => {
-      this.map.remove(ev.detail.layer)
-    })
+      this.map.remove(ev.detail.layer);
+    });
   }
 }
 
-export default LMap
+export default LMap;

package/src/l-marker.js

@@ -1,45 +1,94 @@
-import { mapAddTo, popupAdd } from "./events.js"; 
+// @vitest-environment happy-dom
+import * as L from "leaflet";
+import { mapAddTo, popupAdd } from "./events.js";
 
 class LMarker extends HTMLElement {
-  static observedAttributes = ["lat-lng", "opacity"]
+  static observedAttributes = ["lat-lng", "opacity", "icon"];
 
   constructor() {
-    super()
-    this.layer = null
+    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")
+    const latLng = JSON.parse(this.getAttribute("lat-lng"));
+    const opacity = parseFloat(this.getAttribute("opacity") || "1.0");
     this.layer = L.marker(latLng, { opacity });
-    this.setAttribute("leaflet-id", L.stamp(this.layer))
+    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 { content } = ev.detail;
+      this.layer.bindPopup(content);
+    });
+
     const event = new CustomEvent(mapAddTo, {
       cancelable: true,
       bubbles: true,
       detail: {
-        layer: this.layer
-      }
-    })
-    this.dispatchEvent(event)
+        layer: this.layer,
+      },
+    });
+    this.dispatchEvent(event);
   }
 
   attributeChangedCallback(name, _oldValue, newValue) {
     if (this.layer !== null) {
       if (name === "lat-lng") {
-        this.layer.setLatLng(JSON.parse(newValue))
+        this.layer.setLatLng(JSON.parse(newValue));
       }
       if (name === "opacity") {
-        this.layer.setOpacity(parseFloat(newValue))
+        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
+export default LMarker;

package/src/l-overlay-layers.js

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

package/src/l-popup.js

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

package/src/l-tile-layer.js

@@ -1,19 +1,22 @@
-import { mapAddTo } from "./events.js"
+import { mapAddTo } from "./events.js";
 
 class LTileLayer extends HTMLElement {
   constructor() {
-    super()
+    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)
+    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
+export default LTileLayer;

package/src/l-video-overlay.js

@@ -1,30 +1,31 @@
-import { mapAddTo } from "./events.js"
+import { mapAddTo } from "./events.js";
 
 class LVideoOverlay extends HTMLElement {
   constructor() {
-    super()
+    super();
   }
 
   connectedCallback() {
-    const url = JSON.parse(this.getAttribute("url"))
-    const bounds = JSON.parse(this.getAttribute("bounds"))
+    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
-      }
-    }))
+      playsInline: true,
+    };
+    const layer = L.videoOverlay(url, bounds, options);
+    this.dispatchEvent(
+      new CustomEvent(mapAddTo, {
+        cancelable: true,
+        bubbles: true,
+        detail: {
+          layer,
+        },
+      }),
+    );
   }
 }
 
-export default LVideoOverlay
-
+export default LVideoOverlay;

package/vite.config.js

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