Show live data on map

2 files changed, 52 insertions, 52 deletions

diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index 8062db8e9..449293e2f 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -26,47 +26,10 @@ Ext.define('Traccar.view.map.Map', {
 
     title: strings.map_title,
     layout: 'fit',
-    
-    /*update: function() {
-        Ext.Ajax.request({
-            scope: this,
-            url: '/api/async',
-            success: function(response) {
-                var data = Ext.decode(response.responseText).data;
-                
-                var i;
-                for (i = 0; i < data.length; i++) {
-                    var iconFeature = new ol.Feature({
-                        geometry: new ol.geom.Point([30, 30])
-                    });
-                    this.vectorSource.addFeature(iconFeature);   
-                }
-                
-                this.update();
-            },
-            failure: function() {
-                // error
-            }
-        });
-    },*/
 
     listeners: {
         afterrender: function() {
 
-            var transform = this.transform;
-
-            /*var bindKey = 'AseEs0DLJhLlTNoxbNXu7DGsnnH4UoWuGue7-irwKkE3fffaClwc9q_Mr6AyHY8F';
-
-            var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
-                key: bindKey,
-                imagerySet: 'Road'
-            })});
-
-            var layer = new ol.layer.Tile({ source: new ol.source.BingMaps({
-                key: bindKey,
-                imagerySet: 'Aerial'
-            })});*/
-
             var layer = new ol.layer.Tile({ source: new ol.source.OSM({
             })});
             
@@ -86,8 +49,6 @@ Ext.define('Traccar.view.map.Map', {
                 layers: [ layer, vectorLayer ],
                 view: view
             });
-
-            //this.update();
         },
 
         resize: function() {
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 4d0a9845e..f232dbb4a 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -28,6 +28,46 @@ Ext.define('Traccar.view.map.MapController', {
             }
         }
     },
+    
+    init: function() {
+        this.liveData = new Object();
+        this.update();
+    },
+    
+    update: function() {
+        Ext.Ajax.request({
+            scope: this,
+            url: '/api/async',
+            success: function(response) {
+                var data = Ext.decode(response.responseText).data;
+                
+                var i;
+                for (i = 0; i < data.length; i++) {
+                    
+                    var geometry = new ol.geom.Point(ol.proj.fromLonLat([
+                        data[i].longitude,
+                        data[i].latitude
+                    ]));
+                    
+                    if (data[i].deviceId in this.liveData) {
+                        this.liveData[data[i].deviceId].setGeometry(geometry);
+                    } else {
+                        var marker = new ol.Feature({
+                            geometry: geometry,
+                            style: this.getLineStyle(styles.map_live_marker)
+                        });
+                        this.getView().vectorSource.addFeature(marker);
+                        this.liveData[data[i].deviceId] = marker;
+                    }
+                }
+                
+                this.update();
+            },
+            failure: function() {
+                // TODO: error
+            }
+        });
+    },
 
     getLineStyle: function(color) {
         return new ol.style.Style({
@@ -74,32 +114,31 @@ Ext.define('Traccar.view.map.MapController', {
         }
 
         this.reportRoute = new ol.Feature({
-            geometry: new ol.geom.LineString(positions)
+            geometry: new ol.geom.LineString(positions),
+            style: this.getLineStyle(styles.map_report_route)
         });
         
-        /*this.reportStart = new ol.Feature({
-            geometry: new ol.geom.Circle(positions[0], styles.map_marker_radius)
+        this.reportStart = new ol.Feature({
+            geometry: new ol.geom.Point(positions[0]),
+            style: this.getLineStyle(styles.map_report_route)
         });
         
         this.reportFinish = new ol.Feature({
-            geometry: new ol.geom.Circle(positions[positions.length - 1], styles.map_marker_radius)
-        });*/
-
-        this.reportRoute.setStyle(this.getLineStyle(styles.map_report_route));
-        //this.reportStart.setStyle(this.getLineStyle(styles.map_report_marker));
-        //this.reportFinish.setStyle(this.getLineStyle(styles.map_report_marker));
+            geometry: new ol.geom.Point(positions[positions.length - 1]),
+            style: this.getLineStyle(styles.map_report_route)
+        });
 
         vectorSource.addFeature(this.reportRoute);
-        //vectorSource.addFeature(this.reportStart);
-        //vectorSource.addFeature(this.reportFinish);
+        vectorSource.addFeature(this.reportStart);
+        vectorSource.addFeature(this.reportFinish);
     },
 
     reportClear: function() {
         var vectorSource = this.getView().vectorSource;
         
         vectorSource.removeFeature(this.reportRoute);
-        //vectorSource.removeFeature(this.reportStart);
-        //vectorSource.addFeature(this.reportFinish);
+        vectorSource.removeFeature(this.reportStart);
+        vectorSource.addFeature(this.reportFinish);
     }
 
 });