Added city&country in marker + autoRotation on event

static/js/index/index_map.js

@@ -1,6 +1,7 @@
 const MAXNUMCOORD = 100;
 const MAXIMGROTATION = 10;
-const ROTATIONWAITTIME = 1000*10; //10s
+const ROTATIONWAITTIME = 1000*20; //30s
+const PINGWAITTIME = 1000*1; //1s
 
 const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const OSMATTRIB='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
@@ -14,7 +15,11 @@ class MapEvent {
         this.marker = marker;
         this.categ = json.categ;
         this.value = json.value;
+        this.country = json.country;
+        this.specifName = json.specifName;
+        this.cityName = json.cityName;
         this.text = this.categ + ": " + this.value;
+        this.textMarker = "<b>{1}</b><br>{2}".replace("{1}", this.country).replace("{2}", this.specifName+", "+this.cityName);
     }
 }
 
@@ -30,6 +35,8 @@ class MapEventManager {
         //Markers on the worldMap
         this._allMarkers = [];
         this._curMarkerNum = 0;
+        //use for cancelTimeout
+        this._timeoutRotate;
     }
 
     addMapEvent(mapevent) {
@@ -45,13 +52,15 @@ class MapEventManager {
             this._coordSet.add(mapevent.text);
             this.popupCoord(mapevent.coord);
         } else {
-            console.log('Duplicate coordinates');
+            //console.log('Duplicate coordinates');
         }
 
         if(this._first_map) { // remove no_map pic
             this.rotateMap();
             this.ping();
             this._first_map = false;
+        } else {
+            this.setMap(mapevent);
         }
     }
 
@@ -71,7 +80,20 @@ class MapEventManager {
         this._latToPing = mapEvent.coord.lat;
         this._lonToPing = mapEvent.coord.lon;
         var marker = mapEvent.marker;
-        myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 17);
+        myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 15);
+        mapEvent.marker.bindPopup(mapEvent.textMarker).openPopup();
+
+        $("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400);
+        this._timeoutRotate = setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME);
+    }
+
+    setMap(mapEvent) {
+        clearTimeout(this._timeoutRotate); //cancel current map rotation
+        this._latToPing = mapEvent.coord.lat;
+        this._lonToPing = mapEvent.coord.lon;
+        var marker = mapEvent.marker;
+        myOpenStreetMap.flyTo([mapEvent.coord.lat, mapEvent.coord.lon], 15);
+        mapEvent.marker.bindPopup(mapEvent.textMarker).openPopup();
 
         $("#textMap1").fadeOut(400, function(){ $(this).text(mapEvent.text); }).fadeIn(400);
         setTimeout(function(){ mapEventManager.rotateMap(); }, ROTATIONWAITTIME);
@@ -88,16 +110,16 @@ class MapEventManager {
                     .animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); })
             );
         }
-        setTimeout(function(){ mapEventManager.ping(); }, ROTATIONWAITTIME/5);
+        setTimeout(function(){ mapEventManager.ping(); }, PINGWAITTIME);
     }
 
     // Add and Manage markers on the map + make Animation
     popupCoord(coord) {
         var coord = [coord.lat, coord.lon];
-        var value = Math.random()*180;
+        var color = Math.random()*180;
         var pnts = openStreetMapObj.latLngToPoint(coord[0], coord[1])
         if (pnts != false) { //sometimes latLngToPoint return false
-            openStreetMapObj.addMarker(this._curMarkerNum, coord, [value]);
+            var addedMarker = openStreetMapObj.addMarker(this._curMarkerNum, coord, [color]);
             this._allMarkers.push(this._curMarkerNum)
             marker_animation(pnts.x, pnts.y, this._curMarkerNum);
             this._curMarkerNum = this._curMarkerNum >= MAXNUMCOORD ? 0 : this._curMarkerNum+1;

templates/index.html

@@ -126,7 +126,7 @@ small {
                     <!-- vh sum = 87 -->
                     <div class="col-lg-7">
                         
-                        <div class="panel panel-default" style="margin-top: 15px; height: 59vh;">
+                        <div class="panel panel-default" style="margin-top: 15px; height: 39vh;">
                             <!--<div class="panel-heading">
                                 <i class="fa fa-bar-chart-o fa-fw"></i> Feed
                             </div>-->
@@ -138,7 +138,7 @@ small {
                         </div>
                         <!-- /.panel -->
 
-                        <div class="panel panel-default" style="height: 29vh;">
+                        <div class="panel panel-default" style="height: 49vh;">
                             <div class="panel-heading">
                                 <i class="fa fa-tasks fa-fw"></i> Logs
                                 <div class="pull-right">

zmq_subscriber.py

@@ -52,7 +52,7 @@ def ip_to_coord(ip):
     # Cast the float so that it has the correct float format
     lat_corrected = float("{:.4f}".format(lat))
     lon_corrected = float("{:.4f}".format(lon))
-    return {'lat': lat_corrected, 'lon': lon_corrected}
+    return { 'coord': {'lat': lat_corrected, 'lon': lon_corrected}, 'full_rep': resp }
 
 def default_log(jsonevent):
     print('sending', 'log')
@@ -95,7 +95,8 @@ def default_attribute(jsonattr):
 
 def handleCoord(supposed_ip, categ):
     try:
-        coord = ip_to_coord(supposed_ip)
+        rep = ip_to_coord(supposed_ip)
+        coord = rep['coord']
         coord_dic = {'lat': coord['lat'], 'lon': coord['lon']}
         coord_list = [coord['lat'], coord['lon']]
         print(coord_list)
@@ -106,7 +107,10 @@ def handleCoord(supposed_ip, categ):
         to_send = {
                 "coord": coord,
                 "categ": categ,
-                "value": supposed_ip
+                "value": supposed_ip,
+                "country": rep['full_rep'].country.name,
+                "specifName": rep['full_rep'].subdivisions.most_specific.name,
+                "cityName": rep['full_rep'].city.name,
                 }
         serv_coord.publish(channel_disp, json.dumps(to_send))
     except ValueError: