leaflet-html 0.1.5 → 0.1.7

package/.github/workflows/master.yml

@@ -0,0 +1,15 @@
+on: push
+name: Build and deploy GH Pages
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: build_and_deploy
+        uses: shalzz/zola-deploy-action@v0.17.2
+        env:
+          BUILD_DIR: docs
+          PAGES_BRANCH: gh-pages
+          TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,37 @@
+name: npm-publish
+on:
+  push:
+    branches:
+      - master
+jobs:
+  npm-publish:
+    name: npm-publish
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+    - name: Set Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 21
+    - name: Install
+      uses: borales/actions-yarn@v4
+      with:
+        cmd: install
+    - name: Build
+      uses: borales/actions-yarn@v4
+      with:
+        cmd: build
+    - name: Publish if version has been updated
+      uses: pascalgn/npm-publish-action@1.3.9
+      with:
+        tag_name: "v%s"
+        tag_message: "v%s"
+        create_tag: "true"
+        commit_pattern: "^Release (\\S+)"
+        workspace: "."
+        publish_command: "yarn"
+        publish_args: "--non-interactive"
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/README.md

@@ -2,6 +2,12 @@
 
 Leaflet expressed in HTML to add maps to Hypermedia Driven Applications (HDA).
 
+Indeed, since it is HTML, any front end framework should work with it.
+
+Fine grained reactive frameworks such as [Solid JS](https://solidjs.com) or [Van JS](https://vanjs.org) are ideal candidates for client side development. 
+
+RESTful frameworks, like [HTMX](Https://htmx.org), that serve HTML over the wire are perfect choices for server rendered content.
+
 ## Example
 
 The HTML in `example/index.html` is a simple demonstration of the API.

package/dist/leaflet-html.cjs

@@ -1,2 +1,2 @@
-var t=void document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("[data-leaflet-html]").forEach(function(t){var a=t.dataset,e=a.center,r=a.zoom,o=L.map(t).setView(JSON.parse(e),parseInt(r));t.querySelectorAll("[data-control-layers]").forEach(function(t){var a={};t.querySelectorAll("[data-tile-layer]").forEach(function(t){var e=t.dataset,r=e.show,n=e.name;a[n]=L.tileLayer(e.urlTemplate,{maxZoom:e.maxZoom,attribution:e.attribution}),null!=r&&a[n].addTo(o)});var e={};t.querySelectorAll("[data-layer-group]").forEach(function(t){var a=t.dataset.name,r=[];new MutationObserver(function(t){var r=e[a];t.forEach(function(t){t.addedNodes.forEach(function(t){var a=L.marker(JSON.parse(t.dataset.latLng));r.addLayer(a),o.addLayer(a)}),t.removedNodes.forEach(function(t){var a=r.getLayer(t.dataset._leafletId);r.removeLayer(a),o.removeLayer(a)})})}).observe(t,{childList:!0}),t.querySelectorAll("[data-marker]").forEach(function(t){var a=t.dataset.latLng,e=t.dataset.opacity,n={opacity:parseFloat(void 0===e?"1.0":e)};console.log(n);var l=L.marker(JSON.parse(a),n).addTo(o);t.dataset._leafletId=L.stamp(l),new MutationObserver(function(t){t.forEach(function(t){l.setLatLng(JSON.parse(t.target.dataset.latLng))})}).observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll("[data-popup]").forEach(function(t){l.bindPopup(t.dataset.content),new MutationObserver(function(){l.getPopup().setContent(t.dataset.content)}).observe(t,{attributes:!0,attributeFilter:["data-content"]})}),r.push(l)}),e[a]=L.layerGroup(r)}),L.control.layers(a,e).addTo(o)})})});module.exports=t;
+var a=function(a){return"[data-"+a+"]"},t=function(a){var t=a.dataset,e=t.attribution,r=t.maxZoom,o=t.minZoom,n=t.subdomains;return[a.dataset.urlTemplate,{attribution:void 0===e?null:e,maxZoom:void 0===r?"18":r,minZoom:void 0===o?"0":o,subdomains:void 0===n?"abc":n}]},e=function(a){var t=a.dataset.bounds;if(void 0===t)throw Error("data-bounds not specified");return[JSON.parse(t)]},r=void document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(a("leaflet-html")).forEach(function(r){var o=r.dataset,n=o.center,l=o.zoom,d=L.map(r).setView(JSON.parse(n),parseInt(l));r.querySelectorAll(a("lat-lng-bounds")).forEach(function(a){var t,r=(t=L).latLngBounds.apply(t,e(a));new MutationObserver(function(a){a.forEach(function(a){var t=e(a.target);d.flyToBounds(t[0])})}).observe(a,{attributes:!0,attributeFilter:["data-bounds"]}),d.fitBounds(r)}),r.querySelectorAll(a("tile-layer")).forEach(function(a){var e;(e=L).tileLayer.apply(e,t(a)).addTo(d)}),r.querySelectorAll(a("image-overlay")).forEach(function(a){var t;(t=L).imageOverlay.apply(t,function(a){var t=a.dataset,e=t.bounds;return[t.url,e=JSON.parse(e),{opacity:parseFloat(a.dataset.opacity)}]}(a)).addTo(d)}),r.querySelectorAll(a("video-overlay")).forEach(function(a){var t;(t=L).videoOverlay.apply(t,function(a){var t=a.dataset,e=t.url,r=t.bounds;e=JSON.parse(e),r=JSON.parse(r);var o=a.dataset,n=o.errorOverlayUrl,l=o.autoplay,d=void 0===l||l,i=o.muted,u=void 0===i||i,s=o.playsInline,c=void 0===s||s;return[e,r,{opacity:parseFloat(o.opacity),errorOverlayUrl:n,autoplay:d,muted:u,playsInline:c}]}(a)).addTo(d)}),r.querySelectorAll(a("control-layers")).forEach(function(e){var r={};e.querySelectorAll(a("tile-layer")).forEach(function(a){var e,o=a.dataset,n=o.name,l=o.show;r[n]=(e=L).tileLayer.apply(e,t(a)),null!=l&&r[n].addTo(d)});var o={};e.querySelectorAll(a("layer-group")).forEach(function(t){var e=t.dataset.name,r=[];new MutationObserver(function(a){var t=o[e];a.forEach(function(a){a.addedNodes.forEach(function(a){var e=L.marker(JSON.parse(a.dataset.latLng));t.addLayer(e),d.addLayer(e)}),a.removedNodes.forEach(function(a){var e=t.getLayer(a.dataset._leafletId);t.removeLayer(e),d.removeLayer(e)})})}).observe(t,{childList:!0}),t.querySelectorAll(a("marker")).forEach(function(t){var e=t.dataset.latLng,o=t.dataset.opacity,n={opacity:parseFloat(void 0===o?"1.0":o)},l=L.marker(JSON.parse(e),n).addTo(d);t.dataset._leafletId=L.stamp(l),new MutationObserver(function(a){a.forEach(function(a){l.setLatLng(JSON.parse(a.target.dataset.latLng))})}).observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll(a("popup")).forEach(function(a){l.bindPopup(a.dataset.content),new MutationObserver(function(){l.getPopup().setContent(a.dataset.content)}).observe(a,{attributes:!0,attributeFilter:["data-content"]})}),r.push(l)}),o[e]=L.layerGroup(r)}),L.control.layers(r,o).addTo(d)})})});module.exports=r;
 //# sourceMappingURL=leaflet-html.cjs.map

package/dist/leaflet-html.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"leaflet-html.cjs","sources":["../src/index.js"],"sourcesContent":["const render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(\"[data-leaflet-html]\").forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.control.layers\n    el.querySelectorAll(\"[data-control-layers]\").forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(\"[data-tile-layer]\").forEach((tileEl) => {\n        const { show, urlTemplate, attribution, maxZoom, name } =\n          tileEl.dataset;\n        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(\"[data-layer-group]\").forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(\"[data-marker]\").forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          console.log(options);\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(\"[data-popup]\").forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["init","document","addEventListener","querySelectorAll","forEach","el","_el$dataset","dataset","center","zoom","map","L","setView","JSON","parse","parseInt","baseMaps","tileEl","_tileEl$dataset","show","name","tileLayer","urlTemplate","maxZoom","attribution","addTo","overlayMaps","layers","MutationObserver","mutations","group","mutation","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","observe","childList","_el$dataset$opacity","opacity","options","parseFloat","console","log","stamp","setLatLng","target","attributes","attributeFilter","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"AAAA,IA4FMA,OACJC,SAASC,iBAAiB,mBA7Fb,WAEbD,SAASE,iBAAiB,uBAAuBC,QAAQ,SAACC,GACxD,IAAAC,EAAyBD,EAAGE,QAApBC,EAAMF,EAANE,OAAQC,EAAIH,EAAJG,KACVC,EAAMC,EAAED,IAAIL,GAAIO,QAAQC,KAAKC,MAAMN,GAASO,SAASN,IAG3DJ,EAAGF,iBAAiB,yBAAyBC,QAAQ,SAACC,GACpD,IAAMW,EAAW,GAGjBX,EAAGF,iBAAiB,qBAAqBC,QAAQ,SAACa,GAChD,IAAAC,EACED,EAAOV,QADDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KAEjDJ,EAASI,GAAQT,EAAEU,UAFMH,EAAXI,YAE4B,CAAEC,QAFGL,EAAPK,QAEaC,YAFfN,EAAXM,cAGf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAA,EAEpBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAAUC,GAC9C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAC2B,GACjBA,EAASC,WAAW5B,QAAQ,SAAC6B,GAC3B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAC6B,GAC7B,IACMC,EAAQJ,EAAMS,SADGN,EAAK1B,QAApBiC,YAERV,EAAMW,YAAYP,GAElBxB,EAAI+B,YAAYP,EAClB,EACF,EACF,GACSQ,QAAQrC,EAAI,CAAEsC,WAAW,IAGlCtC,EAAGF,iBAAiB,iBAAiBC,QAAQ,SAACC,GAC5C,IAAQ+B,EAAW/B,EAAGE,QAAd6B,OACRQ,EAA4BvC,EAAGE,QAAvBsC,QACFC,EAAU,CAAED,QAASE,gBADT,IAAHH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAAUC,GAC9CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACF,GACSM,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,kBAIpBjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,iBAEtB,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF"}
+{"version":3,"file":"leaflet-html.cjs","sources":["../src/index.js"],"sourcesContent":["// @ts-check\n\n// Helpers\nconst selector = (noun) => `[data-${noun}]`;\n\n/**\n * Parse L.tileLayer args from element attributes\n */\nconst parseTileLayer = (el) => {\n  const { urlTemplate } = el.dataset;\n  const {\n    attribution = null,\n    maxZoom = \"18\",\n    minZoom = \"0\",\n    subdomains = \"abc\",\n  } = el.dataset;\n  const options = { attribution, maxZoom, minZoom, subdomains };\n  return [urlTemplate, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseImageOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  bounds = JSON.parse(bounds);\n  const { opacity } = el.dataset;\n  const options = { opacity: parseFloat(opacity) };\n  return [url, bounds, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseVideoOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  url = JSON.parse(url);\n  bounds = JSON.parse(bounds);\n  const {\n    opacity,\n    errorOverlayUrl,\n    autoplay = true,\n    muted = true,\n    playsInline = true,\n  } = el.dataset;\n  const options = {\n    opacity: parseFloat(opacity),\n    errorOverlayUrl,\n    autoplay,\n    muted,\n    playsInline,\n  };\n  return [url, bounds, options];\n};\n\n/**\n * @param {HTMLElement} el\n */\nconst parseLatLngBounds = (el) => {\n  let { bounds } = el.dataset;\n  if (typeof bounds === \"undefined\") {\n    throw Error(\"data-bounds not specified\")\n  }\n  return [JSON.parse(bounds)];\n}\n\nconst render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(selector(\"leaflet-html\")).forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.latLngBounds\n    el.querySelectorAll(selector(\"lat-lng-bounds\")).forEach((el) => {\n      const bounds = L.latLngBounds(...parseLatLngBounds(el))\n      // TODO: encapsulate this design pattern\n      const observer = new MutationObserver(function (mutations) {\n        mutations.forEach((mutation) => {\n          let [bounds] = parseLatLngBounds(mutation.target)\n          map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds\n        });\n      });\n      observer.observe(el, {\n        attributes: true,\n        attributeFilter: [\"data-bounds\"],\n      });\n      map.fitBounds(bounds)\n    })\n\n    // L.tileLayers\n    el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n      L.tileLayer(...parseTileLayer(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"image-overlay\")).forEach((el) => {\n      L.imageOverlay(...parseImageOverlay(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"video-overlay\")).forEach((el) => {\n      L.videoOverlay(...parseVideoOverlay(el)).addTo(map);\n    });\n\n    // L.control.layers\n    el.querySelectorAll(selector(\"control-layers\")).forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n        const { name, show } = el.dataset;\n        baseMaps[name] = L.tileLayer(...parseTileLayer(el));\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(selector(\"layer-group\")).forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(selector(\"marker\")).forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(selector(\"popup\")).forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["selector","noun","parseTileLayer","el","_el$dataset","dataset","_el$dataset$attributi","attribution","_el$dataset$maxZoom","maxZoom","_el$dataset$minZoom","minZoom","_el$dataset$subdomain","subdomains","urlTemplate","parseLatLngBounds","bounds","Error","JSON","parse","init","document","addEventListener","querySelectorAll","forEach","_el$dataset5","center","zoom","map","L","setView","parseInt","_L","latLngBounds","apply","MutationObserver","mutations","mutation","_parseLatLngBounds","target","flyToBounds","observe","attributes","attributeFilter","fitBounds","_L2","tileLayer","addTo","_L3","imageOverlay","_el$dataset2","url","opacity","parseFloat","parseImageOverlay","_L4","videoOverlay","_el$dataset3","_el$dataset4","errorOverlayUrl","_el$dataset4$autoplay","autoplay","_el$dataset4$muted","muted","_el$dataset4$playsInl","playsInline","parseVideoOverlay","baseMaps","_L5","_el$dataset6","name","show","overlayMaps","layers","group","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","childList","_el$dataset$opacity","options","stamp","setLatLng","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"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"}

package/dist/leaflet-html.esm.js

@@ -1,2 +1,2 @@
-var t=void document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("[data-leaflet-html]").forEach(function(t){var a=t.dataset,e=a.center,r=a.zoom,o=L.map(t).setView(JSON.parse(e),parseInt(r));t.querySelectorAll("[data-control-layers]").forEach(function(t){var a={};t.querySelectorAll("[data-tile-layer]").forEach(function(t){var e=t.dataset,r=e.show,n=e.name;a[n]=L.tileLayer(e.urlTemplate,{maxZoom:e.maxZoom,attribution:e.attribution}),null!=r&&a[n].addTo(o)});var e={};t.querySelectorAll("[data-layer-group]").forEach(function(t){var a=t.dataset.name,r=[];new MutationObserver(function(t){var r=e[a];t.forEach(function(t){t.addedNodes.forEach(function(t){var a=L.marker(JSON.parse(t.dataset.latLng));r.addLayer(a),o.addLayer(a)}),t.removedNodes.forEach(function(t){var a=r.getLayer(t.dataset._leafletId);r.removeLayer(a),o.removeLayer(a)})})}).observe(t,{childList:!0}),t.querySelectorAll("[data-marker]").forEach(function(t){var a=t.dataset.latLng,e=t.dataset.opacity,n={opacity:parseFloat(void 0===e?"1.0":e)};console.log(n);var l=L.marker(JSON.parse(a),n).addTo(o);t.dataset._leafletId=L.stamp(l),new MutationObserver(function(t){t.forEach(function(t){l.setLatLng(JSON.parse(t.target.dataset.latLng))})}).observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll("[data-popup]").forEach(function(t){l.bindPopup(t.dataset.content),new MutationObserver(function(){l.getPopup().setContent(t.dataset.content)}).observe(t,{attributes:!0,attributeFilter:["data-content"]})}),r.push(l)}),e[a]=L.layerGroup(r)}),L.control.layers(a,e).addTo(o)})})});export{t as default};
+var a=function(a){return"[data-"+a+"]"},t=function(a){var t=a.dataset,e=t.attribution,r=t.maxZoom,o=t.minZoom,n=t.subdomains;return[a.dataset.urlTemplate,{attribution:void 0===e?null:e,maxZoom:void 0===r?"18":r,minZoom:void 0===o?"0":o,subdomains:void 0===n?"abc":n}]},e=function(a){var t=a.dataset.bounds;if(void 0===t)throw Error("data-bounds not specified");return[JSON.parse(t)]},r=void document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(a("leaflet-html")).forEach(function(r){var o=r.dataset,n=o.center,l=o.zoom,d=L.map(r).setView(JSON.parse(n),parseInt(l));r.querySelectorAll(a("lat-lng-bounds")).forEach(function(a){var t,r=(t=L).latLngBounds.apply(t,e(a));new MutationObserver(function(a){a.forEach(function(a){var t=e(a.target);d.flyToBounds(t[0])})}).observe(a,{attributes:!0,attributeFilter:["data-bounds"]}),d.fitBounds(r)}),r.querySelectorAll(a("tile-layer")).forEach(function(a){var e;(e=L).tileLayer.apply(e,t(a)).addTo(d)}),r.querySelectorAll(a("image-overlay")).forEach(function(a){var t;(t=L).imageOverlay.apply(t,function(a){var t=a.dataset,e=t.bounds;return[t.url,e=JSON.parse(e),{opacity:parseFloat(a.dataset.opacity)}]}(a)).addTo(d)}),r.querySelectorAll(a("video-overlay")).forEach(function(a){var t;(t=L).videoOverlay.apply(t,function(a){var t=a.dataset,e=t.url,r=t.bounds;e=JSON.parse(e),r=JSON.parse(r);var o=a.dataset,n=o.errorOverlayUrl,l=o.autoplay,d=void 0===l||l,i=o.muted,u=void 0===i||i,s=o.playsInline,c=void 0===s||s;return[e,r,{opacity:parseFloat(o.opacity),errorOverlayUrl:n,autoplay:d,muted:u,playsInline:c}]}(a)).addTo(d)}),r.querySelectorAll(a("control-layers")).forEach(function(e){var r={};e.querySelectorAll(a("tile-layer")).forEach(function(a){var e,o=a.dataset,n=o.name,l=o.show;r[n]=(e=L).tileLayer.apply(e,t(a)),null!=l&&r[n].addTo(d)});var o={};e.querySelectorAll(a("layer-group")).forEach(function(t){var e=t.dataset.name,r=[];new MutationObserver(function(a){var t=o[e];a.forEach(function(a){a.addedNodes.forEach(function(a){var e=L.marker(JSON.parse(a.dataset.latLng));t.addLayer(e),d.addLayer(e)}),a.removedNodes.forEach(function(a){var e=t.getLayer(a.dataset._leafletId);t.removeLayer(e),d.removeLayer(e)})})}).observe(t,{childList:!0}),t.querySelectorAll(a("marker")).forEach(function(t){var e=t.dataset.latLng,o=t.dataset.opacity,n={opacity:parseFloat(void 0===o?"1.0":o)},l=L.marker(JSON.parse(e),n).addTo(d);t.dataset._leafletId=L.stamp(l),new MutationObserver(function(a){a.forEach(function(a){l.setLatLng(JSON.parse(a.target.dataset.latLng))})}).observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll(a("popup")).forEach(function(a){l.bindPopup(a.dataset.content),new MutationObserver(function(){l.getPopup().setContent(a.dataset.content)}).observe(a,{attributes:!0,attributeFilter:["data-content"]})}),r.push(l)}),o[e]=L.layerGroup(r)}),L.control.layers(r,o).addTo(d)})})});export{r as default};
 //# sourceMappingURL=leaflet-html.esm.js.map

package/dist/leaflet-html.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaflet-html.esm.js","sources":["../src/index.js"],"sourcesContent":["const render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(\"[data-leaflet-html]\").forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.control.layers\n    el.querySelectorAll(\"[data-control-layers]\").forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(\"[data-tile-layer]\").forEach((tileEl) => {\n        const { show, urlTemplate, attribution, maxZoom, name } =\n          tileEl.dataset;\n        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(\"[data-layer-group]\").forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(\"[data-marker]\").forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          console.log(options);\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(\"[data-popup]\").forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["init","document","addEventListener","querySelectorAll","forEach","el","_el$dataset","dataset","center","zoom","map","L","setView","JSON","parse","parseInt","baseMaps","tileEl","_tileEl$dataset","show","name","tileLayer","urlTemplate","maxZoom","attribution","addTo","overlayMaps","layers","MutationObserver","mutations","group","mutation","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","observe","childList","_el$dataset$opacity","opacity","options","parseFloat","console","log","stamp","setLatLng","target","attributes","attributeFilter","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"AAAA,IA4FMA,OACJC,SAASC,iBAAiB,mBA7Fb,WAEbD,SAASE,iBAAiB,uBAAuBC,QAAQ,SAACC,GACxD,IAAAC,EAAyBD,EAAGE,QAApBC,EAAMF,EAANE,OAAQC,EAAIH,EAAJG,KACVC,EAAMC,EAAED,IAAIL,GAAIO,QAAQC,KAAKC,MAAMN,GAASO,SAASN,IAG3DJ,EAAGF,iBAAiB,yBAAyBC,QAAQ,SAACC,GACpD,IAAMW,EAAW,GAGjBX,EAAGF,iBAAiB,qBAAqBC,QAAQ,SAACa,GAChD,IAAAC,EACED,EAAOV,QADDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KAEjDJ,EAASI,GAAQT,EAAEU,UAFMH,EAAXI,YAE4B,CAAEC,QAFGL,EAAPK,QAEaC,YAFfN,EAAXM,cAGf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAA,EAEpBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAAUC,GAC9C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAC2B,GACjBA,EAASC,WAAW5B,QAAQ,SAAC6B,GAC3B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAC6B,GAC7B,IACMC,EAAQJ,EAAMS,SADGN,EAAK1B,QAApBiC,YAERV,EAAMW,YAAYP,GAElBxB,EAAI+B,YAAYP,EAClB,EACF,EACF,GACSQ,QAAQrC,EAAI,CAAEsC,WAAW,IAGlCtC,EAAGF,iBAAiB,iBAAiBC,QAAQ,SAACC,GAC5C,IAAQ+B,EAAW/B,EAAGE,QAAd6B,OACRQ,EAA4BvC,EAAGE,QAAvBsC,QACFC,EAAU,CAAED,QAASE,gBADT,IAAHH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAAUC,GAC9CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACF,GACSM,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,kBAIpBjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,iBAEtB,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF"}
+{"version":3,"file":"leaflet-html.esm.js","sources":["../src/index.js"],"sourcesContent":["// @ts-check\n\n// Helpers\nconst selector = (noun) => `[data-${noun}]`;\n\n/**\n * Parse L.tileLayer args from element attributes\n */\nconst parseTileLayer = (el) => {\n  const { urlTemplate } = el.dataset;\n  const {\n    attribution = null,\n    maxZoom = \"18\",\n    minZoom = \"0\",\n    subdomains = \"abc\",\n  } = el.dataset;\n  const options = { attribution, maxZoom, minZoom, subdomains };\n  return [urlTemplate, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseImageOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  bounds = JSON.parse(bounds);\n  const { opacity } = el.dataset;\n  const options = { opacity: parseFloat(opacity) };\n  return [url, bounds, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseVideoOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  url = JSON.parse(url);\n  bounds = JSON.parse(bounds);\n  const {\n    opacity,\n    errorOverlayUrl,\n    autoplay = true,\n    muted = true,\n    playsInline = true,\n  } = el.dataset;\n  const options = {\n    opacity: parseFloat(opacity),\n    errorOverlayUrl,\n    autoplay,\n    muted,\n    playsInline,\n  };\n  return [url, bounds, options];\n};\n\n/**\n * @param {HTMLElement} el\n */\nconst parseLatLngBounds = (el) => {\n  let { bounds } = el.dataset;\n  if (typeof bounds === \"undefined\") {\n    throw Error(\"data-bounds not specified\")\n  }\n  return [JSON.parse(bounds)];\n}\n\nconst render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(selector(\"leaflet-html\")).forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.latLngBounds\n    el.querySelectorAll(selector(\"lat-lng-bounds\")).forEach((el) => {\n      const bounds = L.latLngBounds(...parseLatLngBounds(el))\n      // TODO: encapsulate this design pattern\n      const observer = new MutationObserver(function (mutations) {\n        mutations.forEach((mutation) => {\n          let [bounds] = parseLatLngBounds(mutation.target)\n          map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds\n        });\n      });\n      observer.observe(el, {\n        attributes: true,\n        attributeFilter: [\"data-bounds\"],\n      });\n      map.fitBounds(bounds)\n    })\n\n    // L.tileLayers\n    el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n      L.tileLayer(...parseTileLayer(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"image-overlay\")).forEach((el) => {\n      L.imageOverlay(...parseImageOverlay(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"video-overlay\")).forEach((el) => {\n      L.videoOverlay(...parseVideoOverlay(el)).addTo(map);\n    });\n\n    // L.control.layers\n    el.querySelectorAll(selector(\"control-layers\")).forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n        const { name, show } = el.dataset;\n        baseMaps[name] = L.tileLayer(...parseTileLayer(el));\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(selector(\"layer-group\")).forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(selector(\"marker\")).forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(selector(\"popup\")).forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["selector","noun","parseTileLayer","el","_el$dataset","dataset","_el$dataset$attributi","attribution","_el$dataset$maxZoom","maxZoom","_el$dataset$minZoom","minZoom","_el$dataset$subdomain","subdomains","urlTemplate","parseLatLngBounds","bounds","Error","JSON","parse","init","document","addEventListener","querySelectorAll","forEach","_el$dataset5","center","zoom","map","L","setView","parseInt","_L","latLngBounds","apply","MutationObserver","mutations","mutation","_parseLatLngBounds","target","flyToBounds","observe","attributes","attributeFilter","fitBounds","_L2","tileLayer","addTo","_L3","imageOverlay","_el$dataset2","url","opacity","parseFloat","parseImageOverlay","_L4","videoOverlay","_el$dataset3","_el$dataset4","errorOverlayUrl","_el$dataset4$autoplay","autoplay","_el$dataset4$muted","muted","_el$dataset4$playsInl","playsInline","parseVideoOverlay","baseMaps","_L5","_el$dataset6","name","show","overlayMaps","layers","group","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","childList","_el$dataset$opacity","options","stamp","setLatLng","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"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"}

package/dist/leaflet-html.js

@@ -1,2 +1,2 @@
-const t=void document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[data-leaflet-html]").forEach(t=>{const{center:e,zoom:a}=t.dataset,o=L.map(t).setView(JSON.parse(e),parseInt(a));t.querySelectorAll("[data-control-layers]").forEach(t=>{const e={};t.querySelectorAll("[data-tile-layer]").forEach(t=>{const{show:a,urlTemplate:r,attribution:n,maxZoom:s,name:l}=t.dataset;e[l]=L.tileLayer(r,{maxZoom:s,attribution:n}),null!=a&&e[l].addTo(o)});const a={};t.querySelectorAll("[data-layer-group]").forEach(t=>{const{name:e}=t.dataset,r=[];new MutationObserver(function(t){const r=a[e];t.forEach(t=>{t.addedNodes.forEach(t=>{const{latLng:e}=t.dataset,a=L.marker(JSON.parse(e));r.addLayer(a),o.addLayer(a)}),t.removedNodes.forEach(t=>{const{_leafletId:e}=t.dataset,a=r.getLayer(e);r.removeLayer(a),o.removeLayer(a)})})}).observe(t,{childList:!0}),t.querySelectorAll("[data-marker]").forEach(t=>{const{latLng:e}=t.dataset,{opacity:a="1.0"}=t.dataset,n={opacity:parseFloat(a)};console.log(n);const s=L.marker(JSON.parse(e),n).addTo(o);t.dataset._leafletId=L.stamp(s);const l=new MutationObserver(function(t){t.forEach(t=>{const{latLng:e}=t.target.dataset;s.setLatLng(JSON.parse(e))})});l.observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll("[data-popup]").forEach(t=>{const{content:e}=t.dataset;s.bindPopup(e),new MutationObserver(function(){s.getPopup().setContent(t.dataset.content)}).observe(t,{attributes:!0,attributeFilter:["data-content"]})}),r.push(s)}),a[e]=L.layerGroup(r)}),L.control.layers(e,a).addTo(o)})})});export{t as default};
+const t=t=>`[data-${t}]`,e=t=>{const{urlTemplate:e}=t.dataset,{attribution:a=null,maxZoom:o="18",minZoom:r="0",subdomains:l="abc"}=t.dataset;return[e,{attribution:a,maxZoom:o,minZoom:r,subdomains:l}]},a=t=>{let{bounds:e}=t.dataset;if(void 0===e)throw Error("data-bounds not specified");return[JSON.parse(e)]},o=void document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll(t("leaflet-html")).forEach(o=>{const{center:r,zoom:l}=o.dataset,n=L.map(o).setView(JSON.parse(r),parseInt(l));o.querySelectorAll(t("lat-lng-bounds")).forEach(t=>{const e=L.latLngBounds(...a(t)),o=new MutationObserver(function(t){t.forEach(t=>{let[e]=a(t.target);n.flyToBounds(e)})});o.observe(t,{attributes:!0,attributeFilter:["data-bounds"]}),n.fitBounds(e)}),o.querySelectorAll(t("tile-layer")).forEach(t=>{L.tileLayer(...e(t)).addTo(n)}),o.querySelectorAll(t("image-overlay")).forEach(t=>{L.imageOverlay(...(t=>{let{url:e,bounds:a}=t.dataset;a=JSON.parse(a);const{opacity:o}=t.dataset;return[e,a,{opacity:parseFloat(o)}]})(t)).addTo(n)}),o.querySelectorAll(t("video-overlay")).forEach(t=>{L.videoOverlay(...(t=>{let{url:e,bounds:a}=t.dataset;e=JSON.parse(e),a=JSON.parse(a);const{opacity:o,errorOverlayUrl:r,autoplay:l=!0,muted:n=!0,playsInline:s=!0}=t.dataset;return[e,a,{opacity:parseFloat(o),errorOverlayUrl:r,autoplay:l,muted:n,playsInline:s}]})(t)).addTo(n)}),o.querySelectorAll(t("control-layers")).forEach(a=>{const o={};a.querySelectorAll(t("tile-layer")).forEach(t=>{const{name:a,show:r}=t.dataset;o[a]=L.tileLayer(...e(t)),null!=r&&o[a].addTo(n)});const r={};a.querySelectorAll(t("layer-group")).forEach(e=>{const{name:a}=e.dataset,o=[];new MutationObserver(function(t){const e=r[a];t.forEach(t=>{t.addedNodes.forEach(t=>{const{latLng:a}=t.dataset,o=L.marker(JSON.parse(a));e.addLayer(o),n.addLayer(o)}),t.removedNodes.forEach(t=>{const{_leafletId:a}=t.dataset,o=e.getLayer(a);e.removeLayer(o),n.removeLayer(o)})})}).observe(e,{childList:!0}),e.querySelectorAll(t("marker")).forEach(e=>{const{latLng:a}=e.dataset,{opacity:r="1.0"}=e.dataset,l={opacity:parseFloat(r)},s=L.marker(JSON.parse(a),l).addTo(n);e.dataset._leafletId=L.stamp(s);const d=new MutationObserver(function(t){t.forEach(t=>{const{latLng:e}=t.target.dataset;s.setLatLng(JSON.parse(e))})});d.observe(e,{attributes:!0,attributeFilter:["data-lat-lng"]}),e.querySelectorAll(t("popup")).forEach(t=>{const{content:e}=t.dataset;s.bindPopup(e),new MutationObserver(function(){s.getPopup().setContent(t.dataset.content)}).observe(t,{attributes:!0,attributeFilter:["data-content"]})}),o.push(s)}),r[a]=L.layerGroup(o)}),L.control.layers(o,r).addTo(n)})})});export{o as default};
 //# sourceMappingURL=leaflet-html.js.map

package/dist/leaflet-html.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaflet-html.js","sources":["../src/index.js"],"sourcesContent":["const render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(\"[data-leaflet-html]\").forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.control.layers\n    el.querySelectorAll(\"[data-control-layers]\").forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(\"[data-tile-layer]\").forEach((tileEl) => {\n        const { show, urlTemplate, attribution, maxZoom, name } =\n          tileEl.dataset;\n        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(\"[data-layer-group]\").forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(\"[data-marker]\").forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          console.log(options);\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(\"[data-popup]\").forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["init","document","addEventListener","render","querySelectorAll","forEach","el","center","zoom","dataset","map","L","setView","JSON","parse","parseInt","baseMaps","tileEl","show","urlTemplate","attribution","maxZoom","name","tileLayer","addTo","overlayMaps","layers","MutationObserver","mutations","group","mutation","addedNodes","node","latLng","layer","marker","addLayer","removedNodes","_leafletId","getLayer","removeLayer","observe","childList","opacity","options","parseFloat","console","log","stamp","observer","target","setLatLng","attributes","attributeFilter","content","bindPopup","getPopup","setContent","push","layerGroup","control"],"mappings":"AAAA,MA4FMA,OACJC,SAASC,iBAAiB,mBA7FbC,KAEbF,SAASG,iBAAiB,uBAAuBC,QAASC,IACxD,MAAMC,OAAEA,EAAMC,KAAEA,GAASF,EAAGG,QACtBC,EAAMC,EAAED,IAAIJ,GAAIM,QAAQC,KAAKC,MAAMP,GAASQ,SAASP,IAG3DF,EAAGF,iBAAiB,yBAAyBC,QAASC,IACpD,MAAMU,EAAW,CAAA,EAGjBV,EAAGF,iBAAiB,qBAAqBC,QAASY,IAChD,MAAMC,KAAEA,EAAIC,YAAEA,EAAWC,YAAEA,EAAWC,QAAEA,EAAOC,KAAEA,GAC/CL,EAAOR,QACTO,EAASM,GAAQX,EAAEY,UAAUJ,EAAa,CAAEE,UAASD,gBACzC,MAARF,GACFF,EAASM,GAAME,MAAMd,EACvB,GAGF,MAAMe,EAAc,CAAA,EAEpBnB,EAAGF,iBAAiB,sBAAsBC,QAASC,IACjD,MAAMgB,KAAEA,GAAShB,EAAGG,QACdiB,EAAS,GAEE,IAAIC,iBAAiB,SAAUC,GAC9C,MAAMC,EAAQJ,EAAYH,GAE1BM,EAAUvB,QAASyB,IACjBA,EAASC,WAAW1B,QAAS2B,IAC3B,MAAMC,OAAEA,GAAWD,EAAKvB,QAClByB,EAAQvB,EAAEwB,OAAOtB,KAAKC,MAAMmB,IAClCJ,EAAMO,SAASF,GACfxB,EAAI0B,SAASF,EAAK,GAGpBJ,EAASO,aAAahC,QAAS2B,IAC7B,MAAMM,WAAEA,GAAeN,EAAKvB,QACtByB,EAAQL,EAAMU,SAASD,GAC7BT,EAAMW,YAAYN,GAElBxB,EAAI8B,YAAYN,EAClB,IAEJ,GACSO,QAAQnC,EAAI,CAAEoC,WAAW,IAGlCpC,EAAGF,iBAAiB,iBAAiBC,QAASC,IAC5C,MAAM2B,OAAEA,GAAW3B,EAAGG,SAChBkC,QAAEA,EAAU,OAAUrC,EAAGG,QACzBmC,EAAU,CAAED,QAASE,WAAWF,IACtCG,QAAQC,IAAIH,GACZ,MAAMT,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMmB,GAASW,GAASpB,MAAMd,GAC3DJ,EAAGG,QAAQ6B,WAAa3B,EAAEqC,MAAMb,GAEhC,MAAMc,EAAW,IAAItB,iBAAiB,SAAUC,GAC9CA,EAAUvB,QAASyB,IACjB,MAAMG,OAAEA,GAAWH,EAASoB,OAAOzC,QACnC0B,EAAOgB,UAAUtC,KAAKC,MAAMmB,GAAO,EAEvC,GACAgB,EAASR,QAAQnC,EAAI,CACnB8C,YAAY,EACZC,gBAAiB,CAAC,kBAIpB/C,EAAGF,iBAAiB,gBAAgBC,QAASC,IAC3C,MAAMgD,QAAEA,GAAYhD,EAAGG,QACvB0B,EAAOoB,UAAUD,GACA,IAAI3B,iBAAiB,WACpCQ,EAAOqB,WAAWC,WAAWnD,EAAGG,QAAQ6C,QAC1C,GACSb,QAAQnC,EAAI,CACnB8C,YAAY,EACZC,gBAAiB,CAAC,iBACnB,GAGH3B,EAAOgC,KAAKvB,EAAM,GAGpBV,EAAYH,GAAQX,EAAEgD,WAAWjC,EAAM,GAGzCf,EAAEiD,QAAQlC,OAAOV,EAAUS,GAAaD,MAAMd,EAAG,EAErD,EACF"}
+{"version":3,"file":"leaflet-html.js","sources":["../src/index.js"],"sourcesContent":["// @ts-check\n\n// Helpers\nconst selector = (noun) => `[data-${noun}]`;\n\n/**\n * Parse L.tileLayer args from element attributes\n */\nconst parseTileLayer = (el) => {\n  const { urlTemplate } = el.dataset;\n  const {\n    attribution = null,\n    maxZoom = \"18\",\n    minZoom = \"0\",\n    subdomains = \"abc\",\n  } = el.dataset;\n  const options = { attribution, maxZoom, minZoom, subdomains };\n  return [urlTemplate, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseImageOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  bounds = JSON.parse(bounds);\n  const { opacity } = el.dataset;\n  const options = { opacity: parseFloat(opacity) };\n  return [url, bounds, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseVideoOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  url = JSON.parse(url);\n  bounds = JSON.parse(bounds);\n  const {\n    opacity,\n    errorOverlayUrl,\n    autoplay = true,\n    muted = true,\n    playsInline = true,\n  } = el.dataset;\n  const options = {\n    opacity: parseFloat(opacity),\n    errorOverlayUrl,\n    autoplay,\n    muted,\n    playsInline,\n  };\n  return [url, bounds, options];\n};\n\n/**\n * @param {HTMLElement} el\n */\nconst parseLatLngBounds = (el) => {\n  let { bounds } = el.dataset;\n  if (typeof bounds === \"undefined\") {\n    throw Error(\"data-bounds not specified\")\n  }\n  return [JSON.parse(bounds)];\n}\n\nconst render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(selector(\"leaflet-html\")).forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.latLngBounds\n    el.querySelectorAll(selector(\"lat-lng-bounds\")).forEach((el) => {\n      const bounds = L.latLngBounds(...parseLatLngBounds(el))\n      // TODO: encapsulate this design pattern\n      const observer = new MutationObserver(function (mutations) {\n        mutations.forEach((mutation) => {\n          let [bounds] = parseLatLngBounds(mutation.target)\n          map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds\n        });\n      });\n      observer.observe(el, {\n        attributes: true,\n        attributeFilter: [\"data-bounds\"],\n      });\n      map.fitBounds(bounds)\n    })\n\n    // L.tileLayers\n    el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n      L.tileLayer(...parseTileLayer(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"image-overlay\")).forEach((el) => {\n      L.imageOverlay(...parseImageOverlay(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"video-overlay\")).forEach((el) => {\n      L.videoOverlay(...parseVideoOverlay(el)).addTo(map);\n    });\n\n    // L.control.layers\n    el.querySelectorAll(selector(\"control-layers\")).forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n        const { name, show } = el.dataset;\n        baseMaps[name] = L.tileLayer(...parseTileLayer(el));\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(selector(\"layer-group\")).forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(selector(\"marker\")).forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(selector(\"popup\")).forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["selector","noun","parseTileLayer","el","urlTemplate","dataset","attribution","maxZoom","minZoom","subdomains","parseLatLngBounds","bounds","Error","JSON","parse","init","document","addEventListener","render","querySelectorAll","forEach","center","zoom","map","L","setView","parseInt","latLngBounds","observer","MutationObserver","mutations","mutation","target","flyToBounds","observe","attributes","attributeFilter","fitBounds","tileLayer","addTo","imageOverlay","url","opacity","parseFloat","parseImageOverlay","videoOverlay","errorOverlayUrl","autoplay","muted","playsInline","parseVideoOverlay","baseMaps","name","show","overlayMaps","layers","group","addedNodes","node","latLng","layer","marker","addLayer","removedNodes","_leafletId","getLayer","removeLayer","childList","options","stamp","setLatLng","content","bindPopup","getPopup","setContent","push","layerGroup","control"],"mappings":"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"}

package/dist/leaflet-html.umd.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).leafletHtml=t()}(this,function(){document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll("[data-leaflet-html]").forEach(function(e){var t=e.dataset,a=t.center,o=t.zoom,r=L.map(e).setView(JSON.parse(a),parseInt(o));e.querySelectorAll("[data-control-layers]").forEach(function(e){var t={};e.querySelectorAll("[data-tile-layer]").forEach(function(e){var a=e.dataset,o=a.show,n=a.name;t[n]=L.tileLayer(a.urlTemplate,{maxZoom:a.maxZoom,attribution:a.attribution}),null!=o&&t[n].addTo(r)});var a={};e.querySelectorAll("[data-layer-group]").forEach(function(e){var t=e.dataset.name,o=[];new MutationObserver(function(e){var o=a[t];e.forEach(function(e){e.addedNodes.forEach(function(e){var t=L.marker(JSON.parse(e.dataset.latLng));o.addLayer(t),r.addLayer(t)}),e.removedNodes.forEach(function(e){var t=o.getLayer(e.dataset._leafletId);o.removeLayer(t),r.removeLayer(t)})})}).observe(e,{childList:!0}),e.querySelectorAll("[data-marker]").forEach(function(e){var t=e.dataset.latLng,a=e.dataset.opacity,n={opacity:parseFloat(void 0===a?"1.0":a)};console.log(n);var l=L.marker(JSON.parse(t),n).addTo(r);e.dataset._leafletId=L.stamp(l),new MutationObserver(function(e){e.forEach(function(e){l.setLatLng(JSON.parse(e.target.dataset.latLng))})}).observe(e,{attributes:!0,attributeFilter:["data-lat-lng"]}),e.querySelectorAll("[data-popup]").forEach(function(e){l.bindPopup(e.dataset.content),new MutationObserver(function(){l.getPopup().setContent(e.dataset.content)}).observe(e,{attributes:!0,attributeFilter:["data-content"]})}),o.push(l)}),a[t]=L.layerGroup(o)}),L.control.layers(t,a).addTo(r)})})})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).leafletHtml=t()}(this,function(){var e=function(e){return"[data-"+e+"]"},t=function(e){var t=e.dataset,a=t.attribution,o=t.maxZoom,r=t.minZoom,n=t.subdomains;return[e.dataset.urlTemplate,{attribution:void 0===a?null:a,maxZoom:void 0===o?"18":o,minZoom:void 0===r?"0":r,subdomains:void 0===n?"abc":n}]},a=function(e){var t=e.dataset.bounds;if(void 0===t)throw Error("data-bounds not specified");return[JSON.parse(t)]};document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(e("leaflet-html")).forEach(function(o){var r=o.dataset,n=r.center,l=r.zoom,i=L.map(o).setView(JSON.parse(n),parseInt(l));o.querySelectorAll(e("lat-lng-bounds")).forEach(function(e){var t,o=(t=L).latLngBounds.apply(t,a(e));new MutationObserver(function(e){e.forEach(function(e){var t=a(e.target);i.flyToBounds(t[0])})}).observe(e,{attributes:!0,attributeFilter:["data-bounds"]}),i.fitBounds(o)}),o.querySelectorAll(e("tile-layer")).forEach(function(e){var a;(a=L).tileLayer.apply(a,t(e)).addTo(i)}),o.querySelectorAll(e("image-overlay")).forEach(function(e){var t;(t=L).imageOverlay.apply(t,function(e){var t=e.dataset,a=t.bounds;return[t.url,a=JSON.parse(a),{opacity:parseFloat(e.dataset.opacity)}]}(e)).addTo(i)}),o.querySelectorAll(e("video-overlay")).forEach(function(e){var t;(t=L).videoOverlay.apply(t,function(e){var t=e.dataset,a=t.url,o=t.bounds;a=JSON.parse(a),o=JSON.parse(o);var r=e.dataset,n=r.errorOverlayUrl,l=r.autoplay,i=void 0===l||l,d=r.muted,u=void 0===d||d,s=r.playsInline,c=void 0===s||s;return[a,o,{opacity:parseFloat(r.opacity),errorOverlayUrl:n,autoplay:i,muted:u,playsInline:c}]}(e)).addTo(i)}),o.querySelectorAll(e("control-layers")).forEach(function(a){var o={};a.querySelectorAll(e("tile-layer")).forEach(function(e){var a,r=e.dataset,n=r.name,l=r.show;o[n]=(a=L).tileLayer.apply(a,t(e)),null!=l&&o[n].addTo(i)});var r={};a.querySelectorAll(e("layer-group")).forEach(function(t){var a=t.dataset.name,o=[];new MutationObserver(function(e){var t=r[a];e.forEach(function(e){e.addedNodes.forEach(function(e){var a=L.marker(JSON.parse(e.dataset.latLng));t.addLayer(a),i.addLayer(a)}),e.removedNodes.forEach(function(e){var a=t.getLayer(e.dataset._leafletId);t.removeLayer(a),i.removeLayer(a)})})}).observe(t,{childList:!0}),t.querySelectorAll(e("marker")).forEach(function(t){var a=t.dataset.latLng,r=t.dataset.opacity,n={opacity:parseFloat(void 0===r?"1.0":r)},l=L.marker(JSON.parse(a),n).addTo(i);t.dataset._leafletId=L.stamp(l),new MutationObserver(function(e){e.forEach(function(e){l.setLatLng(JSON.parse(e.target.dataset.latLng))})}).observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll(e("popup")).forEach(function(e){l.bindPopup(e.dataset.content),new MutationObserver(function(){l.getPopup().setContent(e.dataset.content)}).observe(e,{attributes:!0,attributeFilter:["data-content"]})}),o.push(l)}),r[a]=L.layerGroup(o)}),L.control.layers(o,r).addTo(i)})})})});
 //# sourceMappingURL=leaflet-html.umd.js.map

package/dist/leaflet-html.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"leaflet-html.umd.js","sources":["../src/index.js"],"sourcesContent":["const render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(\"[data-leaflet-html]\").forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.control.layers\n    el.querySelectorAll(\"[data-control-layers]\").forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(\"[data-tile-layer]\").forEach((tileEl) => {\n        const { show, urlTemplate, attribution, maxZoom, name } =\n          tileEl.dataset;\n        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(\"[data-layer-group]\").forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(\"[data-marker]\").forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          console.log(options);\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(\"[data-popup]\").forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["document","addEventListener","querySelectorAll","forEach","el","_el$dataset","dataset","center","zoom","map","L","setView","JSON","parse","parseInt","baseMaps","tileEl","_tileEl$dataset","show","name","tileLayer","urlTemplate","maxZoom","attribution","addTo","overlayMaps","layers","MutationObserver","mutations","group","mutation","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","observe","childList","_el$dataset$opacity","opacity","options","parseFloat","console","log","stamp","setLatLng","target","attributes","attributeFilter","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"8NA6FEA,SAASC,iBAAiB,mBA7Fb,WAEbD,SAASE,iBAAiB,uBAAuBC,QAAQ,SAACC,GACxD,IAAAC,EAAyBD,EAAGE,QAApBC,EAAMF,EAANE,OAAQC,EAAIH,EAAJG,KACVC,EAAMC,EAAED,IAAIL,GAAIO,QAAQC,KAAKC,MAAMN,GAASO,SAASN,IAG3DJ,EAAGF,iBAAiB,yBAAyBC,QAAQ,SAACC,GACpD,IAAMW,EAAW,GAGjBX,EAAGF,iBAAiB,qBAAqBC,QAAQ,SAACa,GAChD,IAAAC,EACED,EAAOV,QADDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KAEjDJ,EAASI,GAAQT,EAAEU,UAFMH,EAAXI,YAE4B,CAAEC,QAFGL,EAAPK,QAEaC,YAFfN,EAAXM,cAGf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAA,EAEpBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAAUC,GAC9C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAC2B,GACjBA,EAASC,WAAW5B,QAAQ,SAAC6B,GAC3B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAC6B,GAC7B,IACMC,EAAQJ,EAAMS,SADGN,EAAK1B,QAApBiC,YAERV,EAAMW,YAAYP,GAElBxB,EAAI+B,YAAYP,EAClB,EACF,EACF,GACSQ,QAAQrC,EAAI,CAAEsC,WAAW,IAGlCtC,EAAGF,iBAAiB,iBAAiBC,QAAQ,SAACC,GAC5C,IAAQ+B,EAAW/B,EAAGE,QAAd6B,OACRQ,EAA4BvC,EAAGE,QAAvBsC,QACFC,EAAU,CAAED,QAASE,gBADT,IAAHH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAAUC,GAC9CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACF,GACSM,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,kBAIpBjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CACnBgD,YAAY,EACZC,gBAAiB,CAAC,iBAEtB,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF"}
+{"version":3,"file":"leaflet-html.umd.js","sources":["../src/index.js"],"sourcesContent":["// @ts-check\n\n// Helpers\nconst selector = (noun) => `[data-${noun}]`;\n\n/**\n * Parse L.tileLayer args from element attributes\n */\nconst parseTileLayer = (el) => {\n  const { urlTemplate } = el.dataset;\n  const {\n    attribution = null,\n    maxZoom = \"18\",\n    minZoom = \"0\",\n    subdomains = \"abc\",\n  } = el.dataset;\n  const options = { attribution, maxZoom, minZoom, subdomains };\n  return [urlTemplate, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseImageOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  bounds = JSON.parse(bounds);\n  const { opacity } = el.dataset;\n  const options = { opacity: parseFloat(opacity) };\n  return [url, bounds, options];\n};\n\n/**\n * Parse L.imageOverlay args from element attributes\n */\nconst parseVideoOverlay = (el) => {\n  let { url, bounds } = el.dataset;\n  url = JSON.parse(url);\n  bounds = JSON.parse(bounds);\n  const {\n    opacity,\n    errorOverlayUrl,\n    autoplay = true,\n    muted = true,\n    playsInline = true,\n  } = el.dataset;\n  const options = {\n    opacity: parseFloat(opacity),\n    errorOverlayUrl,\n    autoplay,\n    muted,\n    playsInline,\n  };\n  return [url, bounds, options];\n};\n\n/**\n * @param {HTMLElement} el\n */\nconst parseLatLngBounds = (el) => {\n  let { bounds } = el.dataset;\n  if (typeof bounds === \"undefined\") {\n    throw Error(\"data-bounds not specified\")\n  }\n  return [JSON.parse(bounds)];\n}\n\nconst render = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(selector(\"leaflet-html\")).forEach((el) => {\n    const { center, zoom } = el.dataset;\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));\n\n    // L.latLngBounds\n    el.querySelectorAll(selector(\"lat-lng-bounds\")).forEach((el) => {\n      const bounds = L.latLngBounds(...parseLatLngBounds(el))\n      // TODO: encapsulate this design pattern\n      const observer = new MutationObserver(function (mutations) {\n        mutations.forEach((mutation) => {\n          let [bounds] = parseLatLngBounds(mutation.target)\n          map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds\n        });\n      });\n      observer.observe(el, {\n        attributes: true,\n        attributeFilter: [\"data-bounds\"],\n      });\n      map.fitBounds(bounds)\n    })\n\n    // L.tileLayers\n    el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n      L.tileLayer(...parseTileLayer(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"image-overlay\")).forEach((el) => {\n      L.imageOverlay(...parseImageOverlay(el)).addTo(map);\n    });\n\n    el.querySelectorAll(selector(\"video-overlay\")).forEach((el) => {\n      L.videoOverlay(...parseVideoOverlay(el)).addTo(map);\n    });\n\n    // L.control.layers\n    el.querySelectorAll(selector(\"control-layers\")).forEach((el) => {\n      const baseMaps = {};\n\n      // L.tileLayers\n      el.querySelectorAll(selector(\"tile-layer\")).forEach((el) => {\n        const { name, show } = el.dataset;\n        baseMaps[name] = L.tileLayer(...parseTileLayer(el));\n        if (show != null) {\n          baseMaps[name].addTo(map);\n        }\n      });\n\n      const overlayMaps = {};\n      // L.layerGroup\n      el.querySelectorAll(selector(\"layer-group\")).forEach((el) => {\n        const { name } = el.dataset;\n        const layers = [];\n\n        const observer = new MutationObserver(function (mutations) {\n          const group = overlayMaps[name];\n\n          mutations.forEach((mutation) => {\n            mutation.addedNodes.forEach((node) => {\n              const { latLng } = node.dataset; // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng));\n              group.addLayer(layer);\n              map.addLayer(layer);\n            });\n\n            mutation.removedNodes.forEach((node) => {\n              const { _leafletId } = node.dataset;\n              const layer = group.getLayer(_leafletId);\n              group.removeLayer(layer);\n\n              map.removeLayer(layer);\n            });\n          });\n        });\n        observer.observe(el, { childList: true });\n\n        // L.marker\n        el.querySelectorAll(selector(\"marker\")).forEach((el) => {\n          const { latLng } = el.dataset;\n          const { opacity = \"1.0\" } = el.dataset;\n          const options = { opacity: parseFloat(opacity) };\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map);\n          el.dataset._leafletId = L.stamp(marker); // Save ID for later\n\n          const observer = new MutationObserver(function (mutations) {\n            mutations.forEach((mutation) => {\n              const { latLng } = mutation.target.dataset;\n              marker.setLatLng(JSON.parse(latLng));\n            });\n          });\n          observer.observe(el, {\n            attributes: true,\n            attributeFilter: [\"data-lat-lng\"],\n          });\n\n          // marker.bindPopup\n          el.querySelectorAll(selector(\"popup\")).forEach((el) => {\n            const { content } = el.dataset;\n            marker.bindPopup(content);\n            const observer = new MutationObserver(function () {\n              marker.getPopup().setContent(el.dataset.content);\n            });\n            observer.observe(el, {\n              attributes: true,\n              attributeFilter: [\"data-content\"],\n            });\n          });\n\n          layers.push(marker);\n        });\n\n        overlayMaps[name] = L.layerGroup(layers);\n      });\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map);\n    });\n  });\n};\n\nconst init = (() => {\n  document.addEventListener(\"DOMContentLoaded\", render);\n})();\n\nexport default init;\n"],"names":["selector","noun","parseTileLayer","el","_el$dataset","dataset","_el$dataset$attributi","attribution","_el$dataset$maxZoom","maxZoom","_el$dataset$minZoom","minZoom","_el$dataset$subdomain","subdomains","urlTemplate","parseLatLngBounds","bounds","Error","JSON","parse","document","addEventListener","querySelectorAll","forEach","_el$dataset5","center","zoom","map","L","setView","parseInt","_L","latLngBounds","apply","MutationObserver","mutations","mutation","_parseLatLngBounds","target","flyToBounds","observe","attributes","attributeFilter","fitBounds","_L2","tileLayer","addTo","_L3","imageOverlay","_el$dataset2","url","opacity","parseFloat","parseImageOverlay","_L4","videoOverlay","_el$dataset3","_el$dataset4","errorOverlayUrl","_el$dataset4$autoplay","autoplay","_el$dataset4$muted","muted","_el$dataset4$playsInl","playsInline","parseVideoOverlay","baseMaps","_L5","_el$dataset6","name","show","overlayMaps","layers","group","addedNodes","node","layer","marker","latLng","addLayer","removedNodes","getLayer","_leafletId","removeLayer","childList","_el$dataset$opacity","options","stamp","setLatLng","bindPopup","content","getPopup","setContent","push","layerGroup","control"],"mappings":"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"}

package/docs/config.toml

@@ -0,0 +1,16 @@
+# The URL the site will be built for
+base_url = "https://andrewgryan.github.io/leaflet-html"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = false
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here

package/docs/content/_index.md

@@ -0,0 +1,86 @@
++++
++++
+# Leaflet HTML
+
+[LeafletJS](https://leafletjs.com/) is a library geared towards map based visualisations.
+Leaflet HTML expresses that JavaScript API in HTML.
+
+
+## Design principles
+
+Leaflet HTML tries to model Leaflet's API as closely as possible to avoid confusion and to ease onboarding.
+Naming conventions are followed where possible.
+The hierarchy in the JS API is replicated by nesting HTML elements.
+
+## Example
+
+The following is a live running example of Leaflet HTML.
+
+<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="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]">
+          <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>
+
+
+```html
+<!-- Example -->
+<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="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]">
+          <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>
+```
+

package/docs/templates/index.html

@@ -0,0 +1,53 @@
+<!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">
+{{ section.content | safe }}
+</div>
+</body>
+</html>

package/example/index.html

@@ -15,7 +15,7 @@
       crossorigin=""
     ></script>
     <script
-      src="https://www.unpkg.com/leaflet-html@0.1.5/dist/leaflet-html.umd.js"
+      src="/dist/leaflet-html.umd.js"
       defer
     ></script>
     <style>
@@ -57,10 +57,11 @@
           ></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-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>

package/example/overlays/index.html

@@ -0,0 +1,77 @@
+<!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
+      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+    <script src="/dist/leaflet-html.umd.js"></script>
+    <style>
+      * {
+        margin: 0;
+      }
+
+      [data-leaflet-html] {
+        block-size: 100vh;
+        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>
+      <!-- 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>
+      <!-- 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>
+    <script>
+      el = document.querySelector("[data-lat-lng-bounds]")
+      let counter = 0
+      document.body.addEventListener("click", () => {
+        console.log("click")
+        if (counter === 0) {
+          const { bounds } = document.querySelector("[data-video-overlay]").dataset
+          el.dataset.bounds = bounds
+        } else {
+          const { bounds } = document.querySelector("[data-image-overlay]").dataset
+          el.dataset.bounds = bounds
+        }
+        counter += 1
+      })
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "leaflet-html",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Leaflet expressed in HTML",
   "source": "src/index.js",
   "main": "./dist/leaflet-html.js",

package/src/index.js

@@ -1,18 +1,113 @@
+// @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("[data-leaflet-html]").forEach((el) => {
+  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("[data-control-layers]").forEach((el) => {
+    el.querySelectorAll(selector("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 });
+      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);
         }
@@ -20,7 +115,7 @@ const render = () => {
 
       const overlayMaps = {};
       // L.layerGroup
-      el.querySelectorAll("[data-layer-group]").forEach((el) => {
+      el.querySelectorAll(selector("layer-group")).forEach((el) => {
         const { name } = el.dataset;
         const layers = [];
 
@@ -47,11 +142,10 @@ const render = () => {
         observer.observe(el, { childList: true });
 
         // L.marker
-        el.querySelectorAll("[data-marker]").forEach((el) => {
+        el.querySelectorAll(selector("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
 
@@ -67,7 +161,7 @@ const render = () => {
           });
 
           // marker.bindPopup
-          el.querySelectorAll("[data-popup]").forEach((el) => {
+          el.querySelectorAll(selector("popup")).forEach((el) => {
             const { content } = el.dataset;
             marker.bindPopup(content);
             const observer = new MutationObserver(function () {

package/dist/leaflet-html.modern.js

@@ -1,2 +0,0 @@
-const t=()=>{document.querySelectorAll("[data-leaflet-html]").forEach(t=>{const{center:e,zoom:a}=t.dataset,o=L.map(t).setView(JSON.parse(e),parseInt(a));t.querySelectorAll("[data-control-layers]").forEach(t=>{const e={};t.querySelectorAll("[data-tile-layer]").forEach(t=>{const{show:a,urlTemplate:r,attribution:s,maxZoom:n,name:l}=t.dataset;e[l]=L.tileLayer(r,{maxZoom:n,attribution:s}),null!=a&&e[l].addTo(o)});const a={};t.querySelectorAll("[data-layer-group]").forEach(t=>{const{name:e}=t.dataset,r=[];new MutationObserver(function(t){const r=a[e];t.forEach(t=>{t.addedNodes.forEach(t=>{const{latLng:e}=t.dataset,a=L.marker(JSON.parse(e));r.addLayer(a),o.addLayer(a)}),t.removedNodes.forEach(t=>{const{_leafletId:e}=t.dataset,a=r.getLayer(e);r.removeLayer(a),o.removeLayer(a)})})}).observe(t,{childList:!0}),t.querySelectorAll("[data-marker]").forEach(t=>{const{latLng:e}=t.dataset,{opacity:a="1.0"}=t.dataset,s={opacity:parseFloat(a)};console.log(s);const n=L.marker(JSON.parse(e),s).addTo(o);t.dataset._leafletId=L.stamp(n);const l=new MutationObserver(function(t){t.forEach(t=>{const{latLng:e}=t.target.dataset;n.setLatLng(JSON.parse(e))})});l.observe(t,{attributes:!0,attributeFilter:["data-lat-lng"]}),t.querySelectorAll("[data-popup]").forEach(t=>{const{content:e}=t.dataset;n.bindPopup(e),new MutationObserver(function(){n.getPopup().setContent(t.dataset.content)}).observe(t,{attributes:!0,attributeFilter:["data-content"]})}),r.push(n)}),a[e]=L.layerGroup(r)}),L.control.layers(e,a).addTo(o)})})};export{t as default};
-//# sourceMappingURL=leaflet-html.modern.js.map

package/dist/leaflet-html.modern.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"leaflet-html.modern.js","sources":["../src/index.js"],"sourcesContent":["const init = () => {\n  // Render Leaflet API calls\n  document.querySelectorAll(\"[data-leaflet-html]\").forEach((el) => {\n    const { center, zoom } = el.dataset\n    const map = L.map(el).setView(JSON.parse(center), parseInt(zoom))\n\n    // L.control.layers\n    el.querySelectorAll(\"[data-control-layers]\").forEach((el) => {\n      const baseMaps = {}\n    \n      // L.tileLayers\n      el.querySelectorAll(\"[data-tile-layer]\").forEach((tileEl) => {\n        const { show, urlTemplate, attribution, maxZoom, name } = tileEl.dataset\n        baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });\n        if (show != null) {\n          baseMaps[name].addTo(map)\n        }\n      })\n\n      const overlayMaps = {}\n      // L.layerGroup\n      el.querySelectorAll(\"[data-layer-group]\").forEach((el) => {\n        const { name } = el.dataset\n        const layers = []\n\n        const observer = new MutationObserver(function(mutations) {\n          const group = overlayMaps[name]\n\n          mutations.forEach(mutation => {\n            mutation.addedNodes.forEach(node => {\n              const { latLng } = node.dataset // MutationObserver needed\n              const layer = L.marker(JSON.parse(latLng))\n              group.addLayer(layer)\n              map.addLayer(layer)\n            })\n\n            mutation.removedNodes.forEach(node => {\n              const { _leafletId } = node.dataset\n              const layer = group.getLayer(_leafletId)\n              group.removeLayer(layer)\n\n              map.removeLayer(layer)\n            })\n          })\n        })\n        observer.observe(el, { childList: true })\n\n        // L.marker\n        el.querySelectorAll(\"[data-marker]\").forEach((el) => {\n          const { latLng } = el.dataset\n          const { opacity = \"1.0\" } = el.dataset\n          const options = { opacity: parseFloat(opacity) }\n          console.log(options)\n          const marker = L.marker(JSON.parse(latLng), options).addTo(map)\n          el.dataset._leafletId = L.stamp(marker) // Save ID for later\n\n          const observer = new MutationObserver(function(mutations) {\n              mutations.forEach((mutation) => {\n                const { latLng } = mutation.target.dataset\n                marker.setLatLng(JSON.parse(latLng))\n              })\n          })\n          observer.observe(el, { attributes: true, attributeFilter: [\"data-lat-lng\"] })\n\n          // marker.bindPopup\n          el.querySelectorAll(\"[data-popup]\").forEach((el) => {\n            const { content } = el.dataset\n            marker.bindPopup(content)\n            const observer = new MutationObserver(function() {\n              marker.getPopup().setContent(el.dataset.content)\n            })\n            observer.observe(el, { attributes: true, attributeFilter: [\"data-content\"] })\n          })\n\n          layers.push(marker)\n        })\n\n        overlayMaps[name] = L.layerGroup(layers)\n      })\n\n      L.control.layers(baseMaps, overlayMaps).addTo(map)\n    })\n  })\n}\n\nexport default init\n"],"names":["init","document","querySelectorAll","forEach","el","center","zoom","dataset","map","L","setView","JSON","parse","parseInt","baseMaps","tileEl","show","urlTemplate","attribution","maxZoom","name","tileLayer","addTo","overlayMaps","layers","MutationObserver","mutations","group","mutation","addedNodes","node","latLng","layer","marker","addLayer","removedNodes","_leafletId","getLayer","removeLayer","observe","childList","opacity","options","parseFloat","console","log","stamp","observer","target","setLatLng","attributes","attributeFilter","content","bindPopup","getPopup","setContent","push","layerGroup","control"],"mappings":"AAAM,MAAAA,EAAOA,KAEXC,SAASC,iBAAiB,uBAAuBC,QAASC,IACxD,MAAMC,OAAEA,EAAMC,KAAEA,GAASF,EAAGG,QACtBC,EAAMC,EAAED,IAAIJ,GAAIM,QAAQC,KAAKC,MAAMP,GAASQ,SAASP,IAG3DF,EAAGF,iBAAiB,yBAAyBC,QAASC,IACpD,MAAMU,EAAW,CAAE,EAGnBV,EAAGF,iBAAiB,qBAAqBC,QAASY,IAChD,MAAMC,KAAEA,EAAIC,YAAEA,EAAWC,YAAEA,EAAWC,QAAEA,EAAOC,KAAEA,GAASL,EAAOR,QACjEO,EAASM,GAAQX,EAAEY,UAAUJ,EAAa,CAAEE,UAASD,gBACzC,MAARF,GACFF,EAASM,GAAME,MAAMd,EACvB,GAGF,MAAMe,EAAc,CAAE,EAEtBnB,EAAGF,iBAAiB,sBAAsBC,QAASC,IACjD,MAAMgB,KAAEA,GAAShB,EAAGG,QACdiB,EAAS,GAEE,IAAIC,iBAAiB,SAASC,GAC7C,MAAMC,EAAQJ,EAAYH,GAE1BM,EAAUvB,QAAQyB,IAChBA,EAASC,WAAW1B,QAAQ2B,IAC1B,MAAMC,OAAEA,GAAWD,EAAKvB,QAClByB,EAAQvB,EAAEwB,OAAOtB,KAAKC,MAAMmB,IAClCJ,EAAMO,SAASF,GACfxB,EAAI0B,SAASF,EAAK,GAGpBJ,EAASO,aAAahC,QAAQ2B,IAC5B,MAAMM,WAAEA,GAAeN,EAAKvB,QACtByB,EAAQL,EAAMU,SAASD,GAC7BT,EAAMW,YAAYN,GAElBxB,EAAI8B,YAAYN,EAClB,EACF,EACF,GACSO,QAAQnC,EAAI,CAAEoC,WAAW,IAGlCpC,EAAGF,iBAAiB,iBAAiBC,QAASC,IAC5C,MAAM2B,OAAEA,GAAW3B,EAAGG,SAChBkC,QAAEA,EAAU,OAAUrC,EAAGG,QACzBmC,EAAU,CAAED,QAASE,WAAWF,IACtCG,QAAQC,IAAIH,GACZ,MAAMT,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMmB,GAASW,GAASpB,MAAMd,GAC3DJ,EAAGG,QAAQ6B,WAAa3B,EAAEqC,MAAMb,GAEhC,MAAMc,EAAW,IAAItB,iBAAiB,SAASC,GAC3CA,EAAUvB,QAASyB,IACjB,MAAMG,OAAEA,GAAWH,EAASoB,OAAOzC,QACnC0B,EAAOgB,UAAUtC,KAAKC,MAAMmB,GAAO,EAEzC,GACAgB,EAASR,QAAQnC,EAAI,CAAE8C,YAAY,EAAMC,gBAAiB,CAAC,kBAG3D/C,EAAGF,iBAAiB,gBAAgBC,QAASC,IAC3C,MAAMgD,QAAEA,GAAYhD,EAAGG,QACvB0B,EAAOoB,UAAUD,GACA,IAAI3B,iBAAiB,WACpCQ,EAAOqB,WAAWC,WAAWnD,EAAGG,QAAQ6C,QAC1C,GACSb,QAAQnC,EAAI,CAAE8C,YAAY,EAAMC,gBAAiB,CAAC,iBAC7D,GAEA3B,EAAOgC,KAAKvB,EACd,GAEAV,EAAYH,GAAQX,EAAEgD,WAAWjC,EAAM,GAGzCf,EAAEiD,QAAQlC,OAAOV,EAAUS,GAAaD,MAAMd,EAAG,EAClD,EAEL"}