npm - leaflet-html - Versions diffs - 0.1.0 - Mend

leaflet-html 0.1.0

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

package/README.md ADDED Viewed

@@ -0,0 +1,56 @@
+# Leaflet HTML
+Leaflet expressed in HTML to add maps to Hypermedia Driven Applications (HDA).
+## Example
+The HTML in `example/index.html` is a simple demonstration of the API.
+![image](https://github.com/andrewgryan/leaflet-html/assets/22789046/0186bce2-ddcc-443a-b7a2-ccd86dcffcfc)
+```html
+<!-- Note: Leaflet JS/CSS must be included in <head> and [data-leaflet-html] styled to an appropriate size. -->
+<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="Toner"
+           data-url-template="https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png"
+           data-attribution=''
+           data-max-zoom="12"
+           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]">
+          <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>
+</div>
+```
+## Build
+To build the source code run.
+```sh
+yarn build
+```

package/example/index.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+    <style>
+      * {
+        margin: 0;
+      }
+      [data-leaflet-html] {
+        block-size: 100vh;
+        isolation: isolate;
+        z-index: 1;
+      }
+      #btn {
+        z-index: 2;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin: 1rem;
+        padding: 1rem;
+        background-color: #337;
+        color: white;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        font-size: 1.2rem;
+      }
+    </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="Toner"
+               data-url-template="https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png"
+               data-attribution=''
+               data-max-zoom="12"
+               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>
+    </div>
+    <button id="btn">Add a city</button>
+    <script type="module">
+      import leafletHTML from "/dist/leaflet-html.esm.js"
+      leafletHTML()
+      // 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)
+        // Remove Denver
+        el = document.querySelector('[data-lat-lng="[39.74, -104.99]"]')
+        el.remove()
+      })
+    </script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "leaflet-html",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Leaflet expressed in HTML",
+  "source": "src/index.js",
+  "main": "./dist/leaflet-html.js",
+  "module": "./dist/leaflet-html.esm.js",
+  "author": "andrewgryan",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andrewgryan/leaflet-html.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "microbundle",
+    "watch": "microbundle watch"
+  },
+  "devDependencies": {
+    "microbundle": "^0.15.1"
+  }
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,86 @@
+const init = () => {
+  // Render Leaflet API calls
+  document.querySelectorAll("[data-leaflet-html]").forEach((el) => {
+    const { center, zoom } = el.dataset
+    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom))
+    // L.control.layers
+    el.querySelectorAll("[data-control-layers]").forEach((el) => {
+      const baseMaps = {}
+      // L.tileLayers
+      el.querySelectorAll("[data-tile-layer]").forEach((tileEl) => {
+        const { show, urlTemplate, attribution, maxZoom, name } = tileEl.dataset
+        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });
+        if (show != null) {
+          baseMaps[name].addTo(map)
+        }
+      })
+      const overlayMaps = {}
+      // L.layerGroup
+      el.querySelectorAll("[data-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("[data-marker]").forEach((el) => {
+          const { latLng } = el.dataset
+          const { opacity = "1.0" } = el.dataset
+          const options = { opacity: parseFloat(opacity) }
+          console.log(options)
+          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("[data-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)
+    })
+  })
+}
+export default init