raain-ui 2.3.21 → 2.3.22
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/CHANGELOG.md +2 -0
- package/data/wind-markers-static.css +168 -0
- package/data/wind-markers.css +70 -536
- package/data/wind-markers.v3.css +634 -0
- package/factories/MapElement.d.ts +7 -1
- package/factories/MapElement.js +114 -14
- package/package.json +3 -3
|
@@ -0,0 +1,634 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* Wind Speed/Direction Animation for Leaflet Markers
|
|
3
|
+
* ============================================================================
|
|
4
|
+
* Usage: Import this CSS file in your app's global styles or index.html
|
|
5
|
+
*
|
|
6
|
+
* @import "~raain-ui/data/wind-markers.css";
|
|
7
|
+
*
|
|
8
|
+
* Or in HTML:
|
|
9
|
+
* <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
|
|
10
|
+
*
|
|
11
|
+
* Then apply classes to markers via MapElement.changeMarkerStyle():
|
|
12
|
+
* mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10, trustful: 0.5});
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* Base wind marker class */
|
|
16
|
+
.marker-wind {
|
|
17
|
+
/* Calculate animation speed: stronger wind = faster animation */
|
|
18
|
+
--duration: calc(5s - (min(var(--strength, 5), 25) * 0.08s));
|
|
19
|
+
|
|
20
|
+
/* Calculate displacement: subtle animation, reduced from original */
|
|
21
|
+
--displacement: calc(var(--strength, 5) * 2);
|
|
22
|
+
|
|
23
|
+
/* Trustful parameter: 0 = red (untrusted), 1 = original (trusted) */
|
|
24
|
+
--trustful: 1;
|
|
25
|
+
|
|
26
|
+
/* Calculate red overlay intensity: (1 - trustful) gives us 0 at trustful=1, 1 at trustful=0 */
|
|
27
|
+
--red-intensity: calc(1 - var(--trustful, 1));
|
|
28
|
+
|
|
29
|
+
/* Visual glow intensity based on strength and trustfulness */
|
|
30
|
+
/* When trustful is low, glow becomes red; when high, glow is blue */
|
|
31
|
+
filter: drop-shadow(0 0 calc(var(--strength, 5) * 0.5px) rgba(
|
|
32
|
+
calc(100 + 155 * var(--red-intensity)),
|
|
33
|
+
calc(150 * var(--trustful, 1)),
|
|
34
|
+
calc(255 * var(--trustful, 1)),
|
|
35
|
+
0.8
|
|
36
|
+
));
|
|
37
|
+
|
|
38
|
+
/* Rotation will be set by direction-specific classes */
|
|
39
|
+
--rotation: 0deg;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.marker-wind img {
|
|
43
|
+
/* Apply red colorization based on trustful value */
|
|
44
|
+
/* Strong red tint: grayscale removes color, then apply red via sepia+hue */
|
|
45
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
46
|
+
|
|
47
|
+
/* Rotation set by direction-specific classes */
|
|
48
|
+
transform: rotate(var(--rotation)) !important;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Variant: Travel animation (move from src to target, disappear, reappear at src)
|
|
52
|
+
Usage: Add 'marker-wind-travel' class in addition to marker-wind and direction class
|
|
53
|
+
Example: 'marker-wind marker-wind-travel marker-wind-200' */
|
|
54
|
+
.marker-wind-travel {
|
|
55
|
+
/* Override animation to use travel mode */
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Pulse animation (opacity) */
|
|
59
|
+
@keyframes wind-pulse {
|
|
60
|
+
0%, 100% {
|
|
61
|
+
opacity: 1;
|
|
62
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
63
|
+
}
|
|
64
|
+
50% {
|
|
65
|
+
opacity: 0.85;
|
|
66
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Travel mode pulse - fade out at destination */
|
|
71
|
+
@keyframes wind-pulse-travel {
|
|
72
|
+
0% {
|
|
73
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
74
|
+
}
|
|
75
|
+
70% {
|
|
76
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
77
|
+
}
|
|
78
|
+
71%, 99% {
|
|
79
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
80
|
+
}
|
|
81
|
+
100% {
|
|
82
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Direction arrow indicator */
|
|
87
|
+
.marker-wind::after {
|
|
88
|
+
content: '→';
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: -20px;
|
|
91
|
+
left: 50%;
|
|
92
|
+
font-size: 18px;
|
|
93
|
+
font-weight: bold;
|
|
94
|
+
color: rgba(100, 150, 255, 0.95);
|
|
95
|
+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
|
|
96
|
+
pointer-events: none;
|
|
97
|
+
transform-origin: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* Wind direction classes for every available degree */
|
|
101
|
+
/* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left) */
|
|
102
|
+
/* SVG arrow points right (East), so 90° = 0° rotation, others adjust from there */
|
|
103
|
+
|
|
104
|
+
.marker-wind-0::after, .marker-wind-360::after {
|
|
105
|
+
transform: translateX(-50%) rotate(180deg);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.marker-wind-0, .marker-wind-360 {
|
|
109
|
+
--rotation: -90deg;
|
|
110
|
+
animation: wind-0 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes wind-0 {
|
|
114
|
+
0%, 100% {
|
|
115
|
+
translate: 0 0;
|
|
116
|
+
}
|
|
117
|
+
50% {
|
|
118
|
+
translate: 0 calc(var(--displacement) * -1px);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.marker-wind-travel.marker-wind-0, .marker-wind-travel.marker-wind-360 {
|
|
123
|
+
animation: wind-0-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@keyframes wind-0-travel {
|
|
127
|
+
0% {
|
|
128
|
+
translate: 0 0;
|
|
129
|
+
opacity: 1;
|
|
130
|
+
}
|
|
131
|
+
70% {
|
|
132
|
+
translate: 0 calc(var(--displacement) * -1px);
|
|
133
|
+
opacity: 1;
|
|
134
|
+
}
|
|
135
|
+
71% {
|
|
136
|
+
opacity: 0;
|
|
137
|
+
}
|
|
138
|
+
99% {
|
|
139
|
+
translate: 0 0;
|
|
140
|
+
opacity: 0;
|
|
141
|
+
}
|
|
142
|
+
100% {
|
|
143
|
+
translate: 0 0;
|
|
144
|
+
opacity: 1;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.marker-wind-10::after {
|
|
149
|
+
transform: translateX(-50%) rotate(190deg);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.marker-wind-10 {
|
|
153
|
+
--rotation: -80deg;
|
|
154
|
+
animation: wind-10 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@keyframes wind-10 {
|
|
158
|
+
0%, 100% {
|
|
159
|
+
translate: 0 0;
|
|
160
|
+
}
|
|
161
|
+
50% {
|
|
162
|
+
translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.marker-wind-20::after {
|
|
167
|
+
transform: translateX(-50%) rotate(200deg);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.marker-wind-20 {
|
|
171
|
+
--rotation: -70deg;
|
|
172
|
+
animation: wind-20 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
@keyframes wind-20 {
|
|
176
|
+
0%, 100% {
|
|
177
|
+
translate: 0 0;
|
|
178
|
+
}
|
|
179
|
+
50% {
|
|
180
|
+
translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.marker-wind-30::after {
|
|
185
|
+
transform: translateX(-50%) rotate(210deg);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.marker-wind-30 {
|
|
189
|
+
--rotation: -60deg;
|
|
190
|
+
animation: wind-30 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@keyframes wind-30 {
|
|
194
|
+
0%, 100% {
|
|
195
|
+
translate: 0 0;
|
|
196
|
+
}
|
|
197
|
+
50% {
|
|
198
|
+
translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.marker-wind-45::after {
|
|
203
|
+
transform: translateX(-50%) rotate(225deg);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.marker-wind-45 {
|
|
207
|
+
--rotation: -45deg;
|
|
208
|
+
animation: wind-45 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
@keyframes wind-45 {
|
|
212
|
+
0%, 100% {
|
|
213
|
+
translate: 0 0;
|
|
214
|
+
}
|
|
215
|
+
50% {
|
|
216
|
+
translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.marker-wind-90::after {
|
|
221
|
+
transform: translateX(-50%) rotate(270deg);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.marker-wind-90 {
|
|
225
|
+
--rotation: 0deg;
|
|
226
|
+
animation: wind-90 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@keyframes wind-90 {
|
|
230
|
+
0%, 100% {
|
|
231
|
+
translate: 0 0;
|
|
232
|
+
}
|
|
233
|
+
50% {
|
|
234
|
+
translate: calc(var(--displacement) * 1px) 0;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.marker-wind-135::after {
|
|
239
|
+
transform: translateX(-50%) rotate(315deg);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.marker-wind-135 {
|
|
243
|
+
--rotation: 45deg;
|
|
244
|
+
animation: wind-135 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@keyframes wind-135 {
|
|
248
|
+
0%, 100% {
|
|
249
|
+
translate: 0 0;
|
|
250
|
+
}
|
|
251
|
+
50% {
|
|
252
|
+
translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.marker-wind-180::after {
|
|
257
|
+
transform: translateX(-50%) rotate(0deg);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.marker-wind-180 {
|
|
261
|
+
--rotation: 90deg;
|
|
262
|
+
animation: wind-180 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@keyframes wind-180 {
|
|
266
|
+
0%, 100% {
|
|
267
|
+
translate: 0 0;
|
|
268
|
+
}
|
|
269
|
+
50% {
|
|
270
|
+
translate: 0 calc(var(--displacement) * 1px);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.marker-wind-200::after {
|
|
275
|
+
transform: translateX(-50%) rotate(20deg);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.marker-wind-200 {
|
|
279
|
+
--rotation: 110deg;
|
|
280
|
+
animation: wind-200 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
@keyframes wind-200 {
|
|
284
|
+
0%, 100% {
|
|
285
|
+
translate: 0 0;
|
|
286
|
+
}
|
|
287
|
+
50% {
|
|
288
|
+
translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.marker-wind-225::after {
|
|
293
|
+
transform: translateX(-50%) rotate(45deg);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.marker-wind-225 {
|
|
297
|
+
--rotation: 135deg;
|
|
298
|
+
animation: wind-225 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
@keyframes wind-225 {
|
|
302
|
+
0%, 100% {
|
|
303
|
+
translate: 0 0;
|
|
304
|
+
}
|
|
305
|
+
50% {
|
|
306
|
+
translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.marker-wind-270::after {
|
|
311
|
+
transform: translateX(-50%) rotate(90deg);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.marker-wind-270 {
|
|
315
|
+
--rotation: 180deg;
|
|
316
|
+
animation: wind-270 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
@keyframes wind-270 {
|
|
320
|
+
0%, 100% {
|
|
321
|
+
translate: 0 0;
|
|
322
|
+
}
|
|
323
|
+
50% {
|
|
324
|
+
translate: calc(var(--displacement) * -1px) 0;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.marker-wind-315::after {
|
|
329
|
+
transform: translateX(-50%) rotate(135deg);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.marker-wind-315 {
|
|
333
|
+
--rotation: -135deg;
|
|
334
|
+
animation: wind-315 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
@keyframes wind-315 {
|
|
338
|
+
0%, 100% {
|
|
339
|
+
translate: 0 0;
|
|
340
|
+
}
|
|
341
|
+
50% {
|
|
342
|
+
translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* ============================================================================
|
|
347
|
+
* Travel Mode Animations - Move from source to target, disappear, reappear
|
|
348
|
+
* ============================================================================ */
|
|
349
|
+
|
|
350
|
+
.marker-wind-travel.marker-wind-10 {
|
|
351
|
+
animation: wind-10-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
@keyframes wind-10-travel {
|
|
355
|
+
0% {
|
|
356
|
+
translate: 0 0;
|
|
357
|
+
opacity: 1;
|
|
358
|
+
}
|
|
359
|
+
70% {
|
|
360
|
+
translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px);
|
|
361
|
+
opacity: 1;
|
|
362
|
+
}
|
|
363
|
+
71% {
|
|
364
|
+
opacity: 0;
|
|
365
|
+
}
|
|
366
|
+
99% {
|
|
367
|
+
translate: 0 0;
|
|
368
|
+
opacity: 0;
|
|
369
|
+
}
|
|
370
|
+
100% {
|
|
371
|
+
translate: 0 0;
|
|
372
|
+
opacity: 1;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.marker-wind-travel.marker-wind-20 {
|
|
377
|
+
animation: wind-20-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
@keyframes wind-20-travel {
|
|
381
|
+
0% {
|
|
382
|
+
translate: 0 0;
|
|
383
|
+
opacity: 1;
|
|
384
|
+
}
|
|
385
|
+
70% {
|
|
386
|
+
translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px);
|
|
387
|
+
opacity: 1;
|
|
388
|
+
}
|
|
389
|
+
71% {
|
|
390
|
+
opacity: 0;
|
|
391
|
+
}
|
|
392
|
+
99% {
|
|
393
|
+
translate: 0 0;
|
|
394
|
+
opacity: 0;
|
|
395
|
+
}
|
|
396
|
+
100% {
|
|
397
|
+
translate: 0 0;
|
|
398
|
+
opacity: 1;
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.marker-wind-travel.marker-wind-30 {
|
|
403
|
+
animation: wind-30-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
@keyframes wind-30-travel {
|
|
407
|
+
0% {
|
|
408
|
+
translate: 0 0;
|
|
409
|
+
opacity: 1;
|
|
410
|
+
}
|
|
411
|
+
70% {
|
|
412
|
+
translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px);
|
|
413
|
+
opacity: 1;
|
|
414
|
+
}
|
|
415
|
+
71% {
|
|
416
|
+
opacity: 0;
|
|
417
|
+
}
|
|
418
|
+
99% {
|
|
419
|
+
translate: 0 0;
|
|
420
|
+
opacity: 0;
|
|
421
|
+
}
|
|
422
|
+
100% {
|
|
423
|
+
translate: 0 0;
|
|
424
|
+
opacity: 1;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.marker-wind-travel.marker-wind-45 {
|
|
429
|
+
animation: wind-45-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
@keyframes wind-45-travel {
|
|
433
|
+
0% {
|
|
434
|
+
translate: 0 0;
|
|
435
|
+
opacity: 1;
|
|
436
|
+
}
|
|
437
|
+
70% {
|
|
438
|
+
translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px);
|
|
439
|
+
opacity: 1;
|
|
440
|
+
}
|
|
441
|
+
71% {
|
|
442
|
+
opacity: 0;
|
|
443
|
+
}
|
|
444
|
+
99% {
|
|
445
|
+
translate: 0 0;
|
|
446
|
+
opacity: 0;
|
|
447
|
+
}
|
|
448
|
+
100% {
|
|
449
|
+
translate: 0 0;
|
|
450
|
+
opacity: 1;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.marker-wind-travel.marker-wind-90 {
|
|
455
|
+
animation: wind-90-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
@keyframes wind-90-travel {
|
|
459
|
+
0% {
|
|
460
|
+
translate: 0 0;
|
|
461
|
+
opacity: 1;
|
|
462
|
+
}
|
|
463
|
+
70% {
|
|
464
|
+
translate: calc(var(--displacement) * 1px) 0;
|
|
465
|
+
opacity: 1;
|
|
466
|
+
}
|
|
467
|
+
71% {
|
|
468
|
+
opacity: 0;
|
|
469
|
+
}
|
|
470
|
+
99% {
|
|
471
|
+
translate: 0 0;
|
|
472
|
+
opacity: 0;
|
|
473
|
+
}
|
|
474
|
+
100% {
|
|
475
|
+
translate: 0 0;
|
|
476
|
+
opacity: 1;
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
.marker-wind-travel.marker-wind-135 {
|
|
481
|
+
animation: wind-135-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
@keyframes wind-135-travel {
|
|
485
|
+
0% {
|
|
486
|
+
translate: 0 0;
|
|
487
|
+
opacity: 1;
|
|
488
|
+
}
|
|
489
|
+
70% {
|
|
490
|
+
translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px);
|
|
491
|
+
opacity: 1;
|
|
492
|
+
}
|
|
493
|
+
71% {
|
|
494
|
+
opacity: 0;
|
|
495
|
+
}
|
|
496
|
+
99% {
|
|
497
|
+
translate: 0 0;
|
|
498
|
+
opacity: 0;
|
|
499
|
+
}
|
|
500
|
+
100% {
|
|
501
|
+
translate: 0 0;
|
|
502
|
+
opacity: 1;
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.marker-wind-travel.marker-wind-180 {
|
|
507
|
+
animation: wind-180-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
@keyframes wind-180-travel {
|
|
511
|
+
0% {
|
|
512
|
+
translate: 0 0;
|
|
513
|
+
opacity: 1;
|
|
514
|
+
}
|
|
515
|
+
70% {
|
|
516
|
+
translate: 0 calc(var(--displacement) * 1px);
|
|
517
|
+
opacity: 1;
|
|
518
|
+
}
|
|
519
|
+
71% {
|
|
520
|
+
opacity: 0;
|
|
521
|
+
}
|
|
522
|
+
99% {
|
|
523
|
+
translate: 0 0;
|
|
524
|
+
opacity: 0;
|
|
525
|
+
}
|
|
526
|
+
100% {
|
|
527
|
+
translate: 0 0;
|
|
528
|
+
opacity: 1;
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.marker-wind-travel.marker-wind-200 {
|
|
533
|
+
animation: wind-200-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
@keyframes wind-200-travel {
|
|
537
|
+
0% {
|
|
538
|
+
translate: 0 0;
|
|
539
|
+
opacity: 1;
|
|
540
|
+
}
|
|
541
|
+
70% {
|
|
542
|
+
translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px);
|
|
543
|
+
opacity: 1;
|
|
544
|
+
}
|
|
545
|
+
71% {
|
|
546
|
+
opacity: 0;
|
|
547
|
+
}
|
|
548
|
+
99% {
|
|
549
|
+
translate: 0 0;
|
|
550
|
+
opacity: 0;
|
|
551
|
+
}
|
|
552
|
+
100% {
|
|
553
|
+
translate: 0 0;
|
|
554
|
+
opacity: 1;
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.marker-wind-travel.marker-wind-225 {
|
|
559
|
+
animation: wind-225-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
@keyframes wind-225-travel {
|
|
563
|
+
0% {
|
|
564
|
+
translate: 0 0;
|
|
565
|
+
opacity: 1;
|
|
566
|
+
}
|
|
567
|
+
70% {
|
|
568
|
+
translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px);
|
|
569
|
+
opacity: 1;
|
|
570
|
+
}
|
|
571
|
+
71% {
|
|
572
|
+
opacity: 0;
|
|
573
|
+
}
|
|
574
|
+
99% {
|
|
575
|
+
translate: 0 0;
|
|
576
|
+
opacity: 0;
|
|
577
|
+
}
|
|
578
|
+
100% {
|
|
579
|
+
translate: 0 0;
|
|
580
|
+
opacity: 1;
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.marker-wind-travel.marker-wind-270 {
|
|
585
|
+
animation: wind-270-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
@keyframes wind-270-travel {
|
|
589
|
+
0% {
|
|
590
|
+
translate: 0 0;
|
|
591
|
+
opacity: 1;
|
|
592
|
+
}
|
|
593
|
+
70% {
|
|
594
|
+
translate: calc(var(--displacement) * -1px) 0;
|
|
595
|
+
opacity: 1;
|
|
596
|
+
}
|
|
597
|
+
71% {
|
|
598
|
+
opacity: 0;
|
|
599
|
+
}
|
|
600
|
+
99% {
|
|
601
|
+
translate: 0 0;
|
|
602
|
+
opacity: 0;
|
|
603
|
+
}
|
|
604
|
+
100% {
|
|
605
|
+
translate: 0 0;
|
|
606
|
+
opacity: 1;
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.marker-wind-travel.marker-wind-315 {
|
|
611
|
+
animation: wind-315-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
@keyframes wind-315-travel {
|
|
615
|
+
0% {
|
|
616
|
+
translate: 0 0;
|
|
617
|
+
opacity: 1;
|
|
618
|
+
}
|
|
619
|
+
70% {
|
|
620
|
+
translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px);
|
|
621
|
+
opacity: 1;
|
|
622
|
+
}
|
|
623
|
+
71% {
|
|
624
|
+
opacity: 0;
|
|
625
|
+
}
|
|
626
|
+
99% {
|
|
627
|
+
translate: 0 0;
|
|
628
|
+
opacity: 0;
|
|
629
|
+
}
|
|
630
|
+
100% {
|
|
631
|
+
translate: 0 0;
|
|
632
|
+
opacity: 1;
|
|
633
|
+
}
|
|
634
|
+
}
|
|
@@ -27,6 +27,11 @@ export declare class MapElement {
|
|
|
27
27
|
compositeLayer: CompositeLayer;
|
|
28
28
|
markersProduced: Marker[];
|
|
29
29
|
alpha: number;
|
|
30
|
+
protected markerStyles: {
|
|
31
|
+
marker: Marker;
|
|
32
|
+
style: any;
|
|
33
|
+
cssVars: any;
|
|
34
|
+
}[];
|
|
30
35
|
constructor(center?: MapLatLng | {
|
|
31
36
|
lat: number;
|
|
32
37
|
lng: number;
|
|
@@ -40,7 +45,6 @@ export declare class MapElement {
|
|
|
40
45
|
iconsLatLng: MapLatLng[];
|
|
41
46
|
iconsOptions?: IconOptions;
|
|
42
47
|
}[]): Marker<any>[];
|
|
43
|
-
getMarkerElement(markerToFind: MapLatLng): Marker<any>;
|
|
44
48
|
/**
|
|
45
49
|
* Change marker style by adding CSS classes and/or setting CSS custom properties
|
|
46
50
|
* @param marker The marker to style (MapLatLng)
|
|
@@ -56,5 +60,7 @@ export declare class MapElement {
|
|
|
56
60
|
classes: string;
|
|
57
61
|
cssVars?: Record<string, string | number>;
|
|
58
62
|
}, cssVars?: Record<string, string | number>): void;
|
|
63
|
+
protected getMarkerElement(markerToFind: MapLatLng): Marker<any>;
|
|
64
|
+
protected onZoomEnd(event: any): void;
|
|
59
65
|
private addCompositeLayer;
|
|
60
66
|
}
|