From d26883a69c8efaf88694ad0b07887461a01a68d9 Mon Sep 17 00:00:00 2001 From: kas Date: Tue, 11 Oct 2016 15:50:13 +0500 Subject: Always show geofences on the Map --- web/app/Style.js | 1 + web/app/view/Map.js | 9 ++++++ web/app/view/MapController.js | 73 ++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 82 insertions(+), 1 deletion(-) (limited to 'web') diff --git a/web/app/Style.js b/web/app/Style.js index d067e041..a8e16f9f 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -68,6 +68,7 @@ Ext.define('Traccar.Style', { mapMaxZoom: 19, mapDelay: 500, + mapGeofenceTextColor: 'rgba(14, 88, 141, 1.0)', mapGeofenceColor: 'rgba(21, 127, 204, 1.0)', mapGeofenceOverlay: 'rgba(21, 127, 204, 0.2)', mapGeofenceWidth: 5, diff --git a/web/app/view/Map.js b/web/app/view/Map.js index d0ec433b..2cbd1714 100644 --- a/web/app/view/Map.js +++ b/web/app/view/Map.js @@ -39,9 +39,18 @@ Ext.define('Traccar.view.Map', { return this.reportSource; }, + getGeofencesSource: function () { + return this.geofencesSource; + }, + initMap: function () { this.callParent(); + this.geofencesSource = new ol.source.Vector({}); + this.map.addLayer(new ol.layer.Vector({ + source: this.geofencesSource + })); + this.latestSource = new ol.source.Vector({}); this.map.addLayer(new ol.layer.Vector({ source: this.latestSource diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 59fd285e..b14d3269 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -21,7 +21,8 @@ Ext.define('Traccar.view.MapController', { requires: [ 'Traccar.model.Position', - 'Traccar.model.Device' + 'Traccar.model.Device', + 'Traccar.GeofenceConverter' ], config: { @@ -45,6 +46,12 @@ Ext.define('Traccar.view.MapController', { '#ReportRoute': { load: 'loadReport', clear: 'clearReport' + }, + '#Geofences': { + load: 'showGeofences', + add: 'updateGeofences', + update: 'updateGeofences', + remove: 'updateGeofences' } }, component: { @@ -58,6 +65,20 @@ Ext.define('Traccar.view.MapController', { init: function () { this.latestMarkers = {}; this.reportMarkers = {}; + this.getView().header = { + xtype: 'header', + title: Strings.mapTitle, + items: [{ + xtype: 'button', + handler: 'showGeofences', + reference: 'showGeofencesButton', + glyph: 'xf21d@FontAwesome', + enableToggle: true, + pressed: true, + tooltip: Strings.sharedGeofences, + tooltipType: 'title' + }] + }; }, getDeviceColor: function (device) { @@ -321,5 +342,55 @@ Ext.define('Traccar.view.MapController', { center = ol.proj.transform(this.getView().getMapView().getCenter(), projection, 'EPSG:4326'); zoom = this.getView().getMapView().getZoom(); this.fireEvent('mapstate', center[1], center[0], zoom); + }, + + getGeofenceStyle: function (label) { + return new ol.style.Style({ + fill: new ol.style.Fill({ + color: Traccar.Style.mapGeofenceOverlay + }), + 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 + }) + }), + text: new ol.style.Text({ + text: label, + textBaseline: 'bottom', + 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 + }) + }); + }, + + showGeofences: function () { + 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.getGeofenceStyle(geofence.get('name'))); + this.getView().getGeofencesSource().addFeature(feature); + return true; + }, this); + } else { + this.getView().getGeofencesSource().clear(); + } + }, + + updateGeofences: function () { + if (this.lookupReference('showGeofencesButton').pressed) { + this.getView().getGeofencesSource().clear(); + this.showGeofences(); + } } }); -- cgit v1.2.3 From 561f459f3386f44c12da315e46b5275ba7d4a3cf Mon Sep 17 00:00:00 2001 From: kas Date: Wed, 12 Oct 2016 08:28:40 +0500 Subject: - Center label - Removed unnecessary style - Style fixes --- web/app/view/MapController.js | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) (limited to 'web') diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index b14d3269..c2477860 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -69,15 +69,15 @@ Ext.define('Traccar.view.MapController', { xtype: 'header', title: Strings.mapTitle, items: [{ - xtype: 'button', - handler: 'showGeofences', - reference: 'showGeofencesButton', - glyph: 'xf21d@FontAwesome', - enableToggle: true, - pressed: true, - tooltip: Strings.sharedGeofences, - tooltipType: 'title' - }] + xtype: 'button', + handler: 'showGeofences', + reference: 'showGeofencesButton', + glyph: 'xf21d@FontAwesome', + enableToggle: true, + pressed: true, + tooltip: Strings.sharedGeofences, + tooltipType: 'title' + }] }; }, @@ -353,15 +353,8 @@ Ext.define('Traccar.view.MapController', { 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 - }) - }), text: new ol.style.Text({ text: label, - textBaseline: 'bottom', fill: new ol.style.Fill({ color: Traccar.Style.mapGeofenceTextColor }), @@ -377,7 +370,8 @@ Ext.define('Traccar.view.MapController', { showGeofences: function () { 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'))); + var feature = new ol.Feature(Traccar.GeofenceConverter + .wktToGeometry(this.getView().getMapView(), geofence.get('area'))); feature.setStyle(this.getGeofenceStyle(geofence.get('name'))); this.getView().getGeofencesSource().addFeature(feature); return true; -- cgit v1.2.3