From 6067d00f775f5c1721e89e2cb330fbac632c8a94 Mon Sep 17 00:00:00 2001
From: Robert Boloc <robertboloc@gmail.com>
Date: Sun, 16 Oct 2016 09:54:44 +0100
Subject: [PATCH] Add pulsing animation

---
 css/app.css | 23 +++++++++++++++++++++++
 js/app.js   | 15 +++++++++++++--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/css/app.css b/css/app.css
index 8716a9e..fb3f873 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6,3 +6,26 @@ html, body {
 #map {
     height: 100%;
 }
+
+#markers canvas {
+    animation: pulsate 3000ms ease-out infinite;
+    border-radius: 20px;
+    border: 1px solid #2b2b2b;
+}
+
+@keyframes pulsate {
+    0% {
+        box-shadow: none
+    }
+    50% {
+        box-shadow:
+                    inset 0 0 3px #CC0052,
+                    inset 0 0 3px #CC0052,
+                          0 0 3px #CC0052,
+                          0 0 3px #CC0052,
+                          0 0 3px #CC0052;
+    }
+    100% {
+        box-shadow: none
+    }
+}
diff --git a/js/app.js b/js/app.js
index a286a79..e86758a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -96,6 +96,7 @@ var mapOptions = {
 function initMap() {
     var map = new google.maps.Map(document.getElementById('map'), mapOptions);
     addMarkers(map, data);
+    addOverlayView(map);
 }
 
 function addMarkers(map, data) {
@@ -105,11 +106,21 @@ function addMarkers(map, data) {
             title: data[i].title,
             icon: {
                 path: google.maps.SymbolPath.CIRCLE,
-                scale: 3,
-                strokeWeight: 2,
+                scale: 2,
+                strokeWeight: 3,
                 strokeColor: '#FF0066',
+                fillColor: '#FF0066',
+                fillOpacity: 1,
             },
             map: map
         });
     }
 }
+
+function addOverlayView(map) {
+    var overlayView = new google.maps.OverlayView();
+    overlayView.draw = function () {
+        this.getPanes().markerLayer.id = 'markers';
+    };
+    overlayView.setMap(map);
+}