feat(label animations): added POC label "blink" animation for map mar…

…kers
mapmarker · Dec 16, 2023 · ab9c6f9 · ab9c6f9
1 parent 8340cba
commit ab9c6f9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 25,336 deletions.
diff --git a/app/Actions/FontAwesome/v6/GetLabelMarkup.php b/app/Actions/FontAwesome/v6/GetLabelMarkup.php
@@ -17,13 +17,69 @@ public function handle(Request $request, int $markerSize)
         $labelColor = $request->get('lc', '#D9534F');
         $labelFont = $request->get('lf', 'Arial');
         $labelFontColor = $request->get('lfc', '#FFF');
+
+        // LABEL ANIMATION
+        $labelAnimation = $request->get('labelAnimation', null);
+        $labelAnimationDuration = $request->get('labelAnimationDuration', '1s');
+        $labelAnimationMarkup = null;
+
+        if ($labelAnimation == 'blink') {
+            $labelAnimationMarkup = <<<EOD
+                <style>
+
+                    @keyframes blink {
+                        0% {
+                            opacity: 1;
+                        }
+                        49% {
+                            opacity: 1;
+                        }
+                        50% {
+                            opacity: 0;
+                        }
+                        99% {
+                            opacity: 0;
+                        }
+                        100% {
+                            opacity: 1;
+                        }
+                    }
+
+                    @-webkit-keyframes blink {
+                        0% {
+                            opacity: 1;
+                        }
+                        49% {
+                            opacity: 1;
+                        }
+                        50% {
+                            opacity: 0;
+                        }
+                        99% {
+                            opacity: 0;
+                        }
+                        100% {
+                            opacity: 1;
+                        }
+                     }
+
+                    .labelAnimation {
+                        animation: blink {$labelAnimationDuration} linear infinite;
+                        -webkit-animation: blink {$labelAnimationDuration} linear infinite;
+                    }
+                    </style>
+            EOD;
+        }
+
+        // GENERATE LABEL MARKUP
         $labelMarkup = '';
         if ($labelText) {
             $labelMarkup = <<<EOD
             <!--! Icon Label -->
-            <svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100">
+            <svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">
                 <circle cx="50%" cy="50%" fill="{$labelColor}" r="50%" />
                 <text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".3em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
+                {$labelAnimationMarkup}
             </svg>
             EOD;
         }