aboutsummaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2015-05-29 23:03:53 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2015-05-29 23:03:53 +1200
commitf47349508d3a2dc2e78c30ebb42c24a65abcfa62 (patch)
tree3b676b2d31790553b879bf876b1eac9149d25342 /web
parent2f3c714d6abcdb62983abe48404afa24a672231b (diff)
downloadtrackermap-server-f47349508d3a2dc2e78c30ebb42c24a65abcfa62.tar.gz
trackermap-server-f47349508d3a2dc2e78c30ebb42c24a65abcfa62.tar.bz2
trackermap-server-f47349508d3a2dc2e78c30ebb42c24a65abcfa62.zip
Show live data on map
Diffstat (limited to 'web')
-rw-r--r--web/app/Application.js3
-rw-r--r--web/app/Resources.js1
-rw-r--r--web/app/store/LiveData.js20
-rw-r--r--web/app/view/map/Map.js39
-rw-r--r--web/app/view/map/MapController.js65
5 files changed, 75 insertions, 53 deletions
diff --git a/web/app/Application.js b/web/app/Application.js
index 176e24e67..e17be1a15 100644
--- a/web/app/Application.js
+++ b/web/app/Application.js
@@ -31,7 +31,8 @@ Ext.define('Traccar.Application', {
stores: [
'Devices',
- 'Positions'
+ 'Positions',
+ 'LiveData'
],
controllers: [
diff --git a/web/app/Resources.js b/web/app/Resources.js
index 19e21b07b..b7ffce571 100644
--- a/web/app/Resources.js
+++ b/web/app/Resources.js
@@ -71,6 +71,7 @@ var styles = {
map_max_zoom: 16,
map_report_route: 'blue',
map_report_marker: 'blue',
+ map_live_marker: 'red',
map_route_width: 5,
map_marker_radius: 50
};
diff --git a/web/app/store/LiveData.js b/web/app/store/LiveData.js
new file mode 100644
index 000000000..35731e339
--- /dev/null
+++ b/web/app/store/LiveData.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Ext.define('Traccar.store.LiveData', {
+ extend: 'Ext.data.Store',
+ model: 'Traccar.model.Position'
+});
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);
}
});