aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2016-10-12 16:41:59 +1300
committerGitHub <noreply@github.com>2016-10-12 16:41:59 +1300
commit56d37a27017a1e47ec858195d910b438377d47b9 (patch)
treed0abcfc085e8467acc71b3bdc1f8982d4cf24e2c
parent401ee249a4c7b0de5eeaf32d1cbee4fd0d82a7a8 (diff)
parent561f459f3386f44c12da315e46b5275ba7d4a3cf (diff)
downloadtrackermap-web-56d37a27017a1e47ec858195d910b438377d47b9.tar.gz
trackermap-web-56d37a27017a1e47ec858195d910b438377d47b9.tar.bz2
trackermap-web-56d37a27017a1e47ec858195d910b438377d47b9.zip
Merge pull request #295 from Abyss777/show_geofences
Always show geofences on the Map
-rw-r--r--web/app/Style.js1
-rw-r--r--web/app/view/Map.js9
-rw-r--r--web/app/view/MapController.js67
3 files changed, 76 insertions, 1 deletions
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..c2477860 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,49 @@ 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
+ }),
+ 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
+ })
+ });
+ },
+
+ 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();
+ }
}
});