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

leaflet-html 0.1.7 → 0.2.1

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;