From 76114fd4d0415e6248d8784b29fcbc7540908a54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C3=A4r=20Thernstr=C3=B6m?= <par.thernstrom@gmail.com>
Date: Sun, 12 May 2024 19:52:09 +0200
Subject: [PATCH] Animera mera

---
 .../views/components/events-map.blade.php     | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/resources/views/components/events-map.blade.php b/resources/views/components/events-map.blade.php
index 3ad14dee..5aed4a51 100644
--- a/resources/views/components/events-map.blade.php
+++ b/resources/views/components/events-map.blade.php
@@ -66,7 +66,7 @@ className: 'EventsMap-marker-icon EventsMap-marker-icon--far',
             var markerIconNear = L.divIcon({
                 className: 'EventsMap-marker-icon EventsMap-marker-icon--near',
                 iconSize: [25, 25],
-                html: ''
+                html: '<span class="EventsMap-marker-icon-inner"></span>'
             });
 
             class EventsMap {
@@ -302,6 +302,9 @@ class EventsMap {
                 background-color: var(--color-red);
                 border-radius: 50%;
                 border: 1px solid rgba(255, 255, 255, .25);
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
 
             .EventsMap-marker-icon--near {
@@ -339,6 +342,33 @@ class EventsMap {
 
             .EventsMap-marker-contentLink {}
 
+            .EventsMap-marker-icon-inner {
+                display: block;
+                position: absolute;
+                width: 25px;
+                height: 25px;
+                background-color: var(--color-red-2);
+                border-radius: 50%;
+                animation: ease-in-out markerPulse 2s infinite;
+            }
+
+            @keyframes markerPulse {
+                0% {
+                    transform: scale(1);
+                    opacity: 0;
+                }
+
+                50% {
+                    transform: scale(1.2);
+                    opacity: .5;
+                }
+
+                100% {
+                    transform: scale(1.5);
+                    opacity: 0;
+                }
+            }
+
             @keyframes fadein {
                 from {
                     opacity: 0;