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

leaflet-html 0.3.4 → 0.3.6

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;