diff options
Diffstat (limited to 'web/app/view/map')
-rw-r--r-- | web/app/view/map/Map.js | 87 | ||||
-rw-r--r-- | web/app/view/map/MapController.js | 214 |
2 files changed, 0 insertions, 301 deletions
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js deleted file mode 100644 index 6e8ab6fad..000000000 --- a/web/app/view/map/Map.js +++ /dev/null @@ -1,87 +0,0 @@ -/* - * 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.view.map.Map', { - extend: 'Ext.form.Panel', - xtype: 'mapView', - - requires: [ - 'Traccar.view.map.MapController' - ], - - controller: 'map', - - title: strings.mapTitle, - layout: 'fit', - - listeners: { - afterrender: function() { - - var user = Traccar.app.getUser(); - var server = Traccar.app.getServer(); - - var layer; - var mapLayer = user.get('map') || server.get('map'); - - var bingKey = server.get('bingKey') || 'AseEs0DLJhLlTNoxbNXu7DGsnnH4UoWuGue7-irwKkE3fffaClwc9q_Mr6AyHY8F'; - - if (mapLayer === 'custom') { - layer = new ol.layer.Tile({ source: new ol.source.XYZ({ - url: server.get('mapUrl') - })}); - } else if (mapLayer === 'bingRoad') { - layer = new ol.layer.Tile({ source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Road' - })}); - } else if (mapLayer === 'bingAerial') { - layer = new ol.layer.Tile({ source: new ol.source.BingMaps({ - key: bingKey, - imagerySet: 'Aerial' - })}); - } else { - layer = new ol.layer.Tile({ source: new ol.source.OSM({ - })}); - } - - this.vectorSource = new ol.source.Vector({}); - var vectorLayer = new ol.layer.Vector({ - source: this.vectorSource - }); - - var lat = user.get('latitude') || server.get('latitude') || styles.mapDefaultLat; - var lon = user.get('longitude') || server.get('longitude') || styles.mapDefaultLon; - var zoom = user.get('zoom') || server.get('zoom') || styles.mapDefaultZoom; - - this.mapView = new ol.View({ - center: ol.proj.fromLonLat([ lon, lat ]), - zoom: zoom, - maxZoom: styles.mapMaxZoom - }); - - this.map = new ol.Map({ - target: this.body.dom.id, - layers: [ layer, vectorLayer ], - view: this.mapView - }); - }, - - resize: function() { - this.map.updateSize(); - } - } - -}); diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js deleted file mode 100644 index b0d8b8f39..000000000 --- a/web/app/view/map/MapController.js +++ /dev/null @@ -1,214 +0,0 @@ -/* - * 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.view.map.MapController', { - extend: 'Ext.app.ViewController', - alias: 'controller.map', - - config: { - listen: { - controller: { - '*': { - reportShow: 'reportShow', - reportClear: 'reportClear', - selectDevice: 'selectDevice', - selectReport: 'selectReport' - } - } - } - }, - - init: function() { - this.liveData = {}; - this.update(true); - }, - - update: function(first) { - Ext.Ajax.request({ - scope: this, - url: '/api/async', - params: { - first: first - }, - success: function(response) { - var data = Ext.decode(response.responseText).data; - - var i; - for (i = 0; i < data.length; i++) { - - var store = Ext.getStore('LatestPositions'); - - var found = store.query('deviceId', data[i].deviceId); - if (found.getCount() > 0) { - found.first().set(data[i]); - } else { - store.add(Ext.create('Traccar.model.Position', data[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 style = this.getMarkerStyle(styles.mapLiveRadius, styles.mapLiveColor); - var marker = new ol.Feature({ - geometry: geometry, - originalStyle: style - }); - marker.setStyle(style); - this.getView().vectorSource.addFeature(marker); - this.liveData[data[i].deviceId] = marker; - } - } - - this.update(false); - }, - failure: function() { - // TODO: error - } - }); - }, - - getLineStyle: function() { - return new ol.style.Style({ - stroke: new ol.style.Stroke({ - color: styles.mapStrokeColor, - width: styles.mapRouteWidth - }) - }); - }, - - getMarkerStyle: function(radius, color) { - /*return new ol.style.Style({ - text: new ol.style.Text({ - text: '\uf041', - font: 'normal 32px FontAwesome', - textBaseline: 'Bottom', - fill: new ol.style.Fill({ - color: color - }), - stroke: new ol.style.Stroke({ - color: 'black', - width: 2 - }) - }) - });*/ - return new ol.style.Style({ - image: new ol.style.Circle({ - radius: radius, - fill: new ol.style.Fill({ - color: color - }), - stroke: new ol.style.Stroke({ - color: styles.mapStrokeColor, - width: styles.mapMarkerStroke - }) - }) - }); - }, - - reportShow: function() { - this.reportClear(); - - var vectorSource = this.getView().vectorSource; - - var data = Ext.getStore('Positions').getData(); - - var index; - var positions = []; - this.reportRoutePoints = {}; - - for (index = 0; index < data.getCount(); index++) { - var point = ol.proj.fromLonLat([ - data.getAt(index).data.longitude, - data.getAt(index).data.latitude - ]); - positions.push(point); - - var style = this.getMarkerStyle(styles.mapReportRadius, styles.mapReportColor); - var feature = new ol.Feature({ - geometry: new ol.geom.Point(positions[index]), - originalStyle: style - }); - feature.setStyle(style); - this.reportRoutePoints[data.getAt(index).get('id')] = feature; - } - - this.reportRoute = new ol.Feature({ - geometry: new ol.geom.LineString(positions) - }); - this.reportRoute.setStyle(this.getLineStyle()); - vectorSource.addFeature(this.reportRoute); - - for (var key in this.reportRoutePoints) { - if (this.reportRoutePoints.hasOwnProperty(key)) { - vectorSource.addFeature(this.reportRoutePoints[key]); - } - } - }, - - reportClear: function() { - var index; - var vectorSource = this.getView().vectorSource; - - if (this.reportRoute !== undefined) { - vectorSource.removeFeature(this.reportRoute); - this.reportRoute = undefined; - } - - if (this.reportRoutePoints !== undefined) { - for (var key in this.reportRoutePoints) { - if (this.reportRoutePoints.hasOwnProperty(key)) { - vectorSource.removeFeature(this.reportRoutePoints[key]); - } - } - this.reportRoutePoints = {}; - } - }, - - selectPosition: function(feature) { - if (this.currentFeature !== undefined) { - this.currentFeature.setStyle(this.currentFeature.get('originalStyle')); - } - - if (feature !== undefined) { - feature.setStyle(this.getMarkerStyle(styles.mapSelectRadius, styles.mapSelectColor)); - - var pan = ol.animation.pan({ - duration: styles.mapDelay, - source: this.getView().mapView.getCenter() - }); - this.getView().map.beforeRender(pan); - this.getView().mapView.setCenter(feature.getGeometry().getCoordinates()); - } - - this.currentFeature = feature; - }, - - selectDevice: function(device) { - this.selectPosition(this.liveData[device.get('id')]); - }, - - selectReport: function(position) { - if (this.reportRoutePoints[position.get('id')] !== undefined) { - this.selectPosition(this.reportRoutePoints[position.get('id')]); - } - } - -}); |