raain-ui 2.3.21 → 2.3.23

package/tools/RaainDivIcon.js

@@ -0,0 +1,243 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RaainDivIcon = void 0;
+const leaflet_1 = require("leaflet");
+/**
+ * A DivIcon with built-in rotation and dynamic sizing support
+ *
+ * Usage:
+ * ```typescript
+ * // Basic usage with rotation
+ * const icon = new RaainDivIcon({
+ *     html: '<div style="width: 30px; height: 30px; background: red;"></div>',
+ *     rotationAngle: 0,
+ *     className: 'my-custom-marker'
+ * });
+ *
+ * // With dynamic sizing (for wind speed visualization)
+ * const windIcon = new RaainDivIcon({
+ *     htmlTemplate: `<div style="width: {width}px; height: {height}px; background: blue;"></div>`,
+ *     width: 40,
+ *     height: 40,
+ *     rotationAngle: 45
+ * });
+ *
+ * const marker = L.marker([51.505, -0.09], { icon: windIcon }).addTo(map);
+ *
+ * // Update rotation dynamically
+ * windIcon.setRotation(90);
+ *
+ * // Update size dynamically (e.g., based on wind speed)
+ * windIcon.setSize(60, 60);
+ *
+ * // Update both size and rotation
+ * windIcon.update({ width: 50, height: 50, rotationAngle: 180 });
+ * ```
+ */
+class RaainDivIcon extends leaflet_1.DivIcon {
+    constructor(options) {
+        var _a, _b;
+        // Process initial size options
+        const processedOptions = RaainDivIcon._processSizeOptions(options);
+        super(processedOptions);
+        this.options = options;
+        this._icon = null;
+        this._marker = null;
+        this.options = Object.assign(Object.assign({}, processedOptions), { rotationAngle: (_a = options.rotationAngle) !== null && _a !== void 0 ? _a : 0, rotationOrigin: (_b = options.rotationOrigin) !== null && _b !== void 0 ? _b : 'center center', width: options.width, height: options.height, htmlTemplate: options.htmlTemplate });
+    }
+    /**
+     * Process size options and generate HTML from template if needed
+     */
+    static _processSizeOptions(options) {
+        var _a, _b, _c, _d;
+        const processed = Object.assign({}, options);
+        // Update iconSize if width/height are provided
+        if (options.width !== undefined || options.height !== undefined) {
+            const width = (_a = options.width) !== null && _a !== void 0 ? _a : (Array.isArray(options.iconSize) ? options.iconSize[0] : 30);
+            const height = (_b = options.height) !== null && _b !== void 0 ? _b : (Array.isArray(options.iconSize) ? options.iconSize[1] : 30);
+            processed.iconSize = [width, height];
+            // Update iconAnchor proportionally if it exists
+            if (options.iconAnchor && Array.isArray(options.iconAnchor)) {
+                const oldSize = Array.isArray(options.iconSize) ? options.iconSize : [30, 30];
+                const anchorX = (options.iconAnchor[0] / oldSize[0]) * width;
+                const anchorY = (options.iconAnchor[1] / oldSize[1]) * height;
+                processed.iconAnchor = [anchorX, anchorY];
+            }
+        }
+        // Generate HTML from template if provided
+        if (options.htmlTemplate && (options.width !== undefined || options.height !== undefined)) {
+            const width = (_c = options.width) !== null && _c !== void 0 ? _c : (Array.isArray(processed.iconSize) ? processed.iconSize[0] : 30);
+            const height = (_d = options.height) !== null && _d !== void 0 ? _d : (Array.isArray(processed.iconSize) ? processed.iconSize[1] : 30);
+            processed.html = options.htmlTemplate
+                .replace(/\{width\}/g, String(width))
+                .replace(/\{height\}/g, String(height));
+        }
+        return processed;
+    }
+    /**
+     * Override createIcon to store reference and apply initial rotation
+     */
+    createIcon(oldIcon) {
+        const div = super.createIcon(oldIcon);
+        this._icon = div;
+        // Set transform-origin
+        div.style.transformOrigin = this.options.rotationOrigin;
+        // Apply initial rotation
+        this.applyRotation();
+        return div;
+    }
+    /**
+     * Set the rotation angle in degrees
+     * @param angle Rotation angle (0 = North, 90 = East, 180 = South, 270 = West)
+     */
+    setRotation(angle) {
+        this.options.rotationAngle = angle;
+        this.applyRotation();
+        return this;
+    }
+    /**
+     * Get the current rotation angle
+     */
+    getRotation() {
+        var _a;
+        return (_a = this.options.rotationAngle) !== null && _a !== void 0 ? _a : 0;
+    }
+    /**
+     * Set the size (width and height) of the icon dynamically
+     * @param width New width in pixels
+     * @param height New height in pixels
+     */
+    setSize(width, height) {
+        this.options.width = width;
+        this.options.height = height;
+        this._updateSize();
+        return this;
+    }
+    /**
+     * Get the current size
+     */
+    getSize() {
+        var _a, _b;
+        const iconSize = Array.isArray(this.options.iconSize) ? this.options.iconSize : [30, 30];
+        return {
+            width: (_a = this.options.width) !== null && _a !== void 0 ? _a : iconSize[0],
+            height: (_b = this.options.height) !== null && _b !== void 0 ? _b : iconSize[1],
+        };
+    }
+    /**
+     * Update multiple properties at once (size, rotation)
+     * @param updates Object with properties to update
+     */
+    update(updates) {
+        let sizeChanged = false;
+        if (updates.width !== undefined) {
+            this.options.width = updates.width;
+            sizeChanged = true;
+        }
+        if (updates.height !== undefined) {
+            this.options.height = updates.height;
+            sizeChanged = true;
+        }
+        if (updates.rotationAngle !== undefined) {
+            this.options.rotationAngle = updates.rotationAngle;
+        }
+        if (sizeChanged) {
+            this._updateSize();
+        }
+        this.applyRotation();
+        return this;
+    }
+    /**
+     * Set the transform origin for rotation
+     * @param origin CSS transform-origin value (e.g., 'center center', '50% 50%')
+     */
+    setRotationOrigin(origin) {
+        this.options.rotationOrigin = origin;
+        if (this._icon) {
+            this._icon.style.transformOrigin = origin;
+            this.applyRotation();
+        }
+        return this;
+    }
+    /**
+     * Apply the current rotation to the icon element
+     * This preserves any existing translate3d transformations from Leaflet
+     */
+    applyRotation() {
+        var _a;
+        if (!this._icon) {
+            return this;
+        }
+        const currentTransform = this._icon.style.transform || '';
+        const angle = (_a = this.options.rotationAngle) !== null && _a !== void 0 ? _a : 0;
+        // Preserve existing translate3d from Leaflet positioning
+        if (currentTransform.includes('translate3d')) {
+            // Remove any existing rotation from the transform
+            const withoutRotation = currentTransform.replace(/\s*rotate\([^)]+\)/g, '');
+            this._icon.style.transform = `${withoutRotation} rotate(${angle}deg)`;
+        }
+        else {
+            this._icon.style.transform = `rotate(${angle}deg)`;
+        }
+        return this;
+    }
+    /**
+     * Bind this icon to a marker for automatic rotation updates
+     * @param marker The Leaflet marker to bind to
+     */
+    bindToMarker(marker) {
+        this._marker = marker;
+        // Re-apply rotation on marker events that might reset the transform
+        marker.on('move', () => this.applyRotation());
+        marker.on('add', () => this.applyRotation());
+        return this;
+    }
+    /**
+     * Unbind from the current marker
+     */
+    unbindFromMarker() {
+        if (this._marker) {
+            this._marker.off('move');
+            this._marker.off('add');
+            this._marker = null;
+        }
+        return this;
+    }
+    /**
+     * Get the icon HTML element (if created)
+     */
+    getIconElement() {
+        return this._icon;
+    }
+    /**
+     * Internal method to update the icon's size
+     */
+    _updateSize() {
+        if (!this._icon || this.options.width === undefined || this.options.height === undefined) {
+            return;
+        }
+        const width = this.options.width;
+        const height = this.options.height;
+        // Update iconSize
+        this.options.iconSize = [width, height];
+        // Update the icon element's size
+        this._icon.style.width = `${width}px`;
+        this._icon.style.height = `${height}px`;
+        // Update anchor proportionally
+        if (this.options.iconAnchor && Array.isArray(this.options.iconAnchor)) {
+            const anchorX = this.options.iconAnchor[0];
+            const anchorY = this.options.iconAnchor[1];
+            this._icon.style.marginLeft = `-${anchorX}px`;
+            this._icon.style.marginTop = `-${anchorY}px`;
+        }
+        // Regenerate HTML from template if available
+        if (this.options.htmlTemplate) {
+            const newHtml = this.options.htmlTemplate
+                .replace(/\{width\}/g, String(width))
+                .replace(/\{height\}/g, String(height));
+            this._icon.innerHTML = newHtml;
+        }
+    }
+}
+exports.RaainDivIcon = RaainDivIcon;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFhaW5EaXZJY29uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Rvb2xzL1JhYWluRGl2SWNvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxxQ0FBeUU7QUFnQ3pFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBK0JHO0FBQ0gsTUFBYSxZQUFhLFNBQVEsaUJBQU87SUFJckMsWUFBbUIsT0FBNEI7O1FBQzNDLCtCQUErQjtRQUMvQixNQUFNLGdCQUFnQixHQUFHLFlBQVksQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNuRSxLQUFLLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUhULFlBQU8sR0FBUCxPQUFPLENBQXFCO1FBSHZDLFVBQUssR0FBdUIsSUFBSSxDQUFDO1FBQ2pDLFlBQU8sR0FBa0IsSUFBSSxDQUFDO1FBT2xDLElBQUksQ0FBQyxPQUFPLG1DQUNMLGdCQUFnQixLQUNuQixhQUFhLEVBQUUsTUFBQSxPQUFPLENBQUMsYUFBYSxtQ0FBSSxDQUFDLEVBQ3pDLGNBQWMsRUFBRSxNQUFBLE9BQU8sQ0FBQyxjQUFjLG1DQUFJLGVBQWUsRUFDekQsS0FBSyxFQUFFLE9BQU8sQ0FBQyxLQUFLLEVBQ3BCLE1BQU0sRUFBRSxPQUFPLENBQUMsTUFBTSxFQUN0QixZQUFZLEVBQUUsT0FBTyxDQUFDLFlBQVksR0FDckMsQ0FBQztJQUNOLENBQUM7SUFFRDs7T0FFRztJQUNLLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxPQUE0Qjs7UUFDM0QsTUFBTSxTQUFTLHFCQUFPLE9BQU8sQ0FBQyxDQUFDO1FBRS9CLCtDQUErQztRQUMvQyxJQUFJLE9BQU8sQ0FBQyxLQUFLLEtBQUssU0FBUyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEtBQUssU0FBUyxFQUFFO1lBQzdELE1BQU0sS0FBSyxHQUNQLE1BQUEsT0FBTyxDQUFDLEtBQUssbUNBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FB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

package/tools/index.d.ts

@@ -3,3 +3,4 @@ export * from './CartesianMapValue';
 export * from './MapTools';
 export * from './MapLatLng';
 export * from './IconMapValue';
+export * from './RaainDivIcon';

package/tools/index.js

@@ -19,4 +19,5 @@ __exportStar(require("./CartesianMapValue"), exports);
 __exportStar(require("./MapTools"), exports);
 __exportStar(require("./MapLatLng"), exports);
 __exportStar(require("./IconMapValue"), exports);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdG9vbHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLGtEQUFnQztBQUNoQyxzREFBb0M7QUFDcEMsNkNBQTJCO0FBQzNCLDhDQUE0QjtBQUM1QixpREFBK0IifQ==
+__exportStar(require("./RaainDivIcon"), exports);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdG9vbHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLGtEQUFnQztBQUNoQyxzREFBb0M7QUFDcEMsNkNBQTJCO0FBQzNCLDhDQUE0QjtBQUM1QixpREFBK0I7QUFDL0IsaURBQStCIn0=

package/utils/spinning-ball-wrapper.js

@@ -29,7 +29,7 @@ const spinningBallOriginal = __importStar(require("spinning-ball"));
 // Use the imported module or create a fallback if it fails
 const spinningBallModule = spinningBallOriginal || {
     init: (params) => {
-        console.error('spinning-ball module failed to load properly');
+        console.error('raain-ui >> spinning-ball module failed to load properly');
         // Return a minimal implementation to prevent crashes
         return {
             update: () => false,
@@ -42,4 +42,4 @@ const spinningBallModule = spinningBallOriginal || {
     },
 };
 module.exports = spinningBallModule;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5pbmctYmFsbC13cmFwcGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL3NwaW5uaW5nLWJhbGwtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsb0ZBQW9GO0FBQ3BGLDJFQUEyRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRTNFLG1DQUFtQztBQUNuQyxvRUFBc0Q7QUFjdEQsMkRBQTJEO0FBQzNELE1BQU0sa0JBQWtCLEdBQXVCLG9CQUFvQixJQUFJO0lBQ25FLElBQUksRUFBRSxDQUFDLE1BQU0sRUFBRSxFQUFFO1FBQ2IsT0FBTyxDQUFDLEtBQUssQ0FBQyw4Q0FBOEMsQ0FBQyxDQUFDO1FBQzlELHFEQUFxRDtRQUNyRCxPQUFPO1lBQ0gsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDbkIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDMUIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUk7WUFDckIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDdEIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDdEIsYUFBYSxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7U0FDN0IsQ0FBQztJQUNOLENBQUM7Q0FDSixDQUFDO0FBR0YsaUJBQVMsa0JBQWtCLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bpbm5pbmctYmFsbC13cmFwcGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3V0aWxzL3NwaW5uaW5nLWJhbGwtd3JhcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsb0ZBQW9GO0FBQ3BGLDJFQUEyRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRTNFLG1DQUFtQztBQUNuQyxvRUFBc0Q7QUFjdEQsMkRBQTJEO0FBQzNELE1BQU0sa0JBQWtCLEdBQXVCLG9CQUFvQixJQUFJO0lBQ25FLElBQUksRUFBRSxDQUFDLE1BQU0sRUFBRSxFQUFFO1FBQ2IsT0FBTyxDQUFDLEtBQUssQ0FBQywwREFBMEQsQ0FBQyxDQUFDO1FBQzFFLHFEQUFxRDtRQUNyRCxPQUFPO1lBQ0gsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDbkIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDMUIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUk7WUFDckIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDdEIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7WUFDdEIsYUFBYSxFQUFFLEdBQUcsRUFBRSxDQUFDLEtBQUs7U0FDN0IsQ0FBQztJQUNOLENBQUM7Q0FDSixDQUFDO0FBR0YsaUJBQVMsa0JBQWtCLENBQUMifQ==

package/data/wind-markers-test.css

@@ -1,174 +0,0 @@
-/* ============================================================================
- * Wind Speed/Direction Animation for Leaflet Markers
- * ============================================================================
- * Usage: Import this CSS file in your app's global styles or index.html
- *
- * @import "~raain-ui/data/wind-markers.css";
- *
- * Or in HTML:
- * <link rel="stylesheet" href="node_modules/raain-ui/dist/data/wind-markers.css">
- *
- * Then apply classes to markers via MapElement.changeMarkerStyle():
- * mapElement.changeMarkerStyle(marker, 'marker-wind marker-wind-200', {strength: 10});
- */
-
-/* Base wind marker class */
-.marker-wind {
-  /* Calculate animation speed: stronger wind = faster animation */
-  --duration: calc(5s - (min(var(--strength, 5), 25) * 0.08s));
-
-  /* Calculate displacement: strength in m/s * 2 = pixels */
-  --displacement: calc(var(--strength, 5) * 2);
-
-  /* Visual glow intensity based on strength */
-  filter: drop-shadow(0 0 calc(var(--strength, 5) * 0.5px) rgba(100, 150, 255, 0.8));
-
-  position: relative;
-
-  /* Rotation will be set by direction-specific classes */
-  --rotation: 0deg;
-}
-
-.marker-wind img {
-  transform: rotate(var(--rotation)) !important;
-}
-
-/* Variant: Travel animation (move from src to target, disappear, reappear at src)
-   Usage: Add 'marker-wind-travel' class in addition to marker-wind and direction class
-   Example: 'marker-wind marker-wind-travel marker-wind-200' */
-.marker-wind-travel {
-  /* Override animation to use travel mode */
-}
-
-/* Pulse animation (brightness/opacity) */
-@keyframes wind-pulse {
-  0%, 100% {
-    opacity: 1;
-    filter: brightness(1);
-  }
-  50% {
-    opacity: 0.85;
-    filter: brightness(1.15);
-  }
-}
-
-/* Travel mode pulse - fade out at destination */
-@keyframes wind-pulse-travel {
-  0% {
-    filter: brightness(1.2);
-  }
-  70% {
-    filter: brightness(0.8);
-  }
-  71%, 99% {
-    filter: brightness(0);
-  }
-  100% {
-    filter: brightness(1.2);
-  }
-}
-
-/* Direction arrow indicator */
-.marker-wind::after {
-  content: '→';
-  position: absolute;
-  top: -20px;
-  left: 50%;
-  font-size: 18px;
-  font-weight: bold;
-  color: rgba(100, 150, 255, 0.95);
-  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
-  pointer-events: none;
-  transform-origin: center;
-}
-
-/* Wind direction classes for every available degree */
-/* Azimuth 0 = North (upward), 90 = East (right), 180 = South (down), 270 = West (left) */
-/* SVG arrow points right (East), so 90° = 0° rotation, others adjust from there */
-
-.marker-wind-0::after, .marker-wind-360::after { transform: translateX(-50%) rotate(180deg); }
-.marker-wind-0, .marker-wind-360 { --rotation: -90deg; animation: wind-0 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-0 { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--displacement) * -1px); } }
-.marker-wind-travel.marker-wind-0, .marker-wind-travel.marker-wind-360 { animation: wind-0-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-0-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 calc(var(--displacement) * -1px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-10::after { transform: translateX(-50%) rotate(190deg); }
-.marker-wind-10 { --rotation: -80deg; animation: wind-10 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-10 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px); } }
-
-.marker-wind-20::after { transform: translateX(-50%) rotate(200deg); }
-.marker-wind-20 { --rotation: -70deg; animation: wind-20 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-20 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px); } }
-
-.marker-wind-30::after { transform: translateX(-50%) rotate(210deg); }
-.marker-wind-30 { --rotation: -60deg; animation: wind-30 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-30 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px); } }
-
-.marker-wind-45::after { transform: translateX(-50%) rotate(225deg); }
-.marker-wind-45 { --rotation: -45deg; animation: wind-45 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-45 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px); } }
-
-.marker-wind-90::after { transform: translateX(-50%) rotate(270deg); }
-.marker-wind-90 { --rotation: 0deg; animation: wind-90 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-90 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 1px) 0; } }
-
-.marker-wind-135::after { transform: translateX(-50%) rotate(315deg); }
-.marker-wind-135 { --rotation: 45deg; animation: wind-135 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-135 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px); } }
-
-.marker-wind-180::after { transform: translateX(-50%) rotate(0deg); }
-.marker-wind-180 { --rotation: 90deg; animation: wind-180 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-180 { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--displacement) * 1px); } }
-
-.marker-wind-200::after { transform: translateX(-50%) rotate(20deg); }
-.marker-wind-200 { --rotation: 110deg; animation: wind-200 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-200 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px); } }
-
-.marker-wind-225::after { transform: translateX(-50%) rotate(45deg); }
-.marker-wind-225 { --rotation: 135deg; animation: wind-225 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-225 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px); } }
-
-.marker-wind-270::after { transform: translateX(-50%) rotate(90deg); }
-.marker-wind-270 { --rotation: 180deg; animation: wind-270 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-270 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * -1px) 0; } }
-
-.marker-wind-315::after { transform: translateX(-50%) rotate(135deg); }
-.marker-wind-315 { --rotation: -135deg; animation: wind-315 var(--duration) ease-in-out infinite, wind-pulse var(--duration) ease-in-out infinite; }
-@keyframes wind-315 { 0%, 100% { translate: 0 0; } 50% { translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px); } }
-
-/* ============================================================================
- * Travel Mode Animations - Move from source to target, disappear, reappear
- * ============================================================================ */
-
-.marker-wind-travel.marker-wind-10 { animation: wind-10-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-10-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.17px) calc(var(--displacement) * -0.98px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-20 { animation: wind-20-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-20-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * -0.94px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-30 { animation: wind-30-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-30-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.5px) calc(var(--displacement) * -0.87px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-45 { animation: wind-45-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-45-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * -0.71px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-90 { animation: wind-90-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-90-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 1px) 0; opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-135 { animation: wind-135-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-135-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.71px) calc(var(--displacement) * 0.71px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-180 { animation: wind-180-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-180-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 calc(var(--displacement) * 1px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-200 { animation: wind-200-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-200-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * 0.34px) calc(var(--displacement) * 0.94px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-225 { animation: wind-225-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-225-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * 0.71px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-270 { animation: wind-270-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-270-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * -1px) 0; opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
-
-.marker-wind-travel.marker-wind-315 { animation: wind-315-travel var(--duration) linear infinite, wind-pulse-travel var(--duration) linear infinite; }
-@keyframes wind-315-travel { 0% { translate: 0 0; opacity: 1; } 70% { translate: calc(var(--displacement) * -0.71px) calc(var(--displacement) * -0.71px); opacity: 1; } 71% { opacity: 0; } 99% { translate: 0 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }