npm - leaflet-html - Versions diffs - 0.3.4 → 0.3.6 - Mend

leaflet-html 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/package.json +5 -1
package/.github/workflows/master.yml +0 -15
package/.github/workflows/npm-publish.yml +0 -37
package/.prettierignore +0 -2
package/.prettierrc +0 -1
package/docs/config.toml +0 -16
package/docs/content/_index.md +0 -89
package/docs/content/articles/_index.md +0 -5
package/docs/content/articles/basic.md +0 -110
package/docs/content/articles/htmx.md +0 -84
package/docs/content/articles/icons.md +0 -47
package/docs/content/articles/style.md +0 -14
package/docs/public/icons/leaf-green.png +0 -0
package/docs/public/icons/leaf-orange.png +0 -0
package/docs/public/icons/leaf-red.png +0 -0
package/docs/public/icons/leaf-shadow.png +0 -0
package/docs/static/htmx/clicked.html +0 -1
package/docs/static/htmx/marker.html +0 -3
package/docs/static/htmx/tile-esri.html +0 -3
package/docs/static/htmx/tile-osm.html +0 -4
package/docs/static/htmx/tile-voyager.html +0 -4
package/docs/static/icons/leaf-green.png +0 -0
package/docs/static/icons/leaf-orange.png +0 -0
package/docs/static/icons/leaf-red.png +0 -0
package/docs/static/icons/leaf-shadow.png +0 -0
package/docs/static/style.css +0 -48
package/docs/templates/article-page.html +0 -8
package/docs/templates/article.html +0 -12
package/docs/templates/base.html +0 -43
package/docs/templates/index.html +0 -6
package/docs/templates/shortcodes/url.html +0 -1
package/example/geojson/index.html +0 -44
package/example/index.html +0 -113
package/example/overlays/index.html +0 -78
package/src/events.js +0 -3
package/src/index.js +0 -33
package/src/l-base-layers.js +0 -16
package/src/l-control-layers.js +0 -39
package/src/l-geojson.js +0 -27
package/src/l-icon.js +0 -124
package/src/l-image-overlay.js +0 -54
package/src/l-lat-lng-bounds.js +0 -21
package/src/l-layer-group.js +0 -51
package/src/l-layer.js +0 -8
package/src/l-map.js +0 -56
package/src/l-marker.js +0 -95
package/src/l-overlay-layers.js +0 -16
package/src/l-popup.js +0 -22
package/src/l-tile-layer.js +0 -32
package/src/l-video-overlay.js +0 -34
package/vite.config.js +0 -7

package/example/index.html DELETED Viewed

@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Leaflet HTML</title>
-    <meta charset="utf-8" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-      crossorigin=""
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
-        }
-      }
-    </script>
-    <script
-      src="/src/index.js"
-      type="module"
-      defer
-    ></script>
-    <style>
-      * {
-        margin: 0;
-      }
-      l-map {
-        block-size: 100vh;
-        isolation: isolate;
-        z-index: 1;
-      }
-      .btn-group {
-        z-index: 2;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        margin: 1rem;
-      }
-      button {
-        padding: 1rem;
-        background-color: #337;
-        color: white;
-        border-radius: 0.25rem;
-        cursor: pointer;
-        font-size: 1.2rem;
-      }
-      body {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-      }
-    </style>
-  </head>
-  <body>
-    <l-map center="[39.61, -105.02]" zoom="10">
-      <l-control-layers>
-        <l-base-layers>
-          <l-tile-layer
-            name="OpenStreetMap"
-            url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-            attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            max-zoom="12"
-          ></l-tile-layer>
-          <l-tile-layer
-            name="CartoDB_Voyager"
-            url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-            max-zoom="20"
-            subdomains="abcd"
-          ></l-tile-layer>
-        </l-base-layers>
-        <l-overlay-layers>
-          <l-layer-group name="Cities">
-            <l-marker lat-lng="[39.61, -105.02]">
-              <l-popup content="This is Littleton, CO."></l-popup>
-            </l-marker>
-            <l-marker lat-lng="[39.74, -104.99]">
-              <l-popup content="This is Denver, CO."></l-popup>
-            </l-marker>
-            <l-marker lat-lng="[39.73, -104.8]" opacity="0.7">
-              <l-popup content="This is Aurora, CO."></l-popup>
-            </l-marker>
-            <l-marker lat-lng="[39.77, -105.23]">
-              <l-popup content="This is Golden, CO."></l-popup>
-            </l-marker>
-          </l-layer-group>
-        </l-overlay-layers>
-      </l-control-layers>
-    </l-map>
-    <div class="btn-group">
-      <button id="btn-move">Move Denver</button>
-      <button id="btn-remove">Remove Denver</button>
-    </div>
-    <script type="module">
-      // Manual tests
-      document.getElementById("btn-remove").addEventListener("click", () => {
-        // Remove Denver
-        let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
-        el.remove();
-      });
-      document.getElementById("btn-move").addEventListener("click", () => {
-        // Move Denver
-        let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
-        el.setAttribute("lat-lng", "[39.74, -104.89]");
-        el.setAttribute("opacity", "0.5");
-      });
-    </script>
-  </body>
-</html>

package/example/overlays/index.html DELETED Viewed

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head lang="en">
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Leaflet HTML imageOverlay</title>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-      crossorigin=""
-    />
-    <script type="importmap">
-      {
-        "imports": {
-          "leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js"
-        }
-      }
-    </script>
-    <script type="module" src="/src/index.js"></script>
-    <style>
-      * {
-        margin: 0;
-      }
-      l-map {
-        display: block;
-        block-size: 100vh;
-        outline: 1px solid hotpink;
-        isolation: isolate;
-        z-index: 1;
-      }
-    </style>
-  </head>
-  <body>
-    <l-map center="[37.8, -96]" zoom="4">
-      <l-lat-lng-bounds
-        bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
-      ></l-lat-lng-bounds>
-      <l-tile-layer
-        name="OpenStreetMap"
-        url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-        attribution=""
-      ></l-tile-layer>
-      <!-- Newark -->
-      <l-image-overlay
-        url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
-        bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
-        opacity="0.8"
-        interactive="true"
-        error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
-        alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
-      ></l-image-overlay>
-      <!-- Hurricane Patricia -->
-      <l-video-overlay
-        url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
-        error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
-        bounds="[[32, -130], [13, -100]]"
-      ></l-video-overlay>
-    </l-map>
-    <script>
-      el = document.querySelector("l-lat-lng-bounds")
-      let counter = 0
-      document.body.addEventListener("click", () => {
-        el.setAttribute("method", "flyToBounds")
-        if (counter === 0) {
-          const bounds = document.querySelector("l-video-overlay").getAttribute("bounds")
-          el.setAttribute("bounds", bounds)
-        } else {
-          const bounds = document.querySelector("l-image-overlay").getAttribute("bounds")
-          el.setAttribute("bounds", bounds)
-        }
-        counter += 1
-      })
-    </script>
-  </body>
-</html>

package/src/events.js DELETED Viewed

@@ -1,3 +0,0 @@
-export const mapAddTo = "map:addTo";
-export const popupAdd = "popup:add";
-export const layerRemove = "layer:remove";

package/src/index.js DELETED Viewed

@@ -1,33 +0,0 @@
-// @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";
-import LIcon from "./l-icon.js";
-const init = (() => {
-  // 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);
-  customElements.define("l-icon", LIcon);
-})();
-export default init;

package/src/l-base-layers.js DELETED Viewed

@@ -1,16 +0,0 @@
-// @ts-check
-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 DELETED Viewed

@@ -1,39 +0,0 @@
-// @ts-check
-/** @typedef {import("leaflet").Layer} Layer */
-import { control } from "leaflet";
-import { mapAddTo } from "./events.js";
-class LControlLayers extends HTMLElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    /** @type {{ [key: string]: Layer }} */
-    const base = {};
-    /** @type {{ [key: string]: Layer }} */
-    const overlay = {};
-    const controlLayers = control.layers(base, overlay);
-    this.addEventListener(mapAddTo, (ev) => {
-      const { type, name, layer } = ev.detail;
-      if (type === "overlay") {
-        controlLayers.addOverlay(layer, name);
-      } else if (type === "base") {
-        controlLayers.addBaseLayer(layer, name);
-      }
-      ev.preventDefault();
-    });
-    const event = new CustomEvent(mapAddTo, {
-      cancelable: true,
-      bubbles: true,
-      detail: {
-        layer: controlLayers,
-      },
-    });
-    this.dispatchEvent(event);
-  }
-}
-export default LControlLayers;

package/src/l-geojson.js DELETED Viewed

@@ -1,27 +0,0 @@
-// @ts-check
-import { geoJSON } from "leaflet";
-import { mapAddTo } from "./events.js";
-class LGeoJSON extends HTMLElement {
-  constructor() {
-    super();
-  }
-  connectedCallback() {
-    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,
-          },
-        }),
-      );
-    }
-  }
-}
-export default LGeoJSON;

package/src/l-icon.js DELETED Viewed

@@ -1,124 +0,0 @@
-// @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 DELETED Viewed

@@ -1,54 +0,0 @@
-// @ts-check
-import { imageOverlay } from "leaflet";
-import { mapAddTo } from "./events.js";
-import LLayer from "./l-layer.js";
-class LImageOverlay extends LLayer {
-  static observedAttributes = ["url", "bounds", "opacity"];
-  constructor() {
-    super();
-    this.layer = null;
-  }
-  connectedCallback() {
-    const url = this.getAttribute("url");
-    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 = imageOverlay(url, JSON.parse(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 DELETED Viewed

@@ -1,21 +0,0 @@
-// @ts-check
-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 DELETED Viewed

@@ -1,51 +0,0 @@
-// @ts-check
-import { layerGroup } from "leaflet";
-import { mapAddTo } from "./events.js";
-import LLayer from "./l-layer.js";
-class LLayerGroup extends LLayer {
-  constructor() {
-    super();
-    this.layer = null;
-  }
-  connectedCallback() {
-    const name = this.getAttribute("name");
-    const group = layerGroup();
-    this.layer = group;
-    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) => {
-          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);
-              }
-            }
-          }
-        });
-      });
-    });
-    observer.observe(this, { childList: true });
-  }
-}
-export default LLayerGroup;

package/src/l-layer.js DELETED Viewed

@@ -1,8 +0,0 @@
-class LLayer extends HTMLElement {
-  constructor() {
-    super()
-    this.layer = null
-  }
-}
-export default LLayer

package/src/l-map.js DELETED Viewed

@@ -1,56 +0,0 @@
-// @ts-check
-import * as L from "leaflet";
-import { layerRemove, mapAddTo } from "./events.js";
-import LLayer from "./l-layer.js";
-class LMap extends HTMLElement {
-  constructor() {
-    super();
-    this.map = null;
-    this.addEventListener("map:bounds", (ev) => {
-      const { bounds, method } = ev.detail;
-      if (this.map !== null) {
-        this.map[method](bounds);
-      }
-    });
-    // Observe removed l-tile-layers
-    const observer = new MutationObserver(function(mutations) {
-      mutations.forEach((mutation) => {
-        if (mutation.target instanceof LMap) {
-          const el = mutation.target
-          mutation.removedNodes.forEach((node) => {
-            if (node instanceof LLayer) {
-              if ((el.map !== null) && (node.layer !== null)) {
-                el.map.removeLayer(node.layer)
-              }
-            }
-          })
-        }
-      })
-    })
-    observer.observe(this, { childList: true })
-  }
-  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) => {
-      if (this.map !== null) {
-        this.map.removeLayer(ev.detail.layer);
-      }
-    });
-  }
-}
-export default LMap;