From f47349508d3a2dc2e78c30ebb42c24a65abcfa62 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Fri, 29 May 2015 23:03:53 +1200 Subject: Show live data on map --- web/app/Application.js | 3 +- web/app/Resources.js | 1 + web/app/store/LiveData.js | 20 ++++++++++++ web/app/view/map/Map.js | 39 ----------------------- web/app/view/map/MapController.js | 65 +++++++++++++++++++++++++++++++-------- 5 files changed, 75 insertions(+), 53 deletions(-) create mode 100644 web/app/store/LiveData.js (limited to 'web/app') 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); } }); -- cgit v1.2.3