npm - leaflet-html - Versions diffs - 0.1.7 → 0.2.1 - Mend

leaflet-html 0.1.7 → 0.2.1

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 (49) hide show

package/.github/workflows/npm-publish.yml +27 -27
package/.prettierignore +2 -0
package/.prettierrc +1 -0
package/README.md +63 -36
package/dist/leaflet-html.cjs +1 -1
package/dist/leaflet-html.cjs.map +1 -1
package/dist/leaflet-html.esm.js +1 -1
package/dist/leaflet-html.esm.js.map +1 -1
package/dist/leaflet-html.js +1 -1
package/dist/leaflet-html.js.map +1 -1
package/dist/leaflet-html.umd.js +1 -1
package/dist/leaflet-html.umd.js.map +1 -1
package/docs/content/_index.md +66 -63
package/docs/content/articles/_index.md +5 -0
package/docs/content/articles/basic.md +105 -0
package/docs/content/articles/icons.md +35 -0
package/docs/content/articles/style.md +14 -0
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/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/templates/article-page.html +8 -0
package/docs/templates/article.html +12 -0
package/docs/templates/base.html +59 -0
package/docs/templates/index.html +5 -52
package/example/geojson/index.html +42 -0
package/example/index.html +58 -50
package/example/overlays/index.html +34 -35
package/package.json +12 -5
package/src/events.js +3 -0
package/src/index.js +27 -185
package/src/l-base-layers.js +15 -0
package/src/l-control-layers.js +34 -0
package/src/l-geojson.js +22 -0
package/src/l-icon.js +124 -0
package/src/l-image-overlay.js +43 -0
package/src/l-lat-lng-bounds.js +20 -0
package/src/l-layer-group.js +39 -0
package/src/l-map.js +33 -0
package/src/l-marker.js +94 -0
package/src/l-overlay-layers.js +15 -0
package/src/l-popup.js +21 -0
package/src/l-tile-layer.js +22 -0
package/src/l-video-overlay.js +31 -0
package/vite.config.js +7 -0

package/docs/templates/base.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+  l-map {
+    display: block;
+    block-size: 40ch;
+    isolation: isolate;
+    z-index: 1;
+  }
+  body {
+    font-family: system-ui;
+    line-height: 1.6;
+  }
+  h1, h2, h3 {
+    font-weight: 100;
+  }
+  pre {
+    padding-inline: 0.75rem;
+    padding-block: 0.5rem;
+    border-radius: 0.2rem;
+    overflow-x: auto;
+  }
+  main {
+    inline-size: min(90%, 80ch);
+    margin-inline: auto;
+  }
+  </style>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      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="module"
+      src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
+    ></script>
+</head>
+<body>
+<nav>
+  <a href="{{ get_url(path='@/_index.md') }}">Home</a>
+  <a href="{{ get_url(path='@/articles/_index.md') }}">Articles</a>
+</nav>
+{% block content %}{% endblock %}
+</body>
+</html>

package/docs/templates/index.html CHANGED Viewed

@@ -1,53 +1,6 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-      [data-leaflet-html] {
-        block-size: 40ch;
-        isolation: isolate;
-        z-index: 1;
-      }
-  body {
-    font-family: system-ui;
-    line-height: 1.6;
-  }
-h1, h2 {
-  font-weight: 100;
-}
-pre {
-  padding-inline: 0.75rem;
-  padding-block: 0.5rem;
-  border-radius: 0.2rem;
-  overflow-x: scroll;
-}
-.wrapper {
-  inline-size: 80ch;
-  margin-inline: auto;
-}
-  </style>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-      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
-      src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.umd.js"
-    ></script>
-</head>
-<body>
-<div class="wrapper">
+{% extends "base.html" %}
+{% block content %}
+<main>
 {{ section.content | safe }}
-</div>
-</body>
-</html>
+</main>
+{% endblock %}

package/example/geojson/index.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GeoJSON</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      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="module" src="/src/index.js"></script>
+    <style>
+      * {
+        margin: 0;
+      }
+      l-map {
+        display: block;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <l-map center="[55,0]" zoom="5">
+      <l-tile-layer
+        url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
+      ></l-tile-layer>
+      <l-geojson id="feature" geojson='{"type":"Feature","properties":{"name":"Coors Field","amenity":"Baseball Stadium","popupContent":"This is where the Rockies play!"},"geometry":{"type":"Point","coordinates":[-104.99404,39.75621]}}'></l-geojson>
+    </l-map>
+    <script>
+      document.getElementById("feature").addEventListener("map:addTo", (ev) => {
+        console.log({ message: "Hello, World!", ev })
+      })
+    </script>
+  </body>
+</html>

package/example/index.html CHANGED Viewed

@@ -15,7 +15,8 @@
       crossorigin=""
     ></script>
     <script
-      src="/dist/leaflet-html.umd.js"
+      src="/src/index.js"
+      type="module"
       defer
     ></script>
     <style>
@@ -23,18 +24,21 @@
         margin: 0;
       }
-      [data-leaflet-html] {
+      l-map {
         block-size: 100vh;
         isolation: isolate;
         z-index: 1;
       }
-      #btn {
+      .btn-group {
         z-index: 2;
         position: absolute;
         bottom: 0;
         left: 0;
         margin: 1rem;
+      }
+      button {
         padding: 1rem;
         background-color: #337;
         color: white;
@@ -42,62 +46,66 @@
         cursor: pointer;
         font-size: 1.2rem;
       }
+      body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
     </style>
   </head>
   <body>
-    <div data-leaflet-html data-center="[39.61, -105.02]" data-zoom="10">
-      <div data-control-layers>
-        <div data-base-maps>
-          <div
-            data-tile-layer
-            data-name="OpenStreetMap"
-            data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-            data-attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            data-max-zoom="12"
-          ></div>
-          <div
-            data-tile-layer
-            data-name="CartoDB_Voyager"
-            data-url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
-            data-attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-            data-max-zoom="20"
-            data-subdomains="abcd"
-            data-show
-          ></div>
-        </div>
-        <div data-overlay-maps>
-          <div data-layer-group data-name="Cities">
-            <div data-marker data-lat-lng="[39.61, -105.02]">
-              <div data-popup data-content="This is Littleton, CO."></div>
-            </div>
-            <div data-marker data-lat-lng="[39.74, -104.99]">
-              <div data-popup data-content="This is Denver, CO."></div>
-            </div>
-            <div data-marker data-lat-lng="[39.73, -104.8]" data-opacity="0.7">
-              <div data-popup data-content="This is Aurora, CO."></div>
-            </div>
-            <div data-marker data-lat-lng="[39.77, -105.23]">
-              <div data-popup data-content="This is Golden, CO."></div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <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>
-    <button id="btn">Add a city</button>
     <script type="module">
       // Manual tests
-      document.getElementById("btn").addEventListener("click", () => {
-        // New city
-        let el = document.querySelector('[data-name="Cities"]');
-        const city = document.createElement("div");
-        city.dataset.marker = "";
-        city.dataset.latLng = "[39.60, -105.02]";
-        el.appendChild(city);
+      document.getElementById("btn-remove").addEventListener("click", () => {
         // Remove Denver
-        el = document.querySelector('[data-lat-lng="[39.74, -104.99]"]');
+        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 CHANGED Viewed

@@ -15,60 +15,59 @@
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""
     ></script>
-    <script src="/dist/leaflet-html.umd.js"></script>
+    <script type="module" src="/src/index.js"></script>
     <style>
       * {
         margin: 0;
       }
-      [data-leaflet-html] {
+      l-map {
+        display: block;
         block-size: 100vh;
+        outline: 1px solid hotpink;
         isolation: isolate;
         z-index: 1;
       }
     </style>
   </head>
   <body>
-    <div data-leaflet-html data-center="[37.8, -96]" data-zoom="4">
-      <div
-        data-lat-lng-bounds
-        data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
-      ></div>
-      <div
-        data-tile-layer
-        data-name="OpenStreetMap"
-        data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
-        data-attribution=""
-      ></div>
+    <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 -->
-      <div
-        data-image-overlay
-        data-url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
-        data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
-        data-opacity="0.8"
-        data-interactive="true"
-        data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
-        data-alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
-      ></div>
+      <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 -->
-      <div
-        data-video-overlay
-        data-url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
-        data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
-        data-bounds="[[32, -130], [13, -100]]"
-      ></div>
-    </div>
+      <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("[data-lat-lng-bounds]")
+      el = document.querySelector("l-lat-lng-bounds")
       let counter = 0
       document.body.addEventListener("click", () => {
-        console.log("click")
+        el.setAttribute("method", "flyToBounds")
         if (counter === 0) {
-          const { bounds } = document.querySelector("[data-video-overlay]").dataset
-          el.dataset.bounds = bounds
+          const bounds = document.querySelector("l-video-overlay").getAttribute("bounds")
+          el.setAttribute("bounds", bounds)
         } else {
-          const { bounds } = document.querySelector("[data-image-overlay]").dataset
-          el.dataset.bounds = bounds
+          const bounds = document.querySelector("l-image-overlay").getAttribute("bounds")
+          el.setAttribute("bounds", bounds)
         }
         counter += 1
       })

package/package.json CHANGED Viewed

@@ -1,13 +1,13 @@
 {
   "name": "leaflet-html",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "Leaflet expressed in HTML",
   "source": "src/index.js",
   "main": "./dist/leaflet-html.js",
   "umd:main": "./dist/leaflet-html.umd.js",
   "exports": {
-    "default": "./dist/leaflet-html.js"
+    "module": "./dist/leaflet-html.js"
   },
   "module": "./dist/leaflet-html.esm.js",
   "author": "andrewgryan",
@@ -17,10 +17,17 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "microbundle",
-    "watch": "microbundle watch"
+    "build": "microbundle --external leaflet",
+    "watch": "microbundle watch",
+    "test": "vitest"
   },
   "devDependencies": {
-    "microbundle": "^0.15.1"
+    "happy-dom": "^14.10.1",
+    "microbundle": "^0.15.1",
+    "prettier": "3.2.5",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4"
   }
 }

package/src/events.js ADDED Viewed

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

package/src/index.js CHANGED Viewed

@@ -1,191 +1,33 @@
 // @ts-check
-// 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);
-    });
-  });
-};
+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 = (() => {
-  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);
+  customElements.define("l-icon", LIcon);
 })();
 export default init;