Added correct marker animation

static/css/jquery-jvectormap-2.0.3.css

@@ -1,34 +1,3 @@
-.flashing {
-    animation: pulse-me 6s linear infinite;
-}
-
-@keyframes pulse-me{
-    0%{
-        opacity: 1.0;
-    }
-    20%{
-        opacity: 0.8;
-    }
-    40%{
-        opacity: 0.4;
-    }
-    50%{
-        opacity: 0.2;
-    }
-    60%{
-        opacity: 0.4;
-    }
-    80%{
-        opacity: 0.8;
-    }
-    100%{
-        opacity: 1.0;
-    }
-}
-
-
- /* ---------------- */
- /* ---------------- */
 svg {
     touch-action: none;
 }

static/js/index.js

@@ -287,26 +287,38 @@ function createHead(callback) {
 
 
 /* MAP */
-//var coord = [[30, -84], [-12, 20]];
-//var names = ['name1', 'name2'];
-//var val = [5,7];
-//
 var mapObj;
 var curNumMarker = 0;
-var allMarker = [curNumMarker];
+var allMarker = [];
+
+function marker_animation(x, y, curNumMarker) {
+    var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
+    $("#feedDiv2").append(
+        $('<div class="marker_animation"></div>')
+        .css({'left': x-15 + 'px'}) /* HACK to center the effect */
+        .css({'top': y-15 + 'px'})
+        .css({ 'background-color': markerColor })
+        .animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 1000, 'linear', function(){$(this).remove(); })
+    );
+}
 
 function popupCoord(coord) {
     var value = coord[0]+coord[1];
-    mapObj.addMarker(curNumMarker, coord, [value]);
+    pnts = mapObj.latLngToPoint(coord[0], coord[1])
-    curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1;
+    if (pnts != false) { //sometimes latLngToPoint return false
-    allMarker.push(curNumMarker)
+        mapObj.addMarker(curNumMarker, coord, [value]);
-    if (allMarker.length >= maxNumCoord) {
+        allMarker.push(curNumMarker)
-        to_remove = allMarker[0];
+        marker_animation(pnts.x, pnts.y, curNumMarker);
-        mapObj.removeMarkers([to_remove]);
+        curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1;
-        allMarker.slice(1);
+        if (allMarker.length >= maxNumCoord) {
+            to_remove = allMarker[0];
+            mapObj.removeMarkers([to_remove]);
+            allMarker = allMarker.slice(1);
+        }
     }
 }
 
+
 $(function(){
     $('#feedDiv2').vectorMap({
         map: 'world_mill',

templates/index.html

@@ -24,6 +24,19 @@ table {
     overflow-y: scroll;
 }
 
+.marker_animation {
+  stroke: darkred;
+  position: absolute;
+  opacity: 1;
+  border-radius: 80px;
+  -moz-border-radius: 80px;
+  /* 40px radius, move origin to center */
+  height: 30px;
+  width: 30px;
+  margin: 0px;
+  pointer-events: none; /* dont kill the hover event of markers */
+  -webkit-transform: translateZ(0); /* little trick to force GPU acceleration */
+}
 
 </style>
 

zmq_subscriber.py

@@ -47,8 +47,7 @@ while True:
     #FIXME check if sock.recv is blocking
     time.sleep(0.1)
     content = socket.recv()
-    console.log('sending')
+    print('sending', (content))
-    print(content)
     redis_server.publish(channel, content)
 
     if random.randint(1,10)<5: