@geoblocks/elevation-profile 0.0.21 → 0.0.23

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.
Files changed (8) hide show
  1. package/dist/elevation-profile.d.ts.map +1 -1
  2. package/dist/elevation-profile.js +116 -37
  3. package/dist/elevation-profile.js.map +1 -1
  4. package/elevation-profile.ts +13 -12
  5. package/package.json +8 -9
  6. package/dist/index.600fa9d1.js +0 -5513
  7. package/dist/index.600fa9d1.js.map +0 -1
  8. package/dist/index.html +0 -282
package/dist/index.html DELETED
@@ -1,282 +0,0 @@
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>