raain-ui 2.3.20 → 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 +8 -0
- package/data/wind-markers-static.css +168 -0
- package/data/wind-markers.css +77 -526
- package/data/wind-markers.v3.css +634 -0
- package/factories/MapElement.d.ts +7 -1
- package/factories/MapElement.js +114 -14
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [2.3.21] - 2025-10-16
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- wind-markers.css updated to show trustful indicator
|
|
15
|
+
|
|
16
|
+
## [2.3.20] - 2025-10-13
|
|
17
|
+
|
|
10
18
|
### Changed
|
|
11
19
|
|
|
12
20
|
- Dependencies ^ => ~
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* Wind Speed/Direction Static Display 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-static.css";
|
|
7
|
+
*
|
|
8
|
+
* Or in HTML:
|
|
9
|
+
* <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers-static.css">
|
|
10
|
+
*
|
|
11
|
+
* Then apply classes to markers via MapElement.changeMarkerStyle():
|
|
12
|
+
* mapElement.changeMarkerStyle(marker, 'marker-wind-static marker-wind-static-200', {strength: 10, trustful: 0.5});
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* Base wind marker class - static rotation only */
|
|
16
|
+
.marker-wind-static {
|
|
17
|
+
/* Trustful parameter: 0 = red (untrusted), 1 = original (trusted) */
|
|
18
|
+
--trustful: 1;
|
|
19
|
+
|
|
20
|
+
/* Calculate red overlay intensity: (1 - trustful) gives us 0 at trustful=1, 1 at trustful=0 */
|
|
21
|
+
--red-intensity: calc(1 - var(--trustful, 1));
|
|
22
|
+
|
|
23
|
+
/* Rotation will be set by direction-specific classes */
|
|
24
|
+
--rotation: 0deg;
|
|
25
|
+
|
|
26
|
+
/* Apply red colorization based on trustful value */
|
|
27
|
+
/* Strong red tint: grayscale removes color, then apply red via sepia+hue */
|
|
28
|
+
filter: grayscale(var(--red-intensity)) sepia(var(--red-intensity)) saturate(calc(1 + var(--red-intensity) * 5)) hue-rotate(calc(var(--red-intensity) * -50deg));
|
|
29
|
+
|
|
30
|
+
/* Smooth rotation transition when angle changes */
|
|
31
|
+
/* Rotation is applied via JavaScript by modifying the transform property */
|
|
32
|
+
transition: transform 0.3s ease-out;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Speed text label - as a real DOM element (not pseudo-element) */
|
|
36
|
+
.wind-speed-label {
|
|
37
|
+
position: absolute;
|
|
38
|
+
top: -25px;
|
|
39
|
+
left: 50%;
|
|
40
|
+
transform: translateX(-50%);
|
|
41
|
+
font-size: 11px;
|
|
42
|
+
font-weight: bold;
|
|
43
|
+
color: rgba(255, 255, 255, 0.95);
|
|
44
|
+
background: rgba(0, 0, 0, 0.6);
|
|
45
|
+
padding: 2px 5px;
|
|
46
|
+
border-radius: 3px;
|
|
47
|
+
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
white-space: nowrap;
|
|
50
|
+
z-index: 1000;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Direction arrow indicator - as a real DOM element (not pseudo-element) */
|
|
54
|
+
.wind-arrow-indicator {
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: -45px;
|
|
57
|
+
left: 50%;
|
|
58
|
+
font-size: 18px;
|
|
59
|
+
font-weight: bold;
|
|
60
|
+
color: rgba(100, 150, 255, 0.95);
|
|
61
|
+
text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
transform-origin: center;
|
|
64
|
+
z-index: 1000;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Rotate arrow based on parent's rotation variable
|
|
68
|
+
.marker-wind-static-0 ~ .wind-arrow-indicator,
|
|
69
|
+
.marker-wind-static-360 ~ .wind-arrow-indicator {
|
|
70
|
+
transform: translateX(-50%) rotate(180deg);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.marker-wind-static-10 ~ .wind-arrow-indicator {
|
|
74
|
+
transform: translateX(-50%) rotate(190deg);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.marker-wind-static-20 ~ .wind-arrow-indicator {
|
|
78
|
+
transform: translateX(-50%) rotate(200deg);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.marker-wind-static-30 ~ .wind-arrow-indicator {
|
|
82
|
+
transform: translateX(-50%) rotate(210deg);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.marker-wind-static-45 ~ .wind-arrow-indicator {
|
|
86
|
+
transform: translateX(-50%) rotate(225deg);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.marker-wind-static-90 ~ .wind-arrow-indicator {
|
|
90
|
+
transform: translateX(-50%) rotate(270deg);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.marker-wind-static-135 ~ .wind-arrow-indicator {
|
|
94
|
+
transform: translateX(-50%) rotate(315deg);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.marker-wind-static-180 ~ .wind-arrow-indicator {
|
|
98
|
+
transform: translateX(-50%) rotate(0deg);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.marker-wind-static-200 ~ .wind-arrow-indicator {
|
|
102
|
+
transform: translateX(-50%) rotate(20deg);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.marker-wind-static-225 ~ .wind-arrow-indicator {
|
|
106
|
+
transform: translateX(-50%) rotate(45deg);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.marker-wind-static-270 ~ .wind-arrow-indicator {
|
|
110
|
+
transform: translateX(-50%) rotate(90deg);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.marker-wind-static-315 ~ .wind-arrow-indicator {
|
|
114
|
+
transform: translateX(-50%) rotate(135deg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
*/
|
|
118
|
+
|
|
119
|
+
/* Wind direction classes for every available degree */
|
|
120
|
+
/* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left)*/
|
|
121
|
+
|
|
122
|
+
.marker-wind-static-0 .marker-wind-static-360 {
|
|
123
|
+
--rotation: 0deg;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.marker-wind-static-10 {
|
|
127
|
+
--rotation: 10deg;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.marker-wind-static-20 {
|
|
131
|
+
--rotation: 20deg;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.marker-wind-static-30 {
|
|
135
|
+
--rotation: 30deg;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.marker-wind-static-45 {
|
|
139
|
+
--rotation: 45deg;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.marker-wind-static-90 {
|
|
143
|
+
--rotation: 90deg;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.marker-wind-static-135 {
|
|
147
|
+
--rotation: 135deg;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.marker-wind-static-180 {
|
|
151
|
+
--rotation: 180deg;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.marker-wind-static-200 {
|
|
155
|
+
--rotation: 200deg;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.marker-wind-static-225 {
|
|
159
|
+
--rotation: 225deg;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.marker-wind-static-270 {
|
|
163
|
+
--rotation: 270deg;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.marker-wind-static-315 {
|
|
167
|
+
--rotation: 315deg;
|
|
168
|
+
}
|