Vector features testing

2 files changed, 41 insertions, 23 deletions

diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
index a43df40e1..8062db8e9 100644
--- a/web/app/view/map/Map.js
+++ b/web/app/view/map/Map.js
@@ -72,21 +72,7 @@ Ext.define('Traccar.view.map.Map', {
             
             this.vectorSource = new ol.source.Vector({});
             var vectorLayer = new ol.layer.Vector({
-                source: this.vectorSource,
-                style: new ol.style.Style({
-                    text: new ol.style.Text({
-                        text: '\uf041',
-                        font: 'normal 32px FontAwesome',
-                        textBaseline: 'Bottom',
-                        fill: new ol.style.Fill({
-                            color: 'red'
-                        }),
-                        stroke: new ol.style.Stroke({
-                            color: 'black',
-                            width: 2
-                        })
-                    })
-                })
+                source: this.vectorSource
             });
 
             var view = new ol.View({
@@ -101,12 +87,6 @@ Ext.define('Traccar.view.map.Map', {
                 view: view
             });
 
-            var iconFeature = new ol.Feature({
-                geometry: new ol.geom.Point(ol.proj.fromLonLat([-1.257778, 51.751944]))
-            });
-
-            this.vectorSource.addFeature(iconFeature);
-
             //this.update();
         },
 
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index d02d454d6..f141b6646 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -30,11 +30,49 @@ Ext.define('Traccar.view.map.MapController', {
     },
     
     reportShow: function() {
-        console.log('reportShow');
+
+        var vectorSource = this.getView().vectorSource;
+
+        this.iconFeature = new ol.Feature({
+            //geometry: new ol.geom.Point(ol.proj.fromLonLat([-1.257778, 51.751944]))
+            geometry: new ol.geom.LineString([
+                ol.proj.fromLonLat([-1.257778, 52.751944]),
+                ol.proj.fromLonLat([-3.257778, 51.751944])
+            ])
+        });
+
+        this.iconFeature.setStyle(
+            new ol.style.Style({
+                stroke: new ol.style.Stroke({
+                    color: 'black',
+                    width: 2
+                })
+            })
+        );
+
+        vectorSource.addFeature(this.iconFeature);
     },
 
     reportClear: function() {
-        console.log('reportClear');
+        //this.getView().vectorSource.clear();
+
+        this.iconFeature.setGeometry(new ol.geom.Point(ol.proj.fromLonLat([-5.257778, 51.751944])));
+        this.iconFeature.setStyle(
+            new ol.style.Style({
+                text: new ol.style.Text({
+                    text: '\uf041',
+                    font: 'normal 32px FontAwesome',
+                    textBaseline: 'Bottom',
+                    fill: new ol.style.Fill({
+                        color: 'red'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: 'black',
+                        width: 2
+                    })
+                })
+            })
+        );
     }
 
 });