leaflet-html 0.1.7 → 0.2.0

package/src/index.js

@@ -1,191 +1,32 @@
 // @ts-check
+import LBaseLayers from "./l-base-layers.js";
+import LControlLayers from "./l-control-layers.js"; 
+import LLayerGroup from "./l-layer-group.js"; 
+import LMap from "./l-map.js"; 
+import LMarker from "./l-marker.js"; 
+import LOverlayLayers from "./l-overlay-layers.js";
+import LPopup from "./l-popup.js"; 
+import LTileLayer from "./l-tile-layer.js";
+import LLatLngBounds from "./l-lat-lng-bounds.js";
+import LImageOverlay from "./l-image-overlay.js";
+import LVideoOverlay from "./l-video-overlay.js";
+import LGeoJSON from "./l-geojson.js";
 
-// Helpers
-const selector = (noun) => `[data-${noun}]`;
-
-/**
- * Parse L.tileLayer args from element attributes
- */
-const parseTileLayer = (el) => {
-  const { urlTemplate } = el.dataset;
-  const {
-    attribution = null,
-    maxZoom = "18",
-    minZoom = "0",
-    subdomains = "abc",
-  } = el.dataset;
-  const options = { attribution, maxZoom, minZoom, subdomains };
-  return [urlTemplate, options];
-};
-
-/**
- * Parse L.imageOverlay args from element attributes
- */
-const parseImageOverlay = (el) => {
-  let { url, bounds } = el.dataset;
-  bounds = JSON.parse(bounds);
-  const { opacity } = el.dataset;
-  const options = { opacity: parseFloat(opacity) };
-  return [url, bounds, options];
-};
-
-/**
- * Parse L.imageOverlay args from element attributes
- */
-const parseVideoOverlay = (el) => {
-  let { url, bounds } = el.dataset;
-  url = JSON.parse(url);
-  bounds = JSON.parse(bounds);
-  const {
-    opacity,
-    errorOverlayUrl,
-    autoplay = true,
-    muted = true,
-    playsInline = true,
-  } = el.dataset;
-  const options = {
-    opacity: parseFloat(opacity),
-    errorOverlayUrl,
-    autoplay,
-    muted,
-    playsInline,
-  };
-  return [url, bounds, options];
-};
-
-/**
- * @param {HTMLElement} el
- */
-const parseLatLngBounds = (el) => {
-  let { bounds } = el.dataset;
-  if (typeof bounds === "undefined") {
-    throw Error("data-bounds not specified")
-  }
-  return [JSON.parse(bounds)];
-}
-
-const render = () => {
-  // Render Leaflet API calls
-  document.querySelectorAll(selector("leaflet-html")).forEach((el) => {
-    const { center, zoom } = el.dataset;
-    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));
-
-    // L.latLngBounds
-    el.querySelectorAll(selector("lat-lng-bounds")).forEach((el) => {
-      const bounds = L.latLngBounds(...parseLatLngBounds(el))
-      // TODO: encapsulate this design pattern
-      const observer = new MutationObserver(function (mutations) {
-        mutations.forEach((mutation) => {
-          let [bounds] = parseLatLngBounds(mutation.target)
-          map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds
-        });
-      });
-      observer.observe(el, {
-        attributes: true,
-        attributeFilter: ["data-bounds"],
-      });
-      map.fitBounds(bounds)
-    })
-
-    // L.tileLayers
-    el.querySelectorAll(selector("tile-layer")).forEach((el) => {
-      L.tileLayer(...parseTileLayer(el)).addTo(map);
-    });
-
-    el.querySelectorAll(selector("image-overlay")).forEach((el) => {
-      L.imageOverlay(...parseImageOverlay(el)).addTo(map);
-    });
-
-    el.querySelectorAll(selector("video-overlay")).forEach((el) => {
-      L.videoOverlay(...parseVideoOverlay(el)).addTo(map);
-    });
-
-    // L.control.layers
-    el.querySelectorAll(selector("control-layers")).forEach((el) => {
-      const baseMaps = {};
-
-      // L.tileLayers
-      el.querySelectorAll(selector("tile-layer")).forEach((el) => {
-        const { name, show } = el.dataset;
-        baseMaps[name] = L.tileLayer(...parseTileLayer(el));
-        if (show != null) {
-          baseMaps[name].addTo(map);
-        }
-      });
-
-      const overlayMaps = {};
-      // L.layerGroup
-      el.querySelectorAll(selector("layer-group")).forEach((el) => {
-        const { name } = el.dataset;
-        const layers = [];
-
-        const observer = new MutationObserver(function (mutations) {
-          const group = overlayMaps[name];
-
-          mutations.forEach((mutation) => {
-            mutation.addedNodes.forEach((node) => {
-              const { latLng } = node.dataset; // MutationObserver needed
-              const layer = L.marker(JSON.parse(latLng));
-              group.addLayer(layer);
-              map.addLayer(layer);
-            });
-
-            mutation.removedNodes.forEach((node) => {
-              const { _leafletId } = node.dataset;
-              const layer = group.getLayer(_leafletId);
-              group.removeLayer(layer);
-
-              map.removeLayer(layer);
-            });
-          });
-        });
-        observer.observe(el, { childList: true });
-
-        // L.marker
-        el.querySelectorAll(selector("marker")).forEach((el) => {
-          const { latLng } = el.dataset;
-          const { opacity = "1.0" } = el.dataset;
-          const options = { opacity: parseFloat(opacity) };
-          const marker = L.marker(JSON.parse(latLng), options).addTo(map);
-          el.dataset._leafletId = L.stamp(marker); // Save ID for later
-
-          const observer = new MutationObserver(function (mutations) {
-            mutations.forEach((mutation) => {
-              const { latLng } = mutation.target.dataset;
-              marker.setLatLng(JSON.parse(latLng));
-            });
-          });
-          observer.observe(el, {
-            attributes: true,
-            attributeFilter: ["data-lat-lng"],
-          });
-
-          // marker.bindPopup
-          el.querySelectorAll(selector("popup")).forEach((el) => {
-            const { content } = el.dataset;
-            marker.bindPopup(content);
-            const observer = new MutationObserver(function () {
-              marker.getPopup().setContent(el.dataset.content);
-            });
-            observer.observe(el, {
-              attributes: true,
-              attributeFilter: ["data-content"],
-            });
-          });
-
-          layers.push(marker);
-        });
-
-        overlayMaps[name] = L.layerGroup(layers);
-      });
-
-      L.control.layers(baseMaps, overlayMaps).addTo(map);
-    });
-  });
-};
 
 const init = (() => {
-  document.addEventListener("DOMContentLoaded", render);
+  // Custom elements (order of definition is important)
+  customElements.define("l-map", LMap)
+  customElements.define("l-control-layers", LControlLayers)
+  customElements.define("l-base-layers", LBaseLayers)
+  customElements.define("l-overlay-layers", LOverlayLayers)
+  customElements.define("l-layer-group", LLayerGroup)
+  customElements.define("l-tile-layer", LTileLayer)
+  customElements.define("l-marker", LMarker)
+  customElements.define("l-popup", LPopup)
+  customElements.define("l-lat-lng-bounds", LLatLngBounds)
+  customElements.define("l-image-overlay", LImageOverlay)
+  customElements.define("l-video-overlay", LVideoOverlay)
+  customElements.define("l-geojson", LGeoJSON)
 })();
 
 export default init;

package/src/l-base-layers.js

@@ -0,0 +1,16 @@
+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,20 @@
+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-image-overlay.js

@@ -0,0 +1,41 @@
+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,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
+