Create base map panel

2 files changed, 134 insertions, 106 deletions

diff --git a/web/app/view/BaseMap.js b/web/app/view/BaseMap.js
new file mode 100644
index 000000000..c2a889188
--- /dev/null
+++ b/web/app/view/BaseMap.js
@@ -0,0 +1,118 @@
+/*
+ * Copyright 2016 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.BaseMap', {
+    extend: 'Ext.form.Panel',
+    xtype: 'baseMapView',
+
+    title: Strings.mapTitle,
+    layout: 'fit',
+
+    getMap: function () {
+        return this.map;
+    },
+
+    getMapView: function () {
+        return this.mapView;
+    },
+
+    initMap: function() {
+        var user, server, layer, type, bingKey, lat, lon, zoom, target;
+
+        user = Traccar.app.getUser();
+        server = Traccar.app.getServer();
+
+        type = user.get('map') || server.get('map');
+        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 {
+            layer = new ol.layer.Tile({
+                source: new ol.source.OSM({})
+            });
+        }
+
+        lat = user.get('latitude') || server.get('latitude') || Traccar.Style.mapDefaultLat;
+        lon = user.get('longitude') || server.get('longitude') || Traccar.Style.mapDefaultLon;
+        zoom = user.get('zoom') || server.get('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) {
+            this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
+                this.fireEvent('selectFeature', feature);
+            }, this);
+        }, this);
+    },
+
+    listeners: {
+        afterrender: function () {
+            this.initMap();
+        },
+
+        resize: function () {
+            this.map.updateSize();
+        }
+    }
+});
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index b8c0d8dc5..d06630e38 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com)
+ * Copyright 2015 - 2016 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.
@@ -15,7 +15,7 @@
  */
 
 Ext.define('Traccar.view.Map', {
-    extend: 'Ext.form.Panel',
+    extend: 'Traccar.view.BaseMap',
     xtype: 'mapView',
 
     requires: [
@@ -24,17 +24,6 @@ Ext.define('Traccar.view.Map', {
 
     controller: 'map',
 
-    title: Strings.mapTitle,
-    layout: 'fit',
-
-    getMap: function () {
-        return this.map;
-    },
-
-    getMapView: function () {
-        return this.mapView;
-    },
-
     getLatestSource: function () {
         return this.latestSource;
     },
@@ -47,101 +36,22 @@ Ext.define('Traccar.view.Map', {
         return this.reportSource;
     },
 
-    listeners: {
-        afterrender: function () {
-            var user, server, layer, type, bingKey, latestLayer, routeLayer, reportLayer, lat, lon, zoom, target;
-
-            user = Traccar.app.getUser();
-            server = Traccar.app.getServer();
-
-            type = user.get('map') || server.get('map');
-            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 {
-                layer = new ol.layer.Tile({
-                    source: new ol.source.OSM({})
-                });
-            }
-
-            this.latestSource = new ol.source.Vector({});
-            latestLayer = new ol.layer.Vector({
-                source: this.latestSource
-            });
-
-            this.routeSource = new ol.source.Vector({});
-            routeLayer = new ol.layer.Vector({
-                source: this.routeSource
-            });
-
-            this.reportSource = new ol.source.Vector({});
-            reportLayer = new ol.layer.Vector({
-                source: this.reportSource
-            });
-
-            lat = user.get('latitude') || server.get('latitude') || Traccar.Style.mapDefaultLat;
-            lon = user.get('longitude') || server.get('longitude') || Traccar.Style.mapDefaultLon;
-            zoom = user.get('zoom') || server.get('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, routeLayer, reportLayer, latestLayer],
-                view: this.mapView
-            });
-
-            target = this.map.getTarget();
-            if (typeof target === 'string') {
-                target = Ext.get(target).dom;
-            }
+    initMap: function () {
+        this.callParent();
 
-            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.latestSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            source: this.latestSource
+        }));
 
-            this.map.on('click', function (e) {
-                this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
-                    this.fireEvent('selectFeature', feature);
-                }, this);
-            }, this);
-        },
+        this.routeSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            source: this.routeSource
+        }));
 
-        resize: function () {
-            this.map.updateSize();
-        }
+        this.reportSource = new ol.source.Vector({});
+        this.map.addLayer(new ol.layer.Vector({
+            source: this.reportSource
+        }));
     }
 });