leaflet-html 0.1.4 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,15 @@
1
+ on: push
2
+ name: Build and deploy GH Pages
3
+ jobs:
4
+ build:
5
+ runs-on: ubuntu-latest
6
+ if: github.ref == 'refs/heads/master'
7
+ steps:
8
+ - name: checkout
9
+ uses: actions/checkout@v4
10
+ - name: build_and_deploy
11
+ uses: shalzz/zola-deploy-action@v0.17.2
12
+ env:
13
+ BUILD_DIR: docs
14
+ PAGES_BRANCH: gh-pages
15
+ TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -0,0 +1,25 @@
1
+ name: npm-publish
2
+ on:
3
+ push:
4
+ branches:
5
+ - master
6
+ jobs:
7
+ npm-publish:
8
+ name: npm-publish
9
+ runs-on: ubuntu-latest
10
+ steps:
11
+ - name: Checkout repository
12
+ uses: actions/checkout@v2
13
+ - name: Publish if version has been updated
14
+ uses: pascalgn/npm-publish-action@1.3.9
15
+ with:
16
+ tag_name: "v%s"
17
+ tag_message: "v%s"
18
+ create_tag: "true"
19
+ commit_pattern: "^Release (\\S+)"
20
+ workspace: "."
21
+ publish_command: "yarn"
22
+ publish_args: "--non-interactive"
23
+ env:
24
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25
+ NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
package/README.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  Leaflet expressed in HTML to add maps to Hypermedia Driven Applications (HDA).
4
4
 
5
+ Indeed, since it is HTML, any front end framework should work with it.
6
+
7
+ Fine grained reactive frameworks such as [Solid JS](https://solidjs.com) or [Van JS](https://vanjs.org) are ideal candidates for client side development.
8
+
9
+ RESTful frameworks, like [HTMX](Https://htmx.org), that serve HTML over the wire are perfect choices for server rendered content.
10
+
5
11
  ## Example
6
12
 
7
13
  The HTML in `example/index.html` is a simple demonstration of the API.
@@ -0,0 +1,16 @@
1
+ # The URL the site will be built for
2
+ base_url = "https://andrewgryan.github.io/leaflet-html"
3
+
4
+ # Whether to automatically compile all Sass files in the sass directory
5
+ compile_sass = false
6
+
7
+ # Whether to build a search index to be used later on by a JavaScript library
8
+ build_search_index = false
9
+
10
+ [markdown]
11
+ # Whether to do syntax highlighting
12
+ # Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
13
+ highlight_code = true
14
+
15
+ [extra]
16
+ # Put all your custom variables here
@@ -0,0 +1,86 @@
1
+ +++
2
+ +++
3
+ # Leaflet HTML
4
+
5
+ [LeafletJS](https://leafletjs.com/) is a library geared towards map based visualisations.
6
+ Leaflet HTML expresses that JavaScript API in HTML.
7
+
8
+
9
+ ## Design principles
10
+
11
+ Leaflet HTML tries to model Leaflet's API as closely as possible to avoid confusion and to ease onboarding.
12
+ Naming conventions are followed where possible.
13
+ The hierarchy in the JS API is replicated by nesting HTML elements.
14
+
15
+ ## Example
16
+
17
+ The following is a live running example of Leaflet HTML.
18
+
19
+ <div data-leaflet-html data-center="[39.61, -105.02]" data-zoom="10">
20
+ <div data-control-layers>
21
+ <div data-base-maps>
22
+ <div
23
+ data-tile-layer
24
+ data-name="CartoDB_Voyager"
25
+ data-url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
26
+ data-attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
27
+ data-max-zoom="20"
28
+ data-subdomains="abcd"
29
+ data-show
30
+ ></div>
31
+ </div>
32
+ <div data-overlay-maps>
33
+ <div data-layer-group data-name="Cities">
34
+ <div data-marker data-lat-lng="[39.61, -105.02]">
35
+ <div data-popup data-content="This is Littleton, CO."></div>
36
+ </div>
37
+ <div data-marker data-lat-lng="[39.74, -104.99]">
38
+ <div data-popup data-content="This is Denver, CO."></div>
39
+ </div>
40
+ <div data-marker data-lat-lng="[39.73, -104.8]">
41
+ <div data-popup data-content="This is Aurora, CO."></div>
42
+ </div>
43
+ <div data-marker data-lat-lng="[39.77, -105.23]">
44
+ <div data-popup data-content="This is Golden, CO."></div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+
52
+ ```html
53
+ <!-- Example -->
54
+ <div data-leaflet-html data-center="[39.61, -105.02]" data-zoom="10">
55
+ <div data-control-layers>
56
+ <div data-base-maps>
57
+ <div
58
+ data-tile-layer
59
+ data-name="CartoDB_Voyager"
60
+ data-url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
61
+ data-attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
62
+ data-max-zoom="20"
63
+ data-subdomains="abcd"
64
+ data-show
65
+ ></div>
66
+ </div>
67
+ <div data-overlay-maps>
68
+ <div data-layer-group data-name="Cities">
69
+ <div data-marker data-lat-lng="[39.61, -105.02]">
70
+ <div data-popup data-content="This is Littleton, CO."></div>
71
+ </div>
72
+ <div data-marker data-lat-lng="[39.74, -104.99]">
73
+ <div data-popup data-content="This is Denver, CO."></div>
74
+ </div>
75
+ <div data-marker data-lat-lng="[39.73, -104.8]">
76
+ <div data-popup data-content="This is Aurora, CO."></div>
77
+ </div>
78
+ <div data-marker data-lat-lng="[39.77, -105.23]">
79
+ <div data-popup data-content="This is Golden, CO."></div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ ```
86
+
@@ -0,0 +1,53 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head lang="en">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <style>
7
+
8
+ [data-leaflet-html] {
9
+ block-size: 40ch;
10
+ isolation: isolate;
11
+ z-index: 1;
12
+ }
13
+ body {
14
+ font-family: system-ui;
15
+ line-height: 1.6;
16
+ }
17
+ h1, h2 {
18
+ font-weight: 100;
19
+ }
20
+
21
+ pre {
22
+ padding-inline: 0.75rem;
23
+ padding-block: 0.5rem;
24
+ border-radius: 0.2rem;
25
+ overflow-x: scroll;
26
+ }
27
+
28
+ .wrapper {
29
+ inline-size: 80ch;
30
+ margin-inline: auto;
31
+ }
32
+ </style>
33
+ <link
34
+ rel="stylesheet"
35
+ href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
36
+ integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
37
+ crossorigin=""
38
+ />
39
+ <script
40
+ src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
41
+ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
42
+ crossorigin=""
43
+ ></script>
44
+ <script
45
+ src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.umd.js"
46
+ ></script>
47
+ </head>
48
+ <body>
49
+ <div class="wrapper">
50
+ {{ section.content | safe }}
51
+ </div>
52
+ </body>
53
+ </html>
@@ -15,7 +15,7 @@
15
15
  crossorigin=""
16
16
  ></script>
17
17
  <script
18
- src="https://www.unpkg.com/leaflet-html@0.1.4/dist/leaflet-html.umd.js"
18
+ src="/dist/leaflet-html.umd.js"
19
19
  defer
20
20
  ></script>
21
21
  <style>
@@ -57,10 +57,11 @@
57
57
  ></div>
58
58
  <div
59
59
  data-tile-layer
60
- data-name="Toner"
61
- data-url-template="https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png"
62
- data-attribution=""
63
- data-max-zoom="12"
60
+ data-name="CartoDB_Voyager"
61
+ data-url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
62
+ data-attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
63
+ data-max-zoom="20"
64
+ data-subdomains="abcd"
64
65
  data-show
65
66
  ></div>
66
67
  </div>
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head lang="en">
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Leaflet HTML imageOverlay</title>
7
+ <link
8
+ rel="stylesheet"
9
+ href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
10
+ integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
11
+ crossorigin=""
12
+ />
13
+ <script
14
+ src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
15
+ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
16
+ crossorigin=""
17
+ ></script>
18
+ <script src="/dist/leaflet-html.umd.js"></script>
19
+ <style>
20
+ * {
21
+ margin: 0;
22
+ }
23
+
24
+ [data-leaflet-html] {
25
+ block-size: 100vh;
26
+ isolation: isolate;
27
+ z-index: 1;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div data-leaflet-html data-center="[37.8, -96]" data-zoom="4">
33
+ <div
34
+ data-lat-lng-bounds
35
+ data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
36
+ ></div>
37
+ <div
38
+ data-tile-layer
39
+ data-name="OpenStreetMap"
40
+ data-url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
41
+ data-attribution=""
42
+ ></div>
43
+ <!-- Newark -->
44
+ <div
45
+ data-image-overlay
46
+ data-url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
47
+ data-bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
48
+ data-opacity="0.8"
49
+ data-interactive="true"
50
+ data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
51
+ data-alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
52
+ ></div>
53
+ <!-- Hurricane Patricia -->
54
+ <div
55
+ data-video-overlay
56
+ data-url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
57
+ data-error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
58
+ data-bounds="[[32, -130], [13, -100]]"
59
+ ></div>
60
+ </div>
61
+ <script>
62
+ el = document.querySelector("[data-lat-lng-bounds]")
63
+ let counter = 0
64
+ document.body.addEventListener("click", () => {
65
+ console.log("click")
66
+ if (counter === 0) {
67
+ const { bounds } = document.querySelector("[data-video-overlay]").dataset
68
+ el.dataset.bounds = bounds
69
+ } else {
70
+ const { bounds } = document.querySelector("[data-image-overlay]").dataset
71
+ el.dataset.bounds = bounds
72
+ }
73
+ counter += 1
74
+ })
75
+ </script>
76
+ </body>
77
+ </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "leaflet-html",
3
3
  "type": "module",
4
- "version": "0.1.4",
4
+ "version": "0.1.6",
5
5
  "description": "Leaflet expressed in HTML",
6
6
  "source": "src/index.js",
7
7
  "main": "./dist/leaflet-html.js",
package/src/index.js CHANGED
@@ -1,18 +1,113 @@
1
+ // @ts-check
2
+
3
+ // Helpers
4
+ const selector = (noun) => `[data-${noun}]`;
5
+
6
+ /**
7
+ * Parse L.tileLayer args from element attributes
8
+ */
9
+ const parseTileLayer = (el) => {
10
+ const { urlTemplate } = el.dataset;
11
+ const {
12
+ attribution = null,
13
+ maxZoom = "18",
14
+ minZoom = "0",
15
+ subdomains = "abc",
16
+ } = el.dataset;
17
+ const options = { attribution, maxZoom, minZoom, subdomains };
18
+ return [urlTemplate, options];
19
+ };
20
+
21
+ /**
22
+ * Parse L.imageOverlay args from element attributes
23
+ */
24
+ const parseImageOverlay = (el) => {
25
+ let { url, bounds } = el.dataset;
26
+ bounds = JSON.parse(bounds);
27
+ const { opacity } = el.dataset;
28
+ const options = { opacity: parseFloat(opacity) };
29
+ return [url, bounds, options];
30
+ };
31
+
32
+ /**
33
+ * Parse L.imageOverlay args from element attributes
34
+ */
35
+ const parseVideoOverlay = (el) => {
36
+ let { url, bounds } = el.dataset;
37
+ url = JSON.parse(url);
38
+ bounds = JSON.parse(bounds);
39
+ const {
40
+ opacity,
41
+ errorOverlayUrl,
42
+ autoplay = true,
43
+ muted = true,
44
+ playsInline = true,
45
+ } = el.dataset;
46
+ const options = {
47
+ opacity: parseFloat(opacity),
48
+ errorOverlayUrl,
49
+ autoplay,
50
+ muted,
51
+ playsInline,
52
+ };
53
+ return [url, bounds, options];
54
+ };
55
+
56
+ /**
57
+ * @param {HTMLElement} el
58
+ */
59
+ const parseLatLngBounds = (el) => {
60
+ let { bounds } = el.dataset;
61
+ if (typeof bounds === "undefined") {
62
+ throw Error("data-bounds not specified")
63
+ }
64
+ return [JSON.parse(bounds)];
65
+ }
66
+
1
67
  const render = () => {
2
68
  // Render Leaflet API calls
3
- document.querySelectorAll("[data-leaflet-html]").forEach((el) => {
69
+ document.querySelectorAll(selector("leaflet-html")).forEach((el) => {
4
70
  const { center, zoom } = el.dataset;
5
71
  const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));
6
72
 
73
+ // L.latLngBounds
74
+ el.querySelectorAll(selector("lat-lng-bounds")).forEach((el) => {
75
+ const bounds = L.latLngBounds(...parseLatLngBounds(el))
76
+ // TODO: encapsulate this design pattern
77
+ const observer = new MutationObserver(function (mutations) {
78
+ mutations.forEach((mutation) => {
79
+ let [bounds] = parseLatLngBounds(mutation.target)
80
+ map.flyToBounds(bounds); // TODO: Use HTML attrs for fly/fit bounds
81
+ });
82
+ });
83
+ observer.observe(el, {
84
+ attributes: true,
85
+ attributeFilter: ["data-bounds"],
86
+ });
87
+ map.fitBounds(bounds)
88
+ })
89
+
90
+ // L.tileLayers
91
+ el.querySelectorAll(selector("tile-layer")).forEach((el) => {
92
+ L.tileLayer(...parseTileLayer(el)).addTo(map);
93
+ });
94
+
95
+ el.querySelectorAll(selector("image-overlay")).forEach((el) => {
96
+ L.imageOverlay(...parseImageOverlay(el)).addTo(map);
97
+ });
98
+
99
+ el.querySelectorAll(selector("video-overlay")).forEach((el) => {
100
+ L.videoOverlay(...parseVideoOverlay(el)).addTo(map);
101
+ });
102
+
7
103
  // L.control.layers
8
- el.querySelectorAll("[data-control-layers]").forEach((el) => {
104
+ el.querySelectorAll(selector("control-layers")).forEach((el) => {
9
105
  const baseMaps = {};
10
106
 
11
107
  // L.tileLayers
12
- el.querySelectorAll("[data-tile-layer]").forEach((tileEl) => {
13
- const { show, urlTemplate, attribution, maxZoom, name } =
14
- tileEl.dataset;
15
- baseMaps[name] = L.tileLayer(urlTemplate, { maxZoom, attribution });
108
+ el.querySelectorAll(selector("tile-layer")).forEach((el) => {
109
+ const { name, show } = el.dataset;
110
+ baseMaps[name] = L.tileLayer(...parseTileLayer(el));
16
111
  if (show != null) {
17
112
  baseMaps[name].addTo(map);
18
113
  }
@@ -20,7 +115,7 @@ const render = () => {
20
115
 
21
116
  const overlayMaps = {};
22
117
  // L.layerGroup
23
- el.querySelectorAll("[data-layer-group]").forEach((el) => {
118
+ el.querySelectorAll(selector("layer-group")).forEach((el) => {
24
119
  const { name } = el.dataset;
25
120
  const layers = [];
26
121
 
@@ -47,11 +142,10 @@ const render = () => {
47
142
  observer.observe(el, { childList: true });
48
143
 
49
144
  // L.marker
50
- el.querySelectorAll("[data-marker]").forEach((el) => {
145
+ el.querySelectorAll(selector("marker")).forEach((el) => {
51
146
  const { latLng } = el.dataset;
52
147
  const { opacity = "1.0" } = el.dataset;
53
148
  const options = { opacity: parseFloat(opacity) };
54
- console.log(options);
55
149
  const marker = L.marker(JSON.parse(latLng), options).addTo(map);
56
150
  el.dataset._leafletId = L.stamp(marker); // Save ID for later
57
151
 
@@ -67,7 +161,7 @@ const render = () => {
67
161
  });
68
162
 
69
163
  // marker.bindPopup
70
- el.querySelectorAll("[data-popup]").forEach((el) => {
164
+ el.querySelectorAll(selector("popup")).forEach((el) => {
71
165
  const { content } = el.dataset;
72
166
  marker.bindPopup(content);
73
167
  const observer = new MutationObserver(function () {
@@ -1,2 +0,0 @@
1
- var t=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=function(){document.addEventListener("DOMContentLoaded",t)};
2
- //# sourceMappingURL=leaflet-html.cjs.map
@@ -1 +0,0 @@
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 } = 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\nconst init = () => {\n document.addEventListener(\"DOMContentLoaded\", render)\n}\n\nexport default init\n"],"names":["render","document","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","addEventListener"],"mappings":"AAAA,IAAMA,EAAS,WAEbC,SAASC,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,EAA0DD,EAAOV,QAAzDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KACjDJ,EAASI,GAAQT,EAAEU,UADMH,EAAXI,YAC4B,CAAEC,QADGL,EAAPK,QACaC,YADfN,EAAXM,cAEf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAE,EAEtBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAASC,GAC7C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAA2B,GAChBA,EAASC,WAAW5B,QAAQ,SAAA6B,GAC1B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAA6B,GAC5B,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,gBADZ,IAAAH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAASC,GAC3CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACJ,GACSM,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,kBAG3DjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,iBAC7D,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF,iBAEa,WACXR,SAAS4D,iBAAiB,mBAAoB7D,EAChD"}
@@ -1,2 +0,0 @@
1
- var t=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)})})},a=function(){document.addEventListener("DOMContentLoaded",t)};export{a as default};
2
- //# sourceMappingURL=leaflet-html.esm.js.map
@@ -1 +0,0 @@
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 } = 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\nconst init = () => {\n document.addEventListener(\"DOMContentLoaded\", render)\n}\n\nexport default init\n"],"names":["render","document","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","init","addEventListener"],"mappings":"AAAA,IAAMA,EAAS,WAEbC,SAASC,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,EAA0DD,EAAOV,QAAzDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KACjDJ,EAASI,GAAQT,EAAEU,UADMH,EAAXI,YAC4B,CAAEC,QADGL,EAAPK,QACaC,YADfN,EAAXM,cAEf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAE,EAEtBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAASC,GAC7C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAA2B,GAChBA,EAASC,WAAW5B,QAAQ,SAAA6B,GAC1B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAA6B,GAC5B,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,gBADZ,IAAAH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAASC,GAC3CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACJ,GACSM,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,kBAG3DjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,iBAC7D,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF,EAEMoD,EAAO,WACX5D,SAAS6D,iBAAiB,mBAAoB9D,EAChD"}
@@ -1,2 +0,0 @@
1
- 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: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)})})},e=()=>{document.addEventListener("DOMContentLoaded",t)};export{e as default};
2
- //# sourceMappingURL=leaflet-html.js.map
@@ -1 +0,0 @@
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 } = 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\nconst init = () => {\n document.addEventListener(\"DOMContentLoaded\", render)\n}\n\nexport default init\n"],"names":["render","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","init","addEventListener"],"mappings":"AAAA,MAAMA,EAASA,KAEbC,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,GAGjBV,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,EACf,GAEAJ,EAASO,aAAahC,QAAQ2B,IAC5B,MAAMM,WAAEA,GAAeN,EAAKvB,QACtByB,EAAQL,EAAMU,SAASD,GAC7BT,EAAMW,YAAYN,GAElBxB,EAAI8B,YAAYN,EAAK,EAEzB,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,GAC9B,EACJ,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,EACnC,GAEAf,EAAEiD,QAAQlC,OAAOV,EAAUS,GAAaD,MAAMd,EAChD,EACF,EACF,EAEMmD,EAAOA,KACX1D,SAAS2D,iBAAiB,mBAAoB5D,EAChD"}
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=leaflet-html.modern.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,2 +0,0 @@
1
- !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(){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)})})};return function(){document.addEventListener("DOMContentLoaded",e)}});
2
- //# sourceMappingURL=leaflet-html.umd.js.map
@@ -1 +0,0 @@
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 } = 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\nconst init = () => {\n document.addEventListener(\"DOMContentLoaded\", render)\n}\n\nexport default init\n"],"names":["render","document","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","addEventListener"],"mappings":"8NAAA,IAAMA,EAAS,WAEbC,SAASC,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,EAA0DD,EAAOV,QAAzDY,EAAID,EAAJC,KAAyCC,EAAIF,EAAJE,KACjDJ,EAASI,GAAQT,EAAEU,UADMH,EAAXI,YAC4B,CAAEC,QADGL,EAAPK,QACaC,YADfN,EAAXM,cAEf,MAARL,GACFH,EAASI,GAAMK,MAAMf,EAEzB,GAEA,IAAMgB,EAAc,CAAE,EAEtBrB,EAAGF,iBAAiB,sBAAsBC,QAAQ,SAACC,GACjD,IAAQe,EAASf,EAAGE,QAAZa,KACFO,EAAS,GAEE,IAAIC,iBAAiB,SAASC,GAC7C,IAAMC,EAAQJ,EAAYN,GAE1BS,EAAUzB,QAAQ,SAAA2B,GAChBA,EAASC,WAAW5B,QAAQ,SAAA6B,GAC1B,IACMC,EAAQvB,EAAEwB,OAAOtB,KAAKC,MADTmB,EAAK1B,QAAhB6B,SAERN,EAAMO,SAASH,GACfxB,EAAI2B,SAASH,EACf,GAEAH,EAASO,aAAalC,QAAQ,SAAA6B,GAC5B,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,gBADZ,IAAAH,EAAG,MAAKA,IAEvBI,QAAQC,IAAIH,GACZ,IAAMX,EAASxB,EAAEwB,OAAOtB,KAAKC,MAAMsB,GAASU,GAASrB,MAAMf,GAC3DL,EAAGE,QAAQiC,WAAa7B,EAAEuC,MAAMf,GAEf,IAAIP,iBAAiB,SAASC,GAC3CA,EAAUzB,QAAQ,SAAC2B,GAEjBI,EAAOgB,UAAUtC,KAAKC,MADHiB,EAASqB,OAAO7C,QAA3B6B,QAEV,EACJ,GACSM,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,kBAG3DjD,EAAGF,iBAAiB,gBAAgBC,QAAQ,SAACC,GAE3C8B,EAAOoB,UADalD,EAAGE,QAAfiD,SAES,IAAI5B,iBAAiB,WACpCO,EAAOsB,WAAWC,WAAWrD,EAAGE,QAAQiD,QAC1C,GACSd,QAAQrC,EAAI,CAAEgD,YAAY,EAAMC,gBAAiB,CAAC,iBAC7D,GAEA3B,EAAOgC,KAAKxB,EACd,GAEAT,EAAYN,GAAQT,EAAEiD,WAAWjC,EACnC,GAEAhB,EAAEkD,QAAQlC,OAAOX,EAAUU,GAAaD,MAAMf,EAChD,EACF,EACF,SAEa,WACXR,SAAS4D,iBAAiB,mBAAoB7D,EAChD"}