leaflet-html 0.1.6 → 0.2.0

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,45 @@
+import { mapAddTo, popupAdd } from "./events.js"; 
+
+class LMarker extends HTMLElement {
+  static observedAttributes = ["lat-lng", "opacity"]
+
+  constructor() {
+    super()
+    this.layer = null
+  }
+
+  connectedCallback() {
+    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))
+
+    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))
+      }
+    }
+  }
+}
+
+
+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,23 @@
+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,19 @@
+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,30 @@
+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
+