Implement selection panning

3 files changed, 23 insertions, 4 deletions

diff --git a/web/app/Resources.js b/web/app/Resources.js
index 6d0cccd05..1103fe729 100644
--- a/web/app/Resources.js
+++ b/web/app/Resources.js
@@ -100,7 +100,8 @@ var styles = {
     map_report_marker: 'blue',
     map_live_marker: 'red',
     map_route_width: 5,
-    map_marker_radius: 50
+    map_marker_radius: 50,
+    map_delay: 500
 };
 
 Ext.define('Traccar.Resources', {
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index 449293e2f..bf1f1328b 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -38,7 +38,7 @@ Ext.define('Traccar.view.map.Map', {
                 source: this.vectorSource
             });
 
-            var view = new ol.View({
+            this.mapView = new ol.View({
                 center: ol.proj.fromLonLat(styles.map_center),
                 zoom: styles.map_zoom,
                 maxZoom: styles.map_max_zoom
@@ -47,7 +47,7 @@ Ext.define('Traccar.view.map.Map', {
             this.map = new ol.Map({
                 target: this.body.dom.id,
                 layers: [ layer, vectorLayer ],
-                view: view
+                view: this.mapView
             });
         },
 
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index 0d5176d09..5cde39494 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -144,7 +144,25 @@ Ext.define('Traccar.view.map.MapController', {
     },
 
     selectPosition: function(position) {
-        console.log(position); // DELME
+        if (this.currentPosition === undefined) {
+            this.currentPosition = new ol.Feature({
+                style: this.getLineStyle(styles.map_report_route)
+            });
+            this.getView().vectorSource.addFeature(this.currentPosition);
+        }
+
+        var point = ol.proj.fromLonLat([
+            position.get('longitude'), position.get('latitude')
+        ]);
+
+        this.currentPosition.setGeometry(new ol.geom.Point(point));
+
+        var pan = ol.animation.pan({
+            duration: styles.map_delay,
+            source: this.getView().mapView.getCenter()
+        });
+        this.getView().map.beforeRender(pan);
+        this.getView().mapView.setCenter(point);
     },
 
     selectDevice: function(device) {