leaflet-html 0.1.6 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/npm-publish.yml +13 -1
- package/README.md +62 -35
- package/dist/leaflet-html.cjs +2 -0
- package/dist/leaflet-html.cjs.map +1 -0
- package/dist/leaflet-html.esm.js +2 -0
- package/dist/leaflet-html.esm.js.map +1 -0
- package/dist/leaflet-html.js +2 -0
- package/dist/leaflet-html.js.map +1 -0
- package/dist/leaflet-html.umd.js +2 -0
- package/dist/leaflet-html.umd.js.map +1 -0
- package/docs/content/_index.md +60 -62
- package/docs/templates/index.html +23 -19
- package/example/geojson/index.html +42 -0
- package/example/index.html +58 -50
- package/example/overlays/index.html +34 -35
- package/package.json +2 -2
- package/src/events.js +3 -0
- package/src/index.js +25 -184
- package/src/l-base-layers.js +16 -0
- package/src/l-control-layers.js +34 -0
- package/src/l-geojson.js +20 -0
- package/src/l-image-overlay.js +41 -0
- package/src/l-lat-lng-bounds.js +20 -0
- package/src/l-layer-group.js +39 -0
- package/src/l-map.js +33 -0
- package/src/l-marker.js +45 -0
- package/src/l-overlay-layers.js +15 -0
- package/src/l-popup.js +23 -0
- package/src/l-tile-layer.js +19 -0
- package/src/l-video-overlay.js +30 -0
|
@@ -0,0 +1,42 @@
|
|
|
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>GeoJSON</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 type="module" src="/src/index.js"></script>
|
|
19
|
+
<style>
|
|
20
|
+
* {
|
|
21
|
+
margin: 0;
|
|
22
|
+
}
|
|
23
|
+
l-map {
|
|
24
|
+
display: block;
|
|
25
|
+
height: 100vh;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<l-map center="[55,0]" zoom="5">
|
|
31
|
+
<l-tile-layer
|
|
32
|
+
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
|
|
33
|
+
></l-tile-layer>
|
|
34
|
+
<l-geojson id="feature" geojson='{"type":"Feature","properties":{"name":"Coors Field","amenity":"Baseball Stadium","popupContent":"This is where the Rockies play!"},"geometry":{"type":"Point","coordinates":[-104.99404,39.75621]}}'></l-geojson>
|
|
35
|
+
</l-map>
|
|
36
|
+
<script>
|
|
37
|
+
document.getElementById("feature").addEventListener("map:addTo", (ev) => {
|
|
38
|
+
console.log({ message: "Hello, World!", ev })
|
|
39
|
+
})
|
|
40
|
+
</script>
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
package/example/index.html
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
crossorigin=""
|
|
16
16
|
></script>
|
|
17
17
|
<script
|
|
18
|
-
src="/
|
|
18
|
+
src="/src/index.js"
|
|
19
|
+
type="module"
|
|
19
20
|
defer
|
|
20
21
|
></script>
|
|
21
22
|
<style>
|
|
@@ -23,18 +24,21 @@
|
|
|
23
24
|
margin: 0;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
l-map {
|
|
27
28
|
block-size: 100vh;
|
|
28
29
|
isolation: isolate;
|
|
29
30
|
z-index: 1;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
.btn-group {
|
|
33
34
|
z-index: 2;
|
|
34
35
|
position: absolute;
|
|
35
36
|
bottom: 0;
|
|
36
37
|
left: 0;
|
|
37
38
|
margin: 1rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
button {
|
|
38
42
|
padding: 1rem;
|
|
39
43
|
background-color: #337;
|
|
40
44
|
color: white;
|
|
@@ -42,62 +46,66 @@
|
|
|
42
46
|
cursor: pointer;
|
|
43
47
|
font-size: 1.2rem;
|
|
44
48
|
}
|
|
49
|
+
|
|
50
|
+
body {
|
|
51
|
+
display: grid;
|
|
52
|
+
grid-template-columns: 1fr 1fr;
|
|
53
|
+
}
|
|
45
54
|
</style>
|
|
46
55
|
</head>
|
|
47
56
|
<body>
|
|
48
|
-
<
|
|
49
|
-
<
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
</
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
</
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
</
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</
|
|
57
|
+
<l-map center="[39.61, -105.02]" zoom="10">
|
|
58
|
+
<l-control-layers>
|
|
59
|
+
<l-base-layers>
|
|
60
|
+
<l-tile-layer
|
|
61
|
+
name="OpenStreetMap"
|
|
62
|
+
url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
63
|
+
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
64
|
+
max-zoom="12"
|
|
65
|
+
></l-tile-layer>
|
|
66
|
+
<l-tile-layer
|
|
67
|
+
name="CartoDB_Voyager"
|
|
68
|
+
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
|
|
69
|
+
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
|
70
|
+
max-zoom="20"
|
|
71
|
+
subdomains="abcd"
|
|
72
|
+
></l-tile-layer>
|
|
73
|
+
</l-base-layers>
|
|
74
|
+
<l-overlay-layers>
|
|
75
|
+
<l-layer-group name="Cities">
|
|
76
|
+
<l-marker lat-lng="[39.61, -105.02]">
|
|
77
|
+
<l-popup content="This is Littleton, CO."></l-popup>
|
|
78
|
+
</l-marker>
|
|
79
|
+
<l-marker lat-lng="[39.74, -104.99]">
|
|
80
|
+
<l-popup content="This is Denver, CO."></l-popup>
|
|
81
|
+
</l-marker>
|
|
82
|
+
<l-marker lat-lng="[39.73, -104.8]" opacity="0.7">
|
|
83
|
+
<l-popup content="This is Aurora, CO."></l-popup>
|
|
84
|
+
</l-marker>
|
|
85
|
+
<l-marker lat-lng="[39.77, -105.23]">
|
|
86
|
+
<l-popup content="This is Golden, CO."></l-popup>
|
|
87
|
+
</l-marker>
|
|
88
|
+
</l-layer-group>
|
|
89
|
+
</l-overlay-layers>
|
|
90
|
+
</l-control-layers>
|
|
91
|
+
</l-map>
|
|
92
|
+
<div class="btn-group">
|
|
93
|
+
<button id="btn-move">Move Denver</button>
|
|
94
|
+
<button id="btn-remove">Remove Denver</button>
|
|
85
95
|
</div>
|
|
86
|
-
<button id="btn">Add a city</button>
|
|
87
96
|
<script type="module">
|
|
88
97
|
// Manual tests
|
|
89
|
-
document.getElementById("btn").addEventListener("click", () => {
|
|
90
|
-
// New city
|
|
91
|
-
let el = document.querySelector('[data-name="Cities"]');
|
|
92
|
-
const city = document.createElement("div");
|
|
93
|
-
city.dataset.marker = "";
|
|
94
|
-
city.dataset.latLng = "[39.60, -105.02]";
|
|
95
|
-
el.appendChild(city);
|
|
96
|
-
|
|
98
|
+
document.getElementById("btn-remove").addEventListener("click", () => {
|
|
97
99
|
// Remove Denver
|
|
98
|
-
el = document.querySelector('[
|
|
100
|
+
let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
|
|
99
101
|
el.remove();
|
|
100
102
|
});
|
|
103
|
+
document.getElementById("btn-move").addEventListener("click", () => {
|
|
104
|
+
// Move Denver
|
|
105
|
+
let el = document.querySelector('[lat-lng="[39.74, -104.99]"]');
|
|
106
|
+
el.setAttribute("lat-lng", "[39.74, -104.89]");
|
|
107
|
+
el.setAttribute("opacity", "0.5");
|
|
108
|
+
});
|
|
101
109
|
</script>
|
|
102
110
|
</body>
|
|
103
111
|
</html>
|
|
@@ -15,60 +15,59 @@
|
|
|
15
15
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
16
16
|
crossorigin=""
|
|
17
17
|
></script>
|
|
18
|
-
<script src="/
|
|
18
|
+
<script type="module" src="/src/index.js"></script>
|
|
19
19
|
<style>
|
|
20
20
|
* {
|
|
21
21
|
margin: 0;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
l-map {
|
|
25
|
+
display: block;
|
|
25
26
|
block-size: 100vh;
|
|
27
|
+
outline: 1px solid hotpink;
|
|
26
28
|
isolation: isolate;
|
|
27
29
|
z-index: 1;
|
|
28
30
|
}
|
|
29
31
|
</style>
|
|
30
32
|
</head>
|
|
31
33
|
<body>
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
data-attribution=""
|
|
42
|
-
></div>
|
|
34
|
+
<l-map center="[37.8, -96]" zoom="4">
|
|
35
|
+
<l-lat-lng-bounds
|
|
36
|
+
bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
|
|
37
|
+
></l-lat-lng-bounds>
|
|
38
|
+
<l-tile-layer
|
|
39
|
+
name="OpenStreetMap"
|
|
40
|
+
url-template="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
41
|
+
attribution=""
|
|
42
|
+
></l-tile-layer>
|
|
43
43
|
<!-- Newark -->
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
></div>
|
|
44
|
+
<l-image-overlay
|
|
45
|
+
url="https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
|
|
46
|
+
bounds="[[40.799311, -74.118464], [40.68202047785919, -74.33]]"
|
|
47
|
+
opacity="0.8"
|
|
48
|
+
interactive="true"
|
|
49
|
+
error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
|
|
50
|
+
alt="Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection."
|
|
51
|
+
></l-image-overlay>
|
|
53
52
|
<!-- Hurricane Patricia -->
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
<l-video-overlay
|
|
54
|
+
url='["https://www.mapbox.com/bites/00188/patricia_nasa.webm", "https://www.mapbox.com/bites/00188/patricia_nasa.mp4"]'
|
|
55
|
+
error-overlay-url="https://cdn-icons-png.flaticon.com/512/110/110686.png"
|
|
56
|
+
bounds="[[32, -130], [13, -100]]"
|
|
57
|
+
></l-video-overlay>
|
|
58
|
+
</l-map>
|
|
59
|
+
|
|
61
60
|
<script>
|
|
62
|
-
el = document.querySelector("
|
|
61
|
+
el = document.querySelector("l-lat-lng-bounds")
|
|
63
62
|
let counter = 0
|
|
64
63
|
document.body.addEventListener("click", () => {
|
|
65
|
-
|
|
64
|
+
el.setAttribute("method", "flyToBounds")
|
|
66
65
|
if (counter === 0) {
|
|
67
|
-
const
|
|
68
|
-
el.
|
|
66
|
+
const bounds = document.querySelector("l-video-overlay").getAttribute("bounds")
|
|
67
|
+
el.setAttribute("bounds", bounds)
|
|
69
68
|
} else {
|
|
70
|
-
const
|
|
71
|
-
el.
|
|
69
|
+
const bounds = document.querySelector("l-image-overlay").getAttribute("bounds")
|
|
70
|
+
el.setAttribute("bounds", bounds)
|
|
72
71
|
}
|
|
73
72
|
counter += 1
|
|
74
73
|
})
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "leaflet-html",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"description": "Leaflet expressed in HTML",
|
|
6
6
|
"source": "src/index.js",
|
|
7
7
|
"main": "./dist/leaflet-html.js",
|
|
8
8
|
"umd:main": "./dist/leaflet-html.umd.js",
|
|
9
9
|
"exports": {
|
|
10
|
-
"
|
|
10
|
+
"module": "./dist/leaflet-html.js"
|
|
11
11
|
},
|
|
12
12
|
"module": "./dist/leaflet-html.esm.js",
|
|
13
13
|
"author": "andrewgryan",
|
package/src/events.js
ADDED
package/src/index.js
CHANGED
|
@@ -1,191 +1,32 @@
|
|
|
1
1
|
// @ts-check
|
|
2
|
+
import LBaseLayers from "./l-base-layers.js";
|
|
3
|
+
import LControlLayers from "./l-control-layers.js";
|
|
4
|
+
import LLayerGroup from "./l-layer-group.js";
|
|
5
|
+
import LMap from "./l-map.js";
|
|
6
|
+
import LMarker from "./l-marker.js";
|
|
7
|
+
import LOverlayLayers from "./l-overlay-layers.js";
|
|
8
|
+
import LPopup from "./l-popup.js";
|
|
9
|
+
import LTileLayer from "./l-tile-layer.js";
|
|
10
|
+
import LLatLngBounds from "./l-lat-lng-bounds.js";
|
|
11
|
+
import LImageOverlay from "./l-image-overlay.js";
|
|
12
|
+
import LVideoOverlay from "./l-video-overlay.js";
|
|
13
|
+
import LGeoJSON from "./l-geojson.js";
|
|
2
14
|
|
|
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
|
-
|
|
67
|
-
const render = () => {
|
|
68
|
-
// Render Leaflet API calls
|
|
69
|
-
document.querySelectorAll(selector("leaflet-html")).forEach((el) => {
|
|
70
|
-
const { center, zoom } = el.dataset;
|
|
71
|
-
const map = L.map(el).setView(JSON.parse(center), parseInt(zoom));
|
|
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
|
-
|
|
103
|
-
// L.control.layers
|
|
104
|
-
el.querySelectorAll(selector("control-layers")).forEach((el) => {
|
|
105
|
-
const baseMaps = {};
|
|
106
|
-
|
|
107
|
-
// L.tileLayers
|
|
108
|
-
el.querySelectorAll(selector("tile-layer")).forEach((el) => {
|
|
109
|
-
const { name, show } = el.dataset;
|
|
110
|
-
baseMaps[name] = L.tileLayer(...parseTileLayer(el));
|
|
111
|
-
if (show != null) {
|
|
112
|
-
baseMaps[name].addTo(map);
|
|
113
|
-
}
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
const overlayMaps = {};
|
|
117
|
-
// L.layerGroup
|
|
118
|
-
el.querySelectorAll(selector("layer-group")).forEach((el) => {
|
|
119
|
-
const { name } = el.dataset;
|
|
120
|
-
const layers = [];
|
|
121
|
-
|
|
122
|
-
const observer = new MutationObserver(function (mutations) {
|
|
123
|
-
const group = overlayMaps[name];
|
|
124
|
-
|
|
125
|
-
mutations.forEach((mutation) => {
|
|
126
|
-
mutation.addedNodes.forEach((node) => {
|
|
127
|
-
const { latLng } = node.dataset; // MutationObserver needed
|
|
128
|
-
const layer = L.marker(JSON.parse(latLng));
|
|
129
|
-
group.addLayer(layer);
|
|
130
|
-
map.addLayer(layer);
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
mutation.removedNodes.forEach((node) => {
|
|
134
|
-
const { _leafletId } = node.dataset;
|
|
135
|
-
const layer = group.getLayer(_leafletId);
|
|
136
|
-
group.removeLayer(layer);
|
|
137
|
-
|
|
138
|
-
map.removeLayer(layer);
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
});
|
|
142
|
-
observer.observe(el, { childList: true });
|
|
143
|
-
|
|
144
|
-
// L.marker
|
|
145
|
-
el.querySelectorAll(selector("marker")).forEach((el) => {
|
|
146
|
-
const { latLng } = el.dataset;
|
|
147
|
-
const { opacity = "1.0" } = el.dataset;
|
|
148
|
-
const options = { opacity: parseFloat(opacity) };
|
|
149
|
-
const marker = L.marker(JSON.parse(latLng), options).addTo(map);
|
|
150
|
-
el.dataset._leafletId = L.stamp(marker); // Save ID for later
|
|
151
|
-
|
|
152
|
-
const observer = new MutationObserver(function (mutations) {
|
|
153
|
-
mutations.forEach((mutation) => {
|
|
154
|
-
const { latLng } = mutation.target.dataset;
|
|
155
|
-
marker.setLatLng(JSON.parse(latLng));
|
|
156
|
-
});
|
|
157
|
-
});
|
|
158
|
-
observer.observe(el, {
|
|
159
|
-
attributes: true,
|
|
160
|
-
attributeFilter: ["data-lat-lng"],
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
// marker.bindPopup
|
|
164
|
-
el.querySelectorAll(selector("popup")).forEach((el) => {
|
|
165
|
-
const { content } = el.dataset;
|
|
166
|
-
marker.bindPopup(content);
|
|
167
|
-
const observer = new MutationObserver(function () {
|
|
168
|
-
marker.getPopup().setContent(el.dataset.content);
|
|
169
|
-
});
|
|
170
|
-
observer.observe(el, {
|
|
171
|
-
attributes: true,
|
|
172
|
-
attributeFilter: ["data-content"],
|
|
173
|
-
});
|
|
174
|
-
});
|
|
175
|
-
|
|
176
|
-
layers.push(marker);
|
|
177
|
-
});
|
|
178
|
-
|
|
179
|
-
overlayMaps[name] = L.layerGroup(layers);
|
|
180
|
-
});
|
|
181
|
-
|
|
182
|
-
L.control.layers(baseMaps, overlayMaps).addTo(map);
|
|
183
|
-
});
|
|
184
|
-
});
|
|
185
|
-
};
|
|
186
15
|
|
|
187
16
|
const init = (() => {
|
|
188
|
-
|
|
17
|
+
// Custom elements (order of definition is important)
|
|
18
|
+
customElements.define("l-map", LMap)
|
|
19
|
+
customElements.define("l-control-layers", LControlLayers)
|
|
20
|
+
customElements.define("l-base-layers", LBaseLayers)
|
|
21
|
+
customElements.define("l-overlay-layers", LOverlayLayers)
|
|
22
|
+
customElements.define("l-layer-group", LLayerGroup)
|
|
23
|
+
customElements.define("l-tile-layer", LTileLayer)
|
|
24
|
+
customElements.define("l-marker", LMarker)
|
|
25
|
+
customElements.define("l-popup", LPopup)
|
|
26
|
+
customElements.define("l-lat-lng-bounds", LLatLngBounds)
|
|
27
|
+
customElements.define("l-image-overlay", LImageOverlay)
|
|
28
|
+
customElements.define("l-video-overlay", LVideoOverlay)
|
|
29
|
+
customElements.define("l-geojson", LGeoJSON)
|
|
189
30
|
})();
|
|
190
31
|
|
|
191
32
|
export default init;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { mapAddTo } from "./events.js"
|
|
2
|
+
|
|
3
|
+
class LBaseLayers extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super()
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
this.addEventListener(mapAddTo, (ev) => {
|
|
10
|
+
ev.detail["type"] = "base"
|
|
11
|
+
})
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export default LBaseLayers
|
|
16
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { mapAddTo } from "./events.js"
|
|
2
|
+
|
|
3
|
+
class LControlLayers extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super()
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
const base = {}
|
|
10
|
+
const overlay = {}
|
|
11
|
+
const control = L.control.layers(base, overlay)
|
|
12
|
+
|
|
13
|
+
this.addEventListener(mapAddTo, (ev) => {
|
|
14
|
+
const { type, name, layer } = ev.detail
|
|
15
|
+
if (type === "overlay") {
|
|
16
|
+
control.addOverlay(layer, name)
|
|
17
|
+
} else if (type === "base") {
|
|
18
|
+
control.addBaseLayer(layer, name)
|
|
19
|
+
}
|
|
20
|
+
ev.preventDefault()
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const event = new CustomEvent(mapAddTo, {
|
|
24
|
+
cancelable: true,
|
|
25
|
+
bubbles: true,
|
|
26
|
+
detail: {
|
|
27
|
+
layer: control
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
this.dispatchEvent(event)
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default LControlLayers
|
package/src/l-geojson.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { mapAddTo } from "./events.js"
|
|
2
|
+
|
|
3
|
+
class LGeoJSON extends HTMLElement {
|
|
4
|
+
constructor() {
|
|
5
|
+
super()
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
const layer = L.geoJSON(JSON.parse(this.getAttribute("geojson")))
|
|
10
|
+
this.dispatchEvent(new CustomEvent(mapAddTo, {
|
|
11
|
+
bubbles: true,
|
|
12
|
+
cancelable: true,
|
|
13
|
+
detail: {
|
|
14
|
+
layer
|
|
15
|
+
}
|
|
16
|
+
}))
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default LGeoJSON
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { mapAddTo } from "./events.js"
|
|
2
|
+
|
|
3
|
+
class LImageOverlay extends HTMLElement {
|
|
4
|
+
static observedAttributes = ["url", "bounds", "opacity"]
|
|
5
|
+
|
|
6
|
+
constructor() {
|
|
7
|
+
super()
|
|
8
|
+
this.layer = null
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
connectedCallback() {
|
|
12
|
+
const url = this.getAttribute("url")
|
|
13
|
+
const bounds = JSON.parse(this.getAttribute("bounds"))
|
|
14
|
+
const options = {
|
|
15
|
+
opacity: parseFloat(this.getAttribute("opacity") || "1.0"),
|
|
16
|
+
alt: this.getAttribute("alt") || ""
|
|
17
|
+
}
|
|
18
|
+
this.layer = L.imageOverlay(url, bounds, options)
|
|
19
|
+
this.dispatchEvent(new CustomEvent(mapAddTo, {
|
|
20
|
+
cancelable: true,
|
|
21
|
+
bubbles: true,
|
|
22
|
+
detail: {
|
|
23
|
+
layer: this.layer
|
|
24
|
+
}
|
|
25
|
+
}))
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
attributeChangedCallback(name, _oldValue, newValue) {
|
|
29
|
+
if (this.layer !== null) {
|
|
30
|
+
if (name === "url") {
|
|
31
|
+
this.layer.setUrl(newValue)
|
|
32
|
+
} else if (name === "bounds") {
|
|
33
|
+
this.layer.setBounds(JSON.parse(newValue))
|
|
34
|
+
} else if (name === "opacity") {
|
|
35
|
+
this.layer.setOpacity(parseFloat(newValue))
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default LImageOverlay
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
class LLatLngBounds extends HTMLElement {
|
|
2
|
+
static observedAttributes = ["bounds"]
|
|
3
|
+
|
|
4
|
+
constructor() {
|
|
5
|
+
super()
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
attributeChangedCallback(_name, _oldValue, newValue) {
|
|
9
|
+
const event = new CustomEvent("map:bounds", {
|
|
10
|
+
bubbles: true,
|
|
11
|
+
detail: {
|
|
12
|
+
bounds: JSON.parse(newValue),
|
|
13
|
+
method: this.getAttribute("method") || "fitBounds"
|
|
14
|
+
}
|
|
15
|
+
})
|
|
16
|
+
this.dispatchEvent(event)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default LLatLngBounds
|