@geoblocks/elevation-profile 0.0.20 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -3
- package/dist/elevation-profile.js +10 -3
- package/dist/elevation-profile.js.map +1 -1
- package/dist/index.600fa9d1.js +5513 -0
- package/dist/index.600fa9d1.js.map +1 -0
- package/dist/index.html +282 -0
- package/elevation-profile.ts +11 -4
- package/package.json +5 -5
package/dist/index.html
ADDED
|
@@ -0,0 +1,282 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
|
6
|
+
<script src="/index.600fa9d1.js" defer=""></script>
|
|
7
|
+
<style>body {
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.container {
|
|
12
|
+
margin: 50px;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
#tooltip {
|
|
17
|
+
color: #fff;
|
|
18
|
+
background-color: #707070;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
display: none;
|
|
21
|
+
position: absolute;
|
|
22
|
+
transform: translate(-50%, -100%);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
elevation-profile {
|
|
26
|
+
width: 80%;
|
|
27
|
+
height: 300px;
|
|
28
|
+
display: block;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
elevation-profile .grid.x {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
elevation-profile line {
|
|
36
|
+
shape-rendering: crispEdges;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
elevation-profile .axis .domain, .grid .domain {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
elevation-profile .axis line {
|
|
44
|
+
stroke: #2d2d2d;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
elevation-profile .grid line {
|
|
48
|
+
stroke: #2d2d2d40;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
elevation-profile .pointer-line {
|
|
52
|
+
stroke: #707070;
|
|
53
|
+
stroke-opacity: .3;
|
|
54
|
+
stroke-width: 2px;
|
|
55
|
+
stroke-dasharray: 3 3;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
elevation-profile .pointer-circle {
|
|
59
|
+
fill: #3761a4;
|
|
60
|
+
stroke: #fff;
|
|
61
|
+
stroke-width: 3px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
elevation-profile .pointer-circle-outline {
|
|
65
|
+
fill: #000;
|
|
66
|
+
fill-opacity: .2;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
elevation-profile .elevation, elevation-profile .elevation.highlight {
|
|
70
|
+
stroke: #3761a4;
|
|
71
|
+
stroke-width: 2px;
|
|
72
|
+
stroke-linejoin: round;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
elevation-profile .elevation.highlight {
|
|
76
|
+
stroke-width: 3px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
elevation-profile .area {
|
|
80
|
+
fill: #e6e6e6;
|
|
81
|
+
fill-opacity: .85;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
elevation-profile .point {
|
|
85
|
+
fill: #f2000c;
|
|
86
|
+
stroke: #fff;
|
|
87
|
+
stroke-width: 3px;
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
90
|
+
</head>
|
|
91
|
+
<body>
|
|
92
|
+
<div class="container">
|
|
93
|
+
<div id="tooltip"></div>
|
|
94
|
+
|
|
95
|
+
<elevation-profile locale="de-CH"></elevation-profile>
|
|
96
|
+
</div>
|
|
97
|
+
<button id="set-lines">multi linestring</button>
|
|
98
|
+
<button id="set-line">linestring</button>
|
|
99
|
+
<button id="save">save as png</button>
|
|
100
|
+
|
|
101
|
+
<pre id="logs"></pre>
|
|
102
|
+
|
|
103
|
+
<script>const profile = document.querySelector("elevation-profile");
|
|
104
|
+
const tooltip = document.querySelector("#tooltip");
|
|
105
|
+
const logs = document.querySelector("#logs");
|
|
106
|
+
const setLines = document.querySelector("#set-lines");
|
|
107
|
+
const setLine = document.querySelector("#set-line");
|
|
108
|
+
const save = document.querySelector("#save");
|
|
109
|
+
save.addEventListener("click", ()=>{
|
|
110
|
+
const svg = profile.innerHTML;
|
|
111
|
+
const blob = new Blob([
|
|
112
|
+
svg
|
|
113
|
+
], {
|
|
114
|
+
type: "image/svg+xml"
|
|
115
|
+
});
|
|
116
|
+
const url = URL.createObjectURL(blob);
|
|
117
|
+
const a = document.createElement("a");
|
|
118
|
+
a.href = url;
|
|
119
|
+
a.download = "elevation.svg";
|
|
120
|
+
a.click();
|
|
121
|
+
});
|
|
122
|
+
setLine.addEventListener("click", ()=>{
|
|
123
|
+
profile.lines = [
|
|
124
|
+
[
|
|
125
|
+
[
|
|
126
|
+
2752448.6890149354,
|
|
127
|
+
1212435.0280630554,
|
|
128
|
+
570,
|
|
129
|
+
0
|
|
130
|
+
],
|
|
131
|
+
[
|
|
132
|
+
2750063.3798349514,
|
|
133
|
+
1212552.370432813,
|
|
134
|
+
480,
|
|
135
|
+
480
|
|
136
|
+
],
|
|
137
|
+
[
|
|
138
|
+
2749668.7007208047,
|
|
139
|
+
1212135.4200102754,
|
|
140
|
+
656.9,
|
|
141
|
+
1000
|
|
142
|
+
],
|
|
143
|
+
[
|
|
144
|
+
2748077.860283412,
|
|
145
|
+
1211515.1656088883,
|
|
146
|
+
1012.8,
|
|
147
|
+
1500
|
|
148
|
+
],
|
|
149
|
+
[
|
|
150
|
+
2744845.780407053,
|
|
151
|
+
1205982.2556253774,
|
|
152
|
+
1003.2,
|
|
153
|
+
2000
|
|
154
|
+
]
|
|
155
|
+
]
|
|
156
|
+
];
|
|
157
|
+
profile.points = [];
|
|
158
|
+
});
|
|
159
|
+
setLines.addEventListener("click", ()=>{
|
|
160
|
+
profile.lines = [
|
|
161
|
+
[
|
|
162
|
+
[
|
|
163
|
+
740073,
|
|
164
|
+
5905947,
|
|
165
|
+
434,
|
|
166
|
+
0
|
|
167
|
+
],
|
|
168
|
+
[
|
|
169
|
+
740073,
|
|
170
|
+
5905947,
|
|
171
|
+
485,
|
|
172
|
+
25
|
|
173
|
+
],
|
|
174
|
+
[
|
|
175
|
+
740073,
|
|
176
|
+
5905947,
|
|
177
|
+
490,
|
|
178
|
+
60
|
|
179
|
+
],
|
|
180
|
+
[
|
|
181
|
+
740072,
|
|
182
|
+
5905940,
|
|
183
|
+
512,
|
|
184
|
+
100
|
|
185
|
+
]
|
|
186
|
+
],
|
|
187
|
+
[
|
|
188
|
+
[
|
|
189
|
+
740007,
|
|
190
|
+
5905729,
|
|
191
|
+
490,
|
|
192
|
+
155
|
|
193
|
+
],
|
|
194
|
+
[
|
|
195
|
+
740000,
|
|
196
|
+
5905709,
|
|
197
|
+
489,
|
|
198
|
+
169
|
|
199
|
+
],
|
|
200
|
+
[
|
|
201
|
+
739997,
|
|
202
|
+
5905704,
|
|
203
|
+
501,
|
|
204
|
+
173
|
|
205
|
+
],
|
|
206
|
+
[
|
|
207
|
+
739997,
|
|
208
|
+
5905704,
|
|
209
|
+
512,
|
|
210
|
+
180
|
|
211
|
+
],
|
|
212
|
+
[
|
|
213
|
+
739997,
|
|
214
|
+
5905704,
|
|
215
|
+
501,
|
|
216
|
+
210
|
|
217
|
+
]
|
|
218
|
+
],
|
|
219
|
+
[
|
|
220
|
+
[
|
|
221
|
+
740007,
|
|
222
|
+
5905729,
|
|
223
|
+
512,
|
|
224
|
+
255
|
|
225
|
+
],
|
|
226
|
+
[
|
|
227
|
+
740000,
|
|
228
|
+
5905709,
|
|
229
|
+
505,
|
|
230
|
+
369
|
|
231
|
+
],
|
|
232
|
+
[
|
|
233
|
+
739997,
|
|
234
|
+
5905704,
|
|
235
|
+
501,
|
|
236
|
+
390
|
|
237
|
+
]
|
|
238
|
+
]
|
|
239
|
+
];
|
|
240
|
+
profile.points = [
|
|
241
|
+
[
|
|
242
|
+
740073,
|
|
243
|
+
5905947,
|
|
244
|
+
434,
|
|
245
|
+
0
|
|
246
|
+
],
|
|
247
|
+
[
|
|
248
|
+
740073,
|
|
249
|
+
5905947,
|
|
250
|
+
490,
|
|
251
|
+
60
|
|
252
|
+
],
|
|
253
|
+
[
|
|
254
|
+
739997,
|
|
255
|
+
5905704,
|
|
256
|
+
512,
|
|
257
|
+
180
|
|
258
|
+
],
|
|
259
|
+
[
|
|
260
|
+
739997,
|
|
261
|
+
5905704,
|
|
262
|
+
501,
|
|
263
|
+
390
|
|
264
|
+
]
|
|
265
|
+
];
|
|
266
|
+
});
|
|
267
|
+
profile.addEventListener("over", (event)=>{
|
|
268
|
+
logs.textContent = JSON.stringify(event.detail, null, 2);
|
|
269
|
+
tooltip.style.display = "block";
|
|
270
|
+
tooltip.textContent = `${event.detail.coordinate[2]} m`;
|
|
271
|
+
tooltip.style.left = `${event.detail.position.x}px`;
|
|
272
|
+
tooltip.style.top = `${event.detail.position.y - 20}px`;
|
|
273
|
+
});
|
|
274
|
+
profile.addEventListener("out", (event)=>{
|
|
275
|
+
logs.textContent = "";
|
|
276
|
+
tooltip.style.display = "none";
|
|
277
|
+
});
|
|
278
|
+
setLines.click();
|
|
279
|
+
|
|
280
|
+
</script>
|
|
281
|
+
</body>
|
|
282
|
+
</html>
|
package/elevation-profile.ts
CHANGED
|
@@ -124,7 +124,7 @@ export default class ElevationProfile extends LitElement {
|
|
|
124
124
|
const offset = this.yGrid.offset();
|
|
125
125
|
|
|
126
126
|
return svg`
|
|
127
|
-
<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
|
|
127
|
+
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
|
|
128
128
|
<g class="grid y" transform="translate(${this.margin.left}, 0)" />
|
|
129
129
|
<g class="grid x" transform="translate(0, ${this.margin.bottom})" />
|
|
130
130
|
<g class="axis x" transform="translate(0, ${height - this.margin.bottom})" />
|
|
@@ -140,12 +140,19 @@ export default class ElevationProfile extends LitElement {
|
|
|
140
140
|
${guard([this.lines, width, height], () => svg`<path class="elevation highlight" d="${this.line(this.plotData)}" fill="none" />`)}
|
|
141
141
|
</g>
|
|
142
142
|
<line
|
|
143
|
-
class="pointer-line"
|
|
143
|
+
class="pointer-line x"
|
|
144
144
|
x1="${this.pointer.x}"
|
|
145
145
|
y1="${this.margin.top}"
|
|
146
146
|
x2="${this.pointer.x}"
|
|
147
147
|
y2="${height - this.margin.bottom}"
|
|
148
148
|
/>
|
|
149
|
+
<line
|
|
150
|
+
class="pointer-line y"
|
|
151
|
+
x1="${this.margin.left}"
|
|
152
|
+
y1="${this.pointer.y}"
|
|
153
|
+
x2="${width - this.margin.right}"
|
|
154
|
+
y2="${this.pointer.y}"
|
|
155
|
+
/>
|
|
149
156
|
<circle class="pointer-circle-outline" cx="${this.pointer.x}" cy="${this.pointer.y}" r="16"/>
|
|
150
157
|
<circle class="pointer-circle" cx="${this.pointer.x}" cy="${this.pointer.y}" r="6"/>
|
|
151
158
|
</g>
|
|
@@ -161,7 +168,7 @@ export default class ElevationProfile extends LitElement {
|
|
|
161
168
|
@pointermove="${this.pointerMove}"
|
|
162
169
|
@pointerout="${this.pointerOut}"
|
|
163
170
|
/>
|
|
164
|
-
<g
|
|
171
|
+
<g
|
|
165
172
|
transform="translate(${this.margin.left},${height - this.margin.bottom + offset})"
|
|
166
173
|
class="axis"
|
|
167
174
|
style="visibility: ${this.lines.length ? 'visible' : 'hidden'}">
|
|
@@ -182,7 +189,7 @@ export default class ElevationProfile extends LitElement {
|
|
|
182
189
|
public tickValues(values: number[], axis: 'x' | 'y') {
|
|
183
190
|
if (values.length === 0 || (axis !== 'x' && axis !== 'y')) {
|
|
184
191
|
return;
|
|
185
|
-
}
|
|
192
|
+
}
|
|
186
193
|
axis === 'x' ? this.xAxis.tickValues(values) : this.yAxis.tickValues(values);
|
|
187
194
|
}
|
|
188
195
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoblocks/elevation-profile",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"license": "BSD-3-Clause",
|
|
5
5
|
"repository": "github:geoblocks/elevation-profile",
|
|
6
6
|
"type": "module",
|
|
@@ -29,21 +29,21 @@
|
|
|
29
29
|
"publish-demo": "rm -rf build && npm run build-demo && gh-pages -d build"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@lit-labs/observers": "2.0.
|
|
32
|
+
"@lit-labs/observers": "2.0.4",
|
|
33
33
|
"d3-array": "3.2.4",
|
|
34
34
|
"d3-axis": "3.0.0",
|
|
35
35
|
"d3-scale": "4.0.2",
|
|
36
36
|
"d3-selection": "3.0.0",
|
|
37
37
|
"d3-shape": "3.2.0",
|
|
38
|
-
"lit": "3.1
|
|
38
|
+
"lit": "3.2.1",
|
|
39
39
|
"simplify-js": "1.2.4"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@parcel/packager-ts": "2.12.0",
|
|
43
43
|
"@parcel/transformer-typescript-tsc": "2.12.0",
|
|
44
44
|
"@parcel/transformer-typescript-types": "2.12.0",
|
|
45
|
-
"gh-pages": "6.
|
|
45
|
+
"gh-pages": "6.2.0",
|
|
46
46
|
"parcel": "2.12.0",
|
|
47
|
-
"typescript": "5.
|
|
47
|
+
"typescript": "5.6.3"
|
|
48
48
|
}
|
|
49
49
|
}
|