Import GPX file as geofence

2 files changed, 44 insertions, 0 deletions

diff --git a/web/app/view/map/GeofenceMap.js b/web/app/view/map/GeofenceMap.js
index 8cef574b..18c33862 100644
--- a/web/app/view/map/GeofenceMap.js
+++ b/web/app/view/map/GeofenceMap.js
@@ -37,6 +37,26 @@ Ext.define('Traccar.view.map.GeofenceMap', {
             listeners: {
                 select: 'onTypeSelect'
             }
+        }, '-', {
+            xtype: 'tbtext',
+            html: Strings.sharedImport
+        }, {
+            xtype: 'filefield',
+            name: 'file',
+            buttonConfig: {
+                glyph: 'xf093@FontAwesome',
+                text: '',
+                tooltip: Strings.sharedSelectFile,
+                tooltipType: 'title'
+            },
+            listeners: {
+                change: 'onFileChange',
+                afterrender: function (fileField) {
+                    fileField.fileInputEl.set({
+                        accept: '.gpx'
+                    });
+                }
+            }
         }, {
             xtype: 'tbfill'
         }, {
diff --git a/web/app/view/map/GeofenceMapController.js b/web/app/view/map/GeofenceMapController.js
index f075ac93..5274bc39 100644
--- a/web/app/view/map/GeofenceMapController.js
+++ b/web/app/view/map/GeofenceMapController.js
@@ -33,6 +33,30 @@ Ext.define('Traccar.view.map.GeofenceMapController', {
         }
     },
 
+    onFileChange: function (fileField) {
+        var reader, parser, xml, segment, point, projection, points = [], view = this.getView();
+        if (fileField.fileInputEl.dom.files.length > 0) {
+            reader = new FileReader();
+            reader.onload = function (event) {
+                parser = new DOMParser();
+                xml = parser.parseFromString(reader.result, 'text/xml');
+                segment = xml.getElementsByTagName('trkseg')[0];
+                projection = view.mapView.getProjection();
+                Array.from(segment.getElementsByTagName('trkpt')).forEach(function (point) {
+                    lat = Number(point.getAttribute('lat'));
+                    lon = Number(point.getAttribute('lon'));
+                    points.push(ol.proj.transform([lon, lat], 'EPSG:4326', projection));
+                });
+                view.getFeatures().clear();
+                view.getFeatures().push(new ol.Feature(new ol.geom.LineString(points)));
+            };
+            reader.onerror = function (event) {
+                Traccar.app.showError(event.target.error);
+            };
+            reader.readAsText(fileField.fileInputEl.dom.files[0]);
+        }
+    },
+
     onSaveClick: function (button) {
         var geometry, projection;
         if (this.getView().getFeatures().getLength() > 0) {