diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2016-07-03 12:39:55 +1200 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2016-07-03 12:39:55 +1200 |
commit | bac0d9090c1a8906f7d3c0a56da58c33495fd6db (patch) | |
tree | 2ce9845d6accc54369df79e97bf9f30526f53153 /web | |
parent | 8e725d35d9a55bdb4b17002a41231203fabee359 (diff) | |
download | traccar-server-bac0d9090c1a8906f7d3c0a56da58c33495fd6db.tar.gz traccar-server-bac0d9090c1a8906f7d3c0a56da58c33495fd6db.tar.bz2 traccar-server-bac0d9090c1a8906f7d3c0a56da58c33495fd6db.zip |
Create base map panel
Diffstat (limited to 'web')
-rw-r--r-- | web/app/view/BaseMap.js | 118 | ||||
-rw-r--r-- | web/app/view/Map.js | 122 |
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 + })); } }); |