leaflet-html 0.2.2 → 0.3.1

package/example/geojson/index.html

@@ -10,15 +10,10 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
-    <script
-      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-      crossorigin=""
-    ></script>
     <script type="importmap">
       {
         "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
         }
       }
     </script>

package/example/index.html

@@ -9,15 +9,10 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
-    <script
-      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-      crossorigin=""
-    ></script>
     <script type="importmap">
       {
         "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
         }
       }
     </script>

package/example/overlays/index.html

@@ -10,15 +10,10 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
-    <script
-      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-      crossorigin=""
-    ></script>
     <script type="importmap">
       {
         "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
         }
       }
     </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "leaflet-html",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Leaflet expressed in HTML",
   "source": "src/index.js",
   "main": "./dist/leaflet-html.cjs",

package/src/l-base-layers.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { mapAddTo } from "./events.js";
 
 class LBaseLayers extends HTMLElement {

package/src/l-control-layers.js

@@ -1,3 +1,6 @@
+// @ts-check
+/** @typedef {import("leaflet").Layer} Layer */
+import { control } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LControlLayers extends HTMLElement {
@@ -6,16 +9,18 @@ class LControlLayers extends HTMLElement {
   }
 
   connectedCallback() {
+    /** @type {{ [key: string]: Layer }} */
     const base = {};
+    /** @type {{ [key: string]: Layer }} */
     const overlay = {};
-    const control = L.control.layers(base, overlay);
+    const controlLayers = control.layers(base, overlay);
 
     this.addEventListener(mapAddTo, (ev) => {
       const { type, name, layer } = ev.detail;
       if (type === "overlay") {
-        control.addOverlay(layer, name);
+        controlLayers.addOverlay(layer, name);
       } else if (type === "base") {
-        control.addBaseLayer(layer, name);
+        controlLayers.addBaseLayer(layer, name);
       }
       ev.preventDefault();
     });
@@ -24,7 +29,7 @@ class LControlLayers extends HTMLElement {
       cancelable: true,
       bubbles: true,
       detail: {
-        layer: control,
+        layer: controlLayers,
       },
     });
     this.dispatchEvent(event);

package/src/l-geojson.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { geoJSON } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LGeoJSON extends HTMLElement {
@@ -6,16 +8,19 @@ class LGeoJSON extends HTMLElement {
   }
 
   connectedCallback() {
-    const layer = L.geoJSON(JSON.parse(this.getAttribute("geojson")));
-    this.dispatchEvent(
-      new CustomEvent(mapAddTo, {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          layer,
-        },
-      }),
-    );
+    const value = this.getAttribute("geojson");
+    if (value !== null) {
+      const layer = geoJSON(JSON.parse(value));
+      this.dispatchEvent(
+        new CustomEvent(mapAddTo, {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            layer,
+          },
+        }),
+      );
+    }
   }
 }
 

package/src/l-image-overlay.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { imageOverlay } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LImageOverlay extends HTMLElement {
@@ -10,12 +12,20 @@ class LImageOverlay extends HTMLElement {
 
   connectedCallback() {
     const url = this.getAttribute("url");
-    const bounds = JSON.parse(this.getAttribute("bounds"));
+    if (url === null) {
+      console.warn("attribute 'url' not set");
+      return;
+    }
+    let bounds = this.getAttribute("bounds");
+    if (bounds === null) {
+      console.warn("attribute 'bounds' not set");
+      return;
+    }
     const options = {
       opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
       alt: this.getAttribute("alt") || "",
     };
-    this.layer = L.imageOverlay(url, bounds, options);
+    this.layer = imageOverlay(url, JSON.parse(bounds), options);
     this.dispatchEvent(
       new CustomEvent(mapAddTo, {
         cancelable: true,

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

@@ -1,3 +1,4 @@
+// @ts-check
 class LLatLngBounds extends HTMLElement {
   static observedAttributes = ["bounds"];
 

package/src/l-layer-group.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { layerGroup } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LLayerGroup extends HTMLElement {
@@ -7,7 +9,7 @@ class LLayerGroup extends HTMLElement {
 
   connectedCallback() {
     const name = this.getAttribute("name");
-    const group = L.layerGroup();
+    const group = layerGroup();
     const event = new CustomEvent(mapAddTo, {
       cancelable: true,
       bubbles: true,
@@ -26,9 +28,15 @@ class LLayerGroup extends HTMLElement {
     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);
+          if (node instanceof HTMLElement) {
+            const leafletId = node.getAttribute("leaflet-id");
+            if (leafletId !== null) {
+              const layer = group.getLayer(parseInt(leafletId));
+              if (typeof layer !== "undefined") {
+                group.removeLayer(layer);
+              }
+            }
+          }
         });
       });
     });

package/src/l-map.js

@@ -1,5 +1,7 @@
 // @ts-check
+import * as L from "leaflet";
 import { layerRemove, mapAddTo } from "./events.js";
+import LTileLayer from "./l-tile-layer.js";
 
 class LMap extends HTMLElement {
   constructor() {
@@ -8,8 +10,22 @@ class LMap extends HTMLElement {
     this.map = null;
     this.addEventListener("map:bounds", (ev) => {
       const { bounds, method } = ev.detail;
-      this.map[method](bounds);
+      if (this.map !== null) {
+        this.map[method](bounds);
+      }
     });
+
+    // Observe removed l-tile-layers
+    const observer = new MutationObserver(function(mutations) {
+      mutations.forEach((mutation) => {
+        mutation.removedNodes.forEach((node) => {
+          if (node instanceof LTileLayer) {
+            this.map.removeLayer(node.layer)
+          }
+        })
+      })
+    })
+    observer.observe(this, { childList: true })
   }
 
   connectedCallback() {
@@ -25,7 +41,9 @@ class LMap extends HTMLElement {
     });
 
     this.addEventListener(layerRemove, (ev) => {
-      this.map.remove(ev.detail.layer);
+      if (this.map !== null) {
+        this.map.removeLayer(ev.detail.layer);
+      }
     });
   }
 }

package/src/l-overlay-layers.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { mapAddTo } from "./events.js";
 
 class LOverlayLayers extends HTMLElement {

package/src/l-popup.js

@@ -1,3 +1,4 @@
+// @ts-check
 import { popupAdd } from "./events.js";
 
 class LPopup extends HTMLElement {

package/src/l-tile-layer.js

@@ -1,18 +1,27 @@
+// @ts-check
+import { tileLayer } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LTileLayer extends HTMLElement {
   constructor() {
     super();
+    this.layer = null
   }
 
   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);
+    if (urlTemplate === null) {
+      return;
+    }
+    const options = {};
+    const key = "attribution";
+    if (this.hasAttribute(key)) {
+      options[key] = this.getAttribute(key);
+    }
+    this.layer = tileLayer(urlTemplate, options);
     const event = new CustomEvent(mapAddTo, {
-      detail: { name, layer },
+      detail: { name, layer: this.layer },
       bubbles: true,
     });
     this.dispatchEvent(event);

package/src/l-video-overlay.js

@@ -1,3 +1,5 @@
+// @ts-check
+import { videoOverlay } from "leaflet";
 import { mapAddTo } from "./events.js";
 
 class LVideoOverlay extends HTMLElement {
@@ -15,7 +17,7 @@ class LVideoOverlay extends HTMLElement {
       muted: true,
       playsInline: true,
     };
-    const layer = L.videoOverlay(url, bounds, options);
+    const layer = videoOverlay(url, bounds, options);
     this.dispatchEvent(
       new CustomEvent(mapAddTo, {
         cancelable: true,