Create base map panel

1 files changed, 16 insertions, 106 deletions

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
+        }));
     }
 });