raain-ui 2.3.21 → 2.3.23

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `RaainDivIcon` to show markers in map: it allows rotation and more complex design manipulation
+- Add `example-rotated-icons.html` to use raain-ui MapElement pattern
+
+## [2.3.22] - 2025-10-26
+
+## [2.3.21] - 2025-10-16
+
 ### Changed
 
 - wind-markers.css updated to show trustful indicator

package/README.md

@@ -30,7 +30,7 @@
 ## ✨ Features
 
 - **Interactive Maps**: Leaflet-based map visualizations for geospatial rainfall data
-- **High-Performance Rendering**: Pixi.js-powered rendering for smooth visualizations
+- **Performance Rendering**: Pixi.js-powered rendering for smooth visualizations
 - **Data Charting**: Chart.js integration for time-series and statistical analysis
 - **3D Globe Visualization**: Earth visualization for global rainfall patterns
 - **Time Navigation**: Advanced date/time controls for temporal data exploration
@@ -39,7 +39,7 @@
 
 ## 📸 Screenshots
 
-Here are some screenshots showcasing the raain-ui components in action:
+Here are some screenshots showcasing the `raain-ui` components in action:
 
 ### Map Visualization
 
@@ -61,7 +61,7 @@ npm install raain-ui
 
 ## 🚀 Usage
 
-raain-ui provides a set of components that can be easily integrated into your application. Here's a simple example of
+`raain-ui` provides a set of components that can be integrated into your application. Here's an example of
 how to use the MapElement component:
 
 ```javascript
@@ -97,58 +97,7 @@ npm start
 ```
 
 This will open the example application at http://localhost:1234, where you can explore the various components and
-features of raain-ui.
-
-### 🌬️ Wind Marker Animations
-
-raain-ui includes CSS animations for visualizing wind speed and direction on map markers. To use these animations in
-your application:
-
-**1. Import the CSS file in your global styles:**
-
-```scss
-// In your global.scss or styles.scss
-@import "~raain-ui/data/wind-markers.css";
-```
-
-**Or in HTML:**
-
-```html
-
-<link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
-```
-
-**2. Use with MapElement:**
-
-```typescript
-import {MapLatLng} from 'raain-ui';
-
-// Create a marker with wind data
-const windMarker = new MapLatLng(
-    lat,           // latitude
-    lng,           // longitude
-    azimuth,       // alt property: azimuth 0-360° (0=North, 90=East, 180=South, 270=West)
-    id,            // marker id
-    name,          // marker name
-    strengthInMs   // value property: wind strength in meters/second
-);
-
-// Apply wind animation
-mapElement.changeMarkerStyle(
-    windMarker,
-    'marker-wind marker-wind-225',  // classes: base + direction
-    {strength: 10}                 // CSS variable: wind strength
-);
-```
-
-**Available azimuth classes:** 0, 10, 20, 30, 45, 90, 135, 180, 200, 225, 270, 315
-
-The animation automatically:
-
-- Shows a directional arrow indicating wind direction
-- Animates marker movement in the wind direction
-- Adjusts animation speed based on wind strength
-- Displays a blue glow with intensity matching wind strength
+features of `raain-ui`.
 
 ## 📚 Documentation
 
@@ -215,7 +164,7 @@ See the [Changelog](./CHANGELOG.md) for a detailed list of changes in each versi
 
 ## 👥 Contributing
 
-Contributions are welcome! If you'd like to contribute to raain-ui, please follow these steps:
+Contributions are welcome! If you'd like to contribute to `raain-ui`, please follow these steps:
 
 1. Fork the repository
 2. Create a feature branch (`git checkout -b feature/amazing-feature`)