leaflet-html 0.1.7 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +62 -35
- package/dist/leaflet-html.cjs +1 -1
- package/dist/leaflet-html.cjs.map +1 -1
- package/dist/leaflet-html.esm.js +1 -1
- package/dist/leaflet-html.esm.js.map +1 -1
- package/dist/leaflet-html.js +1 -1
- package/dist/leaflet-html.js.map +1 -1
- package/dist/leaflet-html.umd.js +1 -1
- package/dist/leaflet-html.umd.js.map +1 -1
- package/docs/content/_index.md +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
package/docs/content/_index.md
CHANGED
|
@@ -16,71 +16,69 @@ The hierarchy in the JS API is replicated by nesting HTML elements.
|
|
|
16
16
|
|
|
17
17
|
The following is a live running example of Leaflet HTML.
|
|
18
18
|
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</div>
|
|
19
|
+
<l-map center="[39.61, -105.02]" zoom="10">
|
|
20
|
+
<l-control-layers>
|
|
21
|
+
<l-base-layers>
|
|
22
|
+
<l-tile-layer
|
|
23
|
+
name="CartoDB_Voyager"
|
|
24
|
+
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
|
|
25
|
+
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
|
26
|
+
max-zoom="20"
|
|
27
|
+
subdomains="abcd"
|
|
28
|
+
show
|
|
29
|
+
></l-tile-layer>
|
|
30
|
+
</l-base-layers>
|
|
31
|
+
<l-overlay-layers>
|
|
32
|
+
<l-layer-group name="Cities">
|
|
33
|
+
<l-marker lat-lng="[39.61, -105.02]">
|
|
34
|
+
<l-popup content="This is Littleton, CO."></l-popup>
|
|
35
|
+
</l-marker>
|
|
36
|
+
<l-marker lat-lng="[39.74, -104.99]">
|
|
37
|
+
<l-popup content="This is Denver, CO."></l-popup>
|
|
38
|
+
</l-marker>
|
|
39
|
+
<l-marker lat-lng="[39.73, -104.8]">
|
|
40
|
+
<l-popup content="This is Aurora, CO."></l-popup>
|
|
41
|
+
</l-marker>
|
|
42
|
+
<l-marker lat-lng="[39.77, -105.23]">
|
|
43
|
+
<l-popup content="This is Golden, CO."></l-popup>
|
|
44
|
+
</l-marker>
|
|
45
|
+
</l-layer-group>
|
|
46
|
+
</l-overlay-layers>
|
|
47
|
+
</l-control-layers>
|
|
48
|
+
</l-map>
|
|
50
49
|
|
|
51
50
|
|
|
52
51
|
```html
|
|
53
52
|
<!-- Example -->
|
|
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
|
-
</div>
|
|
53
|
+
<l-map center="[39.61, -105.02]" zoom="10">
|
|
54
|
+
<l-control-layers>
|
|
55
|
+
<l-base-layers>
|
|
56
|
+
<l-tile-layer
|
|
57
|
+
name="CartoDB_Voyager"
|
|
58
|
+
url-template="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
|
|
59
|
+
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
|
60
|
+
max-zoom="20"
|
|
61
|
+
subdomains="abcd"
|
|
62
|
+
show
|
|
63
|
+
></l-tile-layer>
|
|
64
|
+
</l-base-layers>
|
|
65
|
+
<l-overlay-layers>
|
|
66
|
+
<l-layer-group name="Cities">
|
|
67
|
+
<l-marker lat-lng="[39.61, -105.02]">
|
|
68
|
+
<l-popup content="This is Littleton, CO."></l-popup>
|
|
69
|
+
</l-marker>
|
|
70
|
+
<l-marker lat-lng="[39.74, -104.99]">
|
|
71
|
+
<l-popup content="This is Denver, CO."></l-popup>
|
|
72
|
+
</l-marker>
|
|
73
|
+
<l-marker lat-lng="[39.73, -104.8]">
|
|
74
|
+
<l-popup content="This is Aurora, CO."></l-popup>
|
|
75
|
+
</l-marker>
|
|
76
|
+
<l-marker lat-lng="[39.77, -105.23]">
|
|
77
|
+
<l-popup content="This is Golden, CO."></l-popup>
|
|
78
|
+
</l-marker>
|
|
79
|
+
</l-layer-group>
|
|
80
|
+
</l-overlay-layers>
|
|
81
|
+
</l-control-layers>
|
|
82
|
+
</l-map>
|
|
85
83
|
```
|
|
86
84
|
|
|
@@ -5,30 +5,33 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<style>
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
l-map {
|
|
9
|
+
display: block;
|
|
10
|
+
block-size: 40ch;
|
|
11
|
+
isolation: isolate;
|
|
12
|
+
z-index: 1;
|
|
13
|
+
}
|
|
14
|
+
|
|
13
15
|
body {
|
|
14
16
|
font-family: system-ui;
|
|
15
17
|
line-height: 1.6;
|
|
16
18
|
}
|
|
17
|
-
h1, h2 {
|
|
18
|
-
font-weight: 100;
|
|
19
|
-
}
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
h1, h2 {
|
|
21
|
+
font-weight: 100;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
pre {
|
|
25
|
+
padding-inline: 0.75rem;
|
|
26
|
+
padding-block: 0.5rem;
|
|
27
|
+
border-radius: 0.2rem;
|
|
28
|
+
overflow-x: scroll;
|
|
29
|
+
}
|
|
27
30
|
|
|
28
|
-
.wrapper {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
31
|
+
.wrapper {
|
|
32
|
+
inline-size: min(90%, 80ch);
|
|
33
|
+
margin-inline: auto;
|
|
34
|
+
}
|
|
32
35
|
</style>
|
|
33
36
|
<link
|
|
34
37
|
rel="stylesheet"
|
|
@@ -42,7 +45,8 @@ pre {
|
|
|
42
45
|
crossorigin=""
|
|
43
46
|
></script>
|
|
44
47
|
<script
|
|
45
|
-
|
|
48
|
+
type="module"
|
|
49
|
+
src="https://unpkg.com/leaflet-html@latest/dist/leaflet-html.js"
|
|
46
50
|
></script>
|
|
47
51
|
</head>
|
|
48
52
|
<body>
|
|
@@ -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