Merge pull request #453 from Abyss777/move_map

Move map related classes to subfolder

6 files changed, 1110 insertions, 0 deletions

diff --git a/web/app/view/map/BaseMap.js b/web/app/view/map/BaseMap.js
new file mode 100644
index 00000000..ac3b2694
--- /dev/null
+++ b/web/app/view/map/BaseMap.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.BaseMap', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'baseMapView',
+
+    layout: 'fit',
+
+    getMap: function () {
+        return this.map;
+    },
+
+    getMapView: function () {
+        return this.mapView;
+    },
+
+    initMap: function () {
+        var server, layer, type, bingKey, lat, lon, zoom, target;
+
+        server = Traccar.app.getServer();
+
+        type = Traccar.app.getPreference('map', null);
+        bingKey = server.get('bingKey');
+
+        if (type === 'custom') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    url: server.get('mapUrl'),
+                    attributions: [
+                        new ol.Attribution({
+                            html: ''
+                        })
+                    ]
+                })
+            });
+        } else if (type === 'bingRoad') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.BingMaps({
+                    key: bingKey,
+                    imagerySet: 'Road'
+                })
+            });
+        } else if (type === 'bingAerial') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.BingMaps({
+                    key: bingKey,
+                    imagerySet: 'Aerial'
+                })
+            });
+        } else if (type === 'osm') {
+            layer = new ol.layer.Tile({
+                source: new ol.source.OSM({})
+            });
+        } else {
+            layer = new ol.layer.Tile({
+                source: new ol.source.XYZ({
+                    urls: [
+                        'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
+                        'https://cartodb-basemaps-b.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
+                        'https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
+                        'https://cartodb-basemaps-d.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
+                    ],
+                    attributions: [
+                        new ol.Attribution({
+                            html: [
+                                '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
+                                    'contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
+                            ]
+                        })
+                    ]
+                })
+            });
+        }
+
+        lat = Traccar.app.getPreference('latitude', Traccar.Style.mapDefaultLat);
+        lon = Traccar.app.getPreference('longitude', Traccar.Style.mapDefaultLon);
+        zoom = Traccar.app.getPreference('zoom', Traccar.Style.mapDefaultZoom);
+
+        this.mapView = new ol.View({
+            center: ol.proj.fromLonLat([lon, lat]),
+            zoom: zoom,
+            maxZoom: Traccar.Style.mapMaxZoom
+        });
+
+        this.map = new ol.Map({
+            target: this.body.dom.id,
+            layers: [layer],
+            view: this.mapView
+        });
+
+        target = this.map.getTarget();
+        if (typeof target === 'string') {
+            target = Ext.get(target).dom;
+        }
+
+        this.map.on('pointermove', function (e) {
+            var hit = this.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+                return true;
+            });
+            if (hit) {
+                target.style.cursor = 'pointer';
+            } else {
+                target.style.cursor = '';
+            }
+        });
+
+        this.map.on('click', function (e) {
+            if (this.map.hasFeatureAtPixel(e.pixel, {
+                layerFilter: function (layer) {
+                    return !layer.get('name');
+                }
+            })) {
+                this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+                    this.fireEvent('selectfeature', feature);
+                }.bind(this));
+            } else {
+                this.fireEvent('deselectfeature');
+            }
+        }, this);
+    },
+
+    listeners: {
+        afterrender: function () {
+            this.initMap();
+        },
+
+        resize: function () {
+            this.map.updateSize();
+        }
+    }
+});
diff --git a/web/app/view/map/GeofenceMap.js b/web/app/view/map/GeofenceMap.js
new file mode 100644
index 00000000..37d3be74
--- /dev/null
+++ b/web/app/view/map/GeofenceMap.js
@@ -0,0 +1,126 @@
+/*
+ * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.GeofenceMap', {
+    extend: 'Traccar.view.map.BaseMap',
+    xtype: 'geofenceMapView',
+
+    requires: [
+        'Traccar.view.map.GeofenceMapController',
+        'Traccar.GeofenceConverter'
+    ],
+
+    controller: 'geofenceMap',
+    bodyBorder: true,
+
+    tbar: {
+        items: [{
+            xtype: 'combobox',
+            store: 'GeofenceTypes',
+            valueField: 'key',
+            displayField: 'name',
+            editable: false,
+            listeners: {
+                select: 'onTypeSelect'
+            }
+        }, {
+            xtype: 'tbfill'
+        }, {
+            glyph: 'xf00c@FontAwesome',
+            tooltip: Strings.sharedSave,
+            tooltipType: 'title',
+            minWidth: 0,
+            handler: 'onSaveClick'
+        }, {
+            glyph: 'xf00d@FontAwesome',
+            tooltip: Strings.sharedCancel,
+            tooltipType: 'title',
+            minWidth: 0,
+            handler: 'onCancelClick'
+        }]
+    },
+
+    getFeatures: function () {
+        return this.features;
+    },
+
+    initMap: function () {
+        var map, featureOverlay, geometry, fillColor;
+        this.callParent();
+
+        map = this.map;
+
+        this.features = new ol.Collection();
+        if (this.area !== '') {
+            geometry = Traccar.GeofenceConverter.wktToGeometry(this.mapView, this.area);
+            this.features.push(new ol.Feature(geometry));
+            if (geometry instanceof ol.geom.Circle) {
+                this.mapView.setCenter(geometry.getCenter());
+            } else if (geometry instanceof ol.geom.Polygon) {
+                this.mapView.setCenter(geometry.getCoordinates()[0][0]);
+            }
+        }
+        fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
+        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
+        featureOverlay = new ol.layer.Vector({
+            source: new ol.source.Vector({
+                features: this.features
+            }),
+            style: new ol.style.Style({
+                fill: new ol.style.Fill({
+                    color: fillColor
+                }),
+                stroke: new ol.style.Stroke({
+                    color: Traccar.Style.mapGeofenceColor,
+                    width: Traccar.Style.mapGeofenceWidth
+                }),
+                image: new ol.style.Circle({
+                    radius: Traccar.Style.mapGeofenceRadius,
+                    fill: new ol.style.Fill({
+                        color: Traccar.Style.mapGeofenceColor
+                    })
+                })
+            })
+        });
+        featureOverlay.setMap(map);
+
+        map.addInteraction(new ol.interaction.Modify({
+            features: this.features,
+            deleteCondition: function (event) {
+                return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
+            }
+        }));
+    },
+
+    addInteraction: function (type) {
+        this.draw = new ol.interaction.Draw({
+            features: this.features,
+            type: type
+        });
+        this.draw.on('drawstart', function () {
+            this.features.clear();
+        }, this);
+        this.map.addInteraction(this.draw);
+    },
+
+    removeInteraction: function () {
+        if (this.draw) {
+            this.map.removeInteraction(this.draw);
+            this.draw = null;
+        }
+    }
+});
diff --git a/web/app/view/map/GeofenceMapController.js b/web/app/view/map/GeofenceMapController.js
new file mode 100644
index 00000000..ffafb7f8
--- /dev/null
+++ b/web/app/view/map/GeofenceMapController.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2016 - 2017 Anton Tananaev (anton@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.GeofenceMapController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.geofenceMap',
+
+    requires: [
+        'Traccar.GeofenceConverter'
+    ],
+
+    onSaveClick: function (button) {
+        var geometry, projection;
+        if (this.getView().getFeatures().getLength() > 0) {
+            geometry = this.getView().getFeatures().pop().getGeometry();
+            projection = this.getView().getMapView().getProjection();
+            this.fireEvent('savearea', Traccar.GeofenceConverter.geometryToWkt(projection, geometry));
+            button.up('window').close();
+        }
+    },
+
+    onCancelClick: function (button) {
+        button.up('window').close();
+    },
+
+    onTypeSelect: function (combo) {
+        this.getView().removeInteraction();
+        this.getView().addInteraction(combo.getValue());
+    }
+});
diff --git a/web/app/view/map/Map.js b/web/app/view/map/Map.js
new file mode 100644
index 00000000..d4e654eb
--- /dev/null
+++ b/web/app/view/map/Map.js
@@ -0,0 +1,140 @@
+/*
+ * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.Map', {
+    extend: 'Traccar.view.map.BaseMap',
+    xtype: 'mapView',
+
+    requires: [
+        'Traccar.view.map.MapController',
+        'Traccar.view.SettingsMenu'
+    ],
+
+    controller: 'map',
+
+    title: Strings.mapTitle,
+    tbar: {
+        componentCls: 'toolbar-header-style',
+        defaults: {
+            xtype: 'button',
+            tooltipType: 'title',
+            stateEvents: ['toggle'],
+            enableToggle: true,
+            stateful: {
+                pressed: true
+            }
+        },
+        items: [{
+            xtype: 'tbtext',
+            html: Strings.mapTitle,
+            baseCls: 'x-panel-header-title-default'
+        }, {
+            xtype: 'tbfill'
+        }, {
+            handler: 'showReports',
+            reference: 'showReportsButton',
+            glyph: 'xf0f6@FontAwesome',
+            stateful: false,
+            enableToggle: false,
+            tooltip: Strings.reportTitle
+        }, {
+            handler: 'updateGeofences',
+            reference: 'showGeofencesButton',
+            glyph: 'xf21d@FontAwesome',
+            pressed: true,
+            stateId: 'show-geofences-button',
+            tooltip: Strings.sharedGeofences
+        }, {
+            handler: 'showLiveRoutes',
+            reference: 'showLiveRoutes',
+            glyph: 'xf1b0@FontAwesome',
+            stateId: 'show-live-routes-button',
+            tooltip: Strings.mapLiveRoutes
+        }, {
+            reference: 'deviceFollowButton',
+            glyph: 'xf05b@FontAwesome',
+            tooltip: Strings.deviceFollow,
+            stateId: 'device-follow-button',
+            toggleHandler: 'onFollowClick'
+        }, {
+            id: 'soundButton',
+            glyph: 'xf0a2@FontAwesome',
+            tooltip: Strings.sharedSound,
+            stateId: 'sound-button'
+        }, {
+            xtype: 'settingsMenu',
+            enableToggle: false
+        }]
+    },
+
+    getMarkersSource: function () {
+        return this.markersSource;
+    },
+
+    getAccuracySource: function () {
+        return this.accuracySource;
+    },
+
+    getRouteSource: function () {
+        return this.routeSource;
+    },
+
+    getGeofencesSource: function () {
+        return this.geofencesSource;
+    },
+
+    getLiveRouteSource: function () {
+        return this.liveRouteSource;
+    },
+
+    getLiveRouteLayer: function () {
+        return this.liveRouteLayer;
+    },
+
+    initMap: function () {
+        this.callParent();
+
+        this.geofencesSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            name: 'geofencesLayer',
+            source: this.geofencesSource
+        }));
+
+        this.liveRouteSource = new ol.source.Vector({});
+        this.liveRouteLayer = new ol.layer.Vector({
+            source: this.liveRouteSource,
+            visible: false
+        });
+        this.map.addLayer(this.liveRouteLayer);
+
+        this.routeSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            source: this.routeSource
+        }));
+
+        this.accuracySource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            name: 'accuracyLayer',
+            source: this.accuracySource
+        }));
+
+        this.markersSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            source: this.markersSource
+        }));
+    }
+});
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
new file mode 100644
index 00000000..8a5e81c6
--- /dev/null
+++ b/web/app/view/map/MapController.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.MapController', {
+    extend: 'Traccar.view.map.MapMarkerController',
+    alias: 'controller.map',
+
+    requires: [
+        'Traccar.GeofenceConverter'
+    ],
+
+    config: {
+        listen: {
+            controller: {
+                '*': {
+                    mapstaterequest: 'getMapState',
+                    zoomtoalldevices: 'zoomToAllDevices'
+                }
+            },
+            store: {
+                '#Geofences': {
+                    load: 'updateGeofences',
+                    add: 'updateGeofences',
+                    update: 'updateGeofences',
+                    remove: 'updateGeofences'
+                }
+            }
+        }
+    },
+
+    init: function () {
+        this.callParent();
+        this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile());
+    },
+
+    showReports: function () {
+        Traccar.app.showReports(true);
+    },
+
+    onFollowClick: function (button, pressed) {
+        if (pressed && this.selectedMarker) {
+            this.getView().getMapView().setCenter(this.selectedMarker.getGeometry().getCoordinates());
+        }
+    },
+
+    showLiveRoutes: function (button) {
+        this.getView().getLiveRouteLayer().setVisible(button.pressed);
+    },
+
+    getMapState: function () {
+        var zoom, center, projection;
+        projection = this.getView().getMapView().getProjection();
+        center = ol.proj.transform(this.getView().getMapView().getCenter(), projection, 'EPSG:4326');
+        zoom = this.getView().getMapView().getZoom();
+        this.fireEvent('mapstate', center[1], center[0], zoom);
+    },
+
+    updateGeofences: function () {
+        this.getView().getGeofencesSource().clear();
+        if (this.lookupReference('showGeofencesButton').pressed) {
+            Ext.getStore('Geofences').each(function (geofence) {
+                var feature = new ol.Feature(Traccar.GeofenceConverter
+                        .wktToGeometry(this.getView().getMapView(), geofence.get('area')));
+                feature.setStyle(this.getAreaStyle(geofence.get('name'),
+                        geofence.get('attributes') ? geofence.get('attributes').color : null));
+                this.getView().getGeofencesSource().addFeature(feature);
+                return true;
+            }, this);
+        }
+    },
+
+    zoomToAllDevices: function () {
+        this.zoomToAllPositions(Ext.getStore('LatestPositions').getData().items);
+    }
+});
diff --git a/web/app/view/map/MapMarkerController.js b/web/app/view/map/MapMarkerController.js
new file mode 100644
index 00000000..9dcb356c
--- /dev/null
+++ b/web/app/view/map/MapMarkerController.js
@@ -0,0 +1,565 @@
+/*
+ * Copyright 2015 - 2017 Anton Tananaev (anton@traccar.org)
+ * Copyright 2016 - 2017 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+Ext.define('Traccar.view.map.MapMarkerController', {
+    extend: 'Ext.app.ViewController',
+    alias: 'controller.mapMarker',
+
+    requires: [
+        'Traccar.model.Position',
+        'Traccar.model.Device',
+        'Traccar.DeviceImages'
+    ],
+
+    config: {
+        listen: {
+            controller: {
+                '*': {
+                    selectdevice: 'selectDevice',
+                    selectreport: 'selectReport'
+                },
+                'devices': {
+                    deselectfeature: 'deselectDevice'
+                }
+            },
+            store: {
+                '#Devices': {
+                    add: 'updateDevice',
+                    update: 'updateDevice',
+                    remove: 'removeDevice'
+                },
+                '#VisibleDevices': {
+                    add: 'updateVisibleDevices',
+                    update: 'updateVisibleDevices',
+                    remove: 'updateVisibleDevices',
+                    refresh: 'filterDevices'
+                },
+                '#LatestPositions': {
+                    add: 'updateLatest',
+                    update: 'updateLatest'
+                },
+                '#ReportRoute': {
+                    add: 'addReportMarkers',
+                    load: 'loadReport',
+                    clear: 'clearReport'
+                }
+            },
+            component: {
+                '#': {
+                    selectfeature: 'selectFeature',
+                    deselectfeature: 'deselectFeature'
+                }
+            }
+        }
+    },
+
+    init: function () {
+        this.latestMarkers = {};
+        this.reportMarkers = {};
+        this.accuracyCircles = {};
+        this.liveRoutes = {};
+        this.liveRouteLength = Traccar.app.getAttributePreference('web.liveRouteLength', 10);
+    },
+
+    getAreaStyle: function (label, color) {
+        var fillColor, strokeColor, styleConfig;
+        if (color) {
+            fillColor = ol.color.asArray(color);
+            strokeColor = color;
+        } else {
+            fillColor = ol.color.asArray(Traccar.Style.mapGeofenceColor);
+            strokeColor = Traccar.Style.mapGeofenceColor;
+        }
+        fillColor[3] = Traccar.Style.mapGeofenceOverlayOpacity;
+        styleConfig = {
+            fill: new ol.style.Fill({
+                color: fillColor
+            }),
+            stroke: new ol.style.Stroke({
+                color: strokeColor,
+                width: Traccar.Style.mapGeofenceWidth
+            })
+        };
+        if (label) {
+            styleConfig.text = new ol.style.Text({
+                text: label,
+                fill: new ol.style.Fill({
+                    color: Traccar.Style.mapGeofenceTextColor
+                }),
+                stroke: new ol.style.Stroke({
+                    color: Traccar.Style.mapTextStrokeColor,
+                    width: Traccar.Style.mapTextStrokeWidth
+                }),
+                font: Traccar.Style.mapTextFont
+            });
+        }
+        return new ol.style.Style(styleConfig);
+    },
+
+    getDeviceColor: function (device) {
+        switch (device.get('status')) {
+            case 'online':
+                return Traccar.Style.mapColorOnline;
+            case 'offline':
+                return Traccar.Style.mapColorOffline;
+            default:
+                return Traccar.Style.mapColorUnknown;
+        }
+    },
+
+    updateDevice: function (store, data) {
+        var i, device, deviceId, marker, style;
+
+        if (!Ext.isArray(data)) {
+            data = [data];
+        }
+
+        for (i = 0; i < data.length; i++) {
+            device = data[i];
+            deviceId = device.get('id');
+
+            if (deviceId in this.latestMarkers) {
+                marker = this.latestMarkers[deviceId];
+                style = marker.getStyle();
+                if (style.getImage().fill !== this.getDeviceColor(device) ||
+                        style.getImage().category !== device.get('category')) {
+                    this.updateDeviceMarker(style, this.getDeviceColor(device), device.get('category'));
+                    marker.changed();
+                }
+                if (style.getText().getText() !== device.get('name')) {
+                    style.getText().setText(device.get('name'));
+                    marker.changed();
+                }
+            }
+        }
+    },
+
+    removeDevice: function (store, data) {
+        var i, deviceId;
+        if (!Ext.isArray(data)) {
+            data = [data];
+        }
+        for (i = 0; i < data.length; i++) {
+            deviceId = data[i].get('id');
+            if (this.latestMarkers[deviceId]) {
+                this.getView().getMarkersSource().removeFeature(this.latestMarkers[deviceId]);
+                delete this.latestMarkers[deviceId];
+            }
+            if (this.accuracyCircles[deviceId]) {
+                this.getView().getAccuracySource().removeFeature(this.accuracyCircles[deviceId]);
+                delete this.accuracyCircles[deviceId];
+            }
+            if (this.liveRoutes[deviceId]) {
+                this.getView().getLiveRouteSource().removeFeature(this.liveRoutes[deviceId]);
+                delete this.liveRoutes[deviceId];
+            }
+        }
+    },
+
+    updateLatest: function (store, data) {
+        var i, position, device;
+
+        if (!Ext.isArray(data)) {
+            data = [data];
+        }
+
+        for (i = 0; i < data.length; i++) {
+            position = data[i];
+            device = Ext.getStore('Devices').getById(position.get('deviceId'));
+
+            if (device) {
+                this.updateAccuracy(position, device);
+                this.updateLatestMarker(position, device);
+                this.updateLiveRoute(position, device);
+            }
+        }
+    },
+
+    updateAccuracy: function (position, device) {
+        var center, radius, feature, mapView, projection, pointResolution;
+        mapView = this.getView().getMapView();
+        feature = this.accuracyCircles[position.get('deviceId')];
+
+        if (position.get('accuracy')) {
+            projection = mapView.getProjection();
+            center = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]);
+            pointResolution = ol.proj.getPointResolution(projection, mapView.getResolution(), center);
+            radius = (position.get('accuracy') / ol.proj.METERS_PER_UNIT.m) * mapView.getResolution() / pointResolution;
+
+            if (feature) {
+                feature.getGeometry().setCenter(center);
+                feature.getGeometry().setRadius(radius);
+            } else {
+                feature = new ol.Feature(new ol.geom.Circle(center, radius));
+                feature.setStyle(this.getAreaStyle(null, Traccar.Style.mapAccuracyColor));
+                feature.setId(position.get('deviceId'));
+                this.accuracyCircles[position.get('deviceId')] = feature;
+                if (this.isDeviceVisible(device)) {
+                    this.getView().getAccuracySource().addFeature(feature);
+                }
+            }
+        } else {
+            if (feature && this.getView().getAccuracySource().getFeatureById(feature.getId())) {
+                this.getView().getAccuracySource().removeFeature(feature);
+            }
+            delete this.accuracyCircles[position.get('deviceId')];
+        }
+    },
+
+    updateLatestMarker: function (position, device) {
+        var geometry, deviceId, marker, style;
+        geometry = new ol.geom.Point(ol.proj.fromLonLat([
+            position.get('longitude'),
+            position.get('latitude')
+        ]));
+        deviceId = position.get('deviceId');
+        if (deviceId in this.latestMarkers) {
+            marker = this.latestMarkers[deviceId];
+            style = marker.getStyle();
+            if (style.getImage().angle !== position.get('course')) {
+                this.rotateMarker(style, position.get('course'));
+            }
+            marker.setGeometry(geometry);
+        } else {
+            marker = new ol.Feature(geometry);
+            marker.set('record', device);
+
+            style = this.getLatestMarker(this.getDeviceColor(device),
+                    position.get('course'),
+                    device.get('category'));
+            style.getText().setText(device.get('name'));
+            marker.setStyle(style);
+            marker.setId(device.get('id'));
+            this.latestMarkers[deviceId] = marker;
+            if (this.isDeviceVisible(device)) {
+                this.getView().getMarkersSource().addFeature(marker);
+            }
+        }
+
+        if (marker === this.selectedMarker && this.lookupReference('deviceFollowButton').pressed) {
+            this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
+        }
+    },
+
+    updateLiveRoute: function (position, device) {
+        var deviceId, liveLine, liveCoordinates, lastLiveCoordinates, newCoordinates;
+        deviceId = position.get('deviceId');
+        if (deviceId in this.liveRoutes) {
+            liveCoordinates = this.liveRoutes[deviceId].getGeometry().getCoordinates();
+            lastLiveCoordinates = liveCoordinates[liveCoordinates.length - 1];
+            newCoordinates = ol.proj.fromLonLat([position.get('longitude'), position.get('latitude')]);
+            if (lastLiveCoordinates[0] === newCoordinates[0] &&
+                    lastLiveCoordinates[1] === newCoordinates[1]) {
+                return;
+            }
+            if (liveCoordinates.length >= this.liveRouteLength) {
+                liveCoordinates.shift();
+            }
+            liveCoordinates.push(newCoordinates);
+            this.liveRoutes[deviceId].getGeometry().setCoordinates(liveCoordinates);
+        } else {
+            liveLine = new ol.Feature({
+                geometry: new ol.geom.LineString([
+                    ol.proj.fromLonLat([
+                        position.get('longitude'),
+                        position.get('latitude')
+                    ])
+                ])
+            });
+            liveLine.setStyle(this.getRouteStyle(deviceId));
+            liveLine.setId(position.get('deviceId'));
+            this.liveRoutes[deviceId] = liveLine;
+            if (this.isDeviceVisible(device)) {
+                this.getView().getMarkersSource().addFeature(liveLine);
+            }
+        }
+    },
+
+    loadReport: function (store, data) {
+        var i, position, point;
+
+        this.addReportMarkers(store, data);
+
+        this.reportRoute = [];
+        for (i = 0; i < data.length; i++) {
+            position = data[i];
+            point = ol.proj.fromLonLat([
+                position.get('longitude'),
+                position.get('latitude')
+            ]);
+            if (i === 0 || data[i].get('deviceId') !== data[i - 1].get('deviceId')) {
+                this.reportRoute.push(new ol.Feature({
+                    geometry: new ol.geom.LineString([])
+                }));
+                this.reportRoute[this.reportRoute.length - 1].setStyle(this.getRouteStyle(data[i].get('deviceId')));
+                this.getView().getRouteSource().addFeature(this.reportRoute[this.reportRoute.length - 1]);
+            }
+            this.reportRoute[this.reportRoute.length - 1].getGeometry().appendCoordinate(point);
+        }
+    },
+
+    addReportMarker: function (position) {
+        var geometry, marker, style, point = ol.proj.fromLonLat([
+            position.get('longitude'),
+            position.get('latitude')
+        ]);
+        geometry = new ol.geom.Point(point);
+        marker = new ol.Feature(geometry);
+        marker.set('record', position);
+        style = this.getReportMarker(position.get('deviceId'), position.get('course'));
+        marker.setStyle(style);
+        this.reportMarkers[position.get('id')] = marker;
+        this.getView().getMarkersSource().addFeature(marker);
+    },
+
+    addReportMarkers: function (store, data) {
+        var i;
+        this.clearReport();
+        for (i = 0; i < data.length; i++) {
+            if (store.showMarkers) {
+                this.addReportMarker(data[i]);
+            }
+        }
+        this.zoomToAllPositions(data);
+    },
+
+    clearReport: function () {
+        var key, i;
+
+        if (this.reportRoute) {
+            for (i = 0; i < this.reportRoute.length; i++) {
+                this.getView().getRouteSource().removeFeature(this.reportRoute[i]);
+            }
+            this.reportRoute = null;
+        }
+
+        if (this.reportMarkers) {
+            for (key in this.reportMarkers) {
+                if (this.reportMarkers.hasOwnProperty(key)) {
+                    this.getView().getMarkersSource().removeFeature(this.reportMarkers[key]);
+                }
+            }
+            this.reportMarkers = {};
+        }
+
+        if (this.selectedMarker && this.selectedMarker.get('record') instanceof Traccar.model.Position) {
+            this.selectedMarker = null;
+        }
+    },
+
+    getRouteStyle: function (deviceId) {
+        return new ol.style.Style({
+            stroke: new ol.style.Stroke({
+                color: Traccar.app.getReportColor(deviceId),
+                width: Traccar.Style.mapRouteWidth
+            })
+        });
+    },
+
+    getMarkerStyle: function (zoom, color, angle, category) {
+        var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category);
+        return new ol.style.Style({
+            image: image,
+            text: new ol.style.Text({
+                textBaseline: 'bottom',
+                fill: new ol.style.Fill({
+                    color: Traccar.Style.mapTextColor
+                }),
+                stroke: new ol.style.Stroke({
+                    color: Traccar.Style.mapTextStrokeColor,
+                    width: Traccar.Style.mapTextStrokeWidth
+                }),
+                offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset,
+                font : Traccar.Style.mapTextFont
+            })
+        });
+    },
+
+    getLatestMarker: function (color, angle, category) {
+        return this.getMarkerStyle(false, color, angle, category);
+    },
+
+    getReportMarker: function (deviceId, angle) {
+        return this.getMarkerStyle(false, Traccar.app.getReportColor(deviceId), angle, 'arrow');
+    },
+
+    resizeMarker: function (style, zoom) {
+        var image, text;
+        image = Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+                zoom,
+                style.getImage().angle,
+                style.getImage().category);
+        text = style.getText();
+        text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
+        style.setText(text);
+        style.setImage(image);
+    },
+
+    rotateMarker: function (style, angle) {
+        style.setImage(Traccar.DeviceImages.getImageIcon(style.getImage().fill,
+                style.getImage().zoom,
+                angle,
+                style.getImage().category));
+    },
+
+    updateDeviceMarker: function (style, color, category) {
+        var image, text;
+        image = Traccar.DeviceImages.getImageIcon(color,
+                style.getImage().zoom,
+                style.getImage().angle,
+                category);
+        text = style.getText();
+        text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset);
+        style.setText(text);
+        style.setImage(image);
+    },
+
+    selectMarker: function (marker, center) {
+        if (this.selectedMarker) {
+            if (!Ext.getStore('ReportRoute').showMarkers &&
+                    this.selectedMarker.get('record') instanceof Traccar.model.Position) {
+                this.getView().getMarkersSource().removeFeature(this.selectedMarker);
+                delete this.reportMarkers[this.selectedMarker.get('record').get('id')];
+            } else {
+                this.resizeMarker(this.selectedMarker.getStyle(), false);
+                this.selectedMarker.getStyle().setZIndex(0);
+                this.selectedMarker.changed();
+            }
+        }
+
+        if (marker) {
+            this.resizeMarker(marker.getStyle(), true);
+            marker.getStyle().setZIndex(1);
+            marker.changed();
+            if (center) {
+                this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates());
+            }
+        }
+
+        this.selectedMarker = marker;
+    },
+
+    selectDevice: function (device, center) {
+        this.selectMarker(this.latestMarkers[device.get('id')], center);
+    },
+
+    selectReport: function (position, center) {
+        if (position instanceof Traccar.model.Position) {
+            if (!Ext.getStore('ReportRoute').showMarkers) {
+                this.addReportMarker(position);
+            }
+            this.selectMarker(this.reportMarkers[position.get('id')], center);
+        }
+    },
+
+    selectFeature: function (feature) {
+        var record = feature.get('record');
+        if (record) {
+            if (record instanceof Traccar.model.Device) {
+                this.fireEvent('selectdevice', record, false);
+            } else {
+                this.fireEvent('selectreport', record, false);
+            }
+        }
+    },
+
+    deselectFeature: function () {
+        this.deselectDevice();
+        this.fireEvent('deselectfeature');
+    },
+
+    deselectDevice: function () {
+        this.selectMarker(null, false);
+    },
+
+    zoomToAllPositions: function (data) {
+        var i, point, minx, miny, maxx, maxy;
+        for (i = 0; i < data.length; i++) {
+            point = ol.proj.fromLonLat([
+                data[i].get('longitude'),
+                data[i].get('latitude')
+            ]);
+            if (i === 0) {
+                minx = maxx = point[0];
+                miny = maxy = point[1];
+            } else {
+                minx = Math.min(point[0], minx);
+                miny = Math.min(point[1], miny);
+                maxx = Math.max(point[0], maxx);
+                maxy = Math.max(point[1], maxy);
+            }
+        }
+        if (minx !== maxx || miny !== maxy) {
+            this.getView().getMapView().fit([minx, miny, maxx, maxy]);
+        } else if (point) {
+            this.getView().getMapView().fit(new ol.geom.Point(point));
+        }
+    },
+
+    updateVisibleDevices: function (store, data) {
+        var i, device;
+
+        if (!Ext.isArray(data)) {
+            data = [data];
+        }
+
+        for (i = 0; i < data.length; i++) {
+            device = data[i];
+            if (device.get('id') in this.latestMarkers) {
+                this.updateDeviceVisibility(device);
+            }
+        }
+    },
+
+    isDeviceVisible: function (device) {
+        return Ext.getStore('VisibleDevices').contains(device);
+    },
+
+    updateDeviceVisibility: function (device) {
+        var deviceId, accuracy, liveLine, marker;
+        deviceId = device.get('id');
+        marker = this.latestMarkers[deviceId];
+        accuracy = this.accuracyCircles[deviceId];
+        liveLine = this.liveRoutes[deviceId];
+        if (this.isDeviceVisible(device)) {
+            if (marker && !this.getView().getMarkersSource().getFeatureById(marker.getId())) {
+                this.getView().getMarkersSource().addFeature(marker);
+            }
+            if (accuracy && !this.getView().getAccuracySource().getFeatureById(accuracy.getId())) {
+                this.getView().getAccuracySource().addFeature(accuracy);
+            }
+            if (liveLine && !this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) {
+                this.getView().getLiveRouteSource().addFeature(liveLine);
+            }
+        } else {
+            if (marker && this.getView().getMarkersSource().getFeatureById(marker.getId())) {
+                this.getView().getMarkersSource().removeFeature(marker);
+            }
+            if (accuracy && this.getView().getAccuracySource().getFeatureById(accuracy.getId())) {
+                this.getView().getAccuracySource().removeFeature(accuracy);
+            }
+            if (liveLine && this.getView().getLiveRouteSource().getFeatureById(liveLine.getId())) {
+                this.getView().getLiveRouteSource().removeFeature(liveLine);
+            }
+        }
+    },
+
+    filterDevices: function (store) {
+        Ext.getStore('Devices').each(this.updateDeviceVisibility, this, false);
+    }
+});