diff --git a/static/js/index/index_map.js b/static/js/index/index_map.js
index 8ce0fc0..9468775 100644
--- a/static/js/index/index_map.js
+++ b/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 © OpenStreetMap 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 = "{1}
{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;
diff --git a/templates/index.html b/templates/index.html
index 141bde1..067100c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -126,7 +126,7 @@ small {