aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2015-06-17 22:46:24 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2015-06-17 22:46:24 +1200
commit3788d87908509c4d59898e0e41de5f6a73ecc67b (patch)
treeac87d06d80ef850e36227b473d51d9d3895b7cac
parent1a4dbe41223f253d649fba8b506b70c7a447a1ff (diff)
downloadtrackermap-server-3788d87908509c4d59898e0e41de5f6a73ecc67b.tar.gz
trackermap-server-3788d87908509c4d59898e0e41de5f6a73ecc67b.tar.bz2
trackermap-server-3788d87908509c4d59898e0e41de5f6a73ecc67b.zip
Select marker and line styles
-rw-r--r--web/app/Resources.js12
-rw-r--r--web/app/view/map/MapController.js87
2 files changed, 46 insertions, 53 deletions
diff --git a/web/app/Resources.js b/web/app/Resources.js
index 1103fe729..e08996e2b 100644
--- a/web/app/Resources.js
+++ b/web/app/Resources.js
@@ -96,11 +96,15 @@ var styles = {
map_center: [ -0.1275, 51.507222 ],
map_zoom: 6,
map_max_zoom: 16,
- map_report_route: 'blue',
- map_report_marker: 'blue',
- map_live_marker: 'red',
+ map_select_color: 'green',
+ map_select_radius: 10,
+ map_report_color: 'blue',
+ map_report_radius: 5,
+ map_live_color: 'red',
+ map_live_radius: 7,
+ map_stroke_color: 'grey',
map_route_width: 5,
- map_marker_radius: 50,
+ map_marker_stroke: 2,
map_delay: 500
};
diff --git a/web/app/view/map/MapController.js b/web/app/view/map/MapController.js
index b0ab0bb58..a0f167ec3 100644
--- a/web/app/view/map/MapController.js
+++ b/web/app/view/map/MapController.js
@@ -57,18 +57,7 @@ Ext.define('Traccar.view.map.MapController', {
var marker = new ol.Feature({
geometry: geometry
});
- marker.setStyle(new ol.style.Style({
- image: new ol.style.Circle({
- radius: 40,
- fill: new ol.style.Fill({
- color: 'rgba(150,150,200,0.6)'
- }),
- stroke: new ol.style.Stroke({
- color: 'rgba(20,30,100,0.8)',
- width: 3
- })
- })
- }));
+ marker.setStyle(this.getMarkerStyle(styles.map_live_radius, styles.map_live_color));
this.getView().vectorSource.addFeature(marker);
this.liveData[data[i].deviceId] = marker;
}
@@ -82,30 +71,17 @@ Ext.define('Traccar.view.map.MapController', {
});
},
- getLineStyle: function(color) {
+ getLineStyle: function() {
return new ol.style.Style({
- /*fill: new ol.style.Fill({
- color: color
- }),
stroke: new ol.style.Stroke({
- color: color,
+ color: styles.map_stroke_color,
width: styles.map_route_width
- }),*/
- image: new ol.style.Circle({
- radius: 40,
- fill: new ol.style.Fill({
- color: 'rgba(150,150,200,0.6)'
- }),
- stroke: new ol.style.Stroke({
- color: 'rgba(20,30,100,0.8)',
- width: 3
- })
})
});
},
- getMarkerStyle: function(color) {
- return new ol.style.Style({
+ getMarkerStyle: function(radius, color) {
+ /*return new ol.style.Style({
text: new ol.style.Text({
text: '\uf041',
font: 'normal 32px FontAwesome',
@@ -118,6 +94,18 @@ Ext.define('Traccar.view.map.MapController', {
width: 2
})
})
+ });*/
+ return new ol.style.Style({
+ image: new ol.style.Circle({
+ radius: radius,
+ fill: new ol.style.Fill({
+ color: color
+ }),
+ stroke: new ol.style.Stroke({
+ color: styles.map_stroke_color,
+ width: styles.map_marker_stroke
+ })
+ })
});
},
@@ -129,6 +117,7 @@ Ext.define('Traccar.view.map.MapController', {
var index;
var positions = [];
+
for (index = 0; index < data.getCount(); index++) {
positions.push(ol.proj.fromLonLat([
data.getAt(index).data.longitude,
@@ -137,38 +126,38 @@ Ext.define('Traccar.view.map.MapController', {
}
this.reportRoute = new ol.Feature({
- geometry: new ol.geom.LineString(positions),
- style: this.getLineStyle(styles.map_report_route)
- });
-
- this.reportStart = new ol.Feature({
- geometry: new ol.geom.Point(positions[0]),
- style: this.getLineStyle(styles.map_report_route)
+ geometry: new ol.geom.LineString(positions)
});
-
- this.reportFinish = new ol.Feature({
- geometry: new ol.geom.Point(positions[positions.length - 1]),
- style: this.getLineStyle(styles.map_report_route)
- });
-
+ this.reportRoute.setStyle(this.getLineStyle());
vectorSource.addFeature(this.reportRoute);
- vectorSource.addFeature(this.reportStart);
- vectorSource.addFeature(this.reportFinish);
+
+ this.reportRoutePoints = [];
+ for (index = 0; index < positions.length; index++) {
+ var feature = new ol.Feature({
+ geometry: new ol.geom.Point(positions[index])
+ });
+ feature.setStyle(this.getMarkerStyle(styles.map_report_radius, styles.map_report_color));
+ this.reportRoutePoints.push(feature);
+ vectorSource.addFeature(feature);
+ }
},
reportClear: function() {
+ var index;
var vectorSource = this.getView().vectorSource;
vectorSource.removeFeature(this.reportRoute);
- vectorSource.removeFeature(this.reportStart);
- vectorSource.addFeature(this.reportFinish);
+
+ for (index = 0; index < this.reportRoutePoints.length; index++) {
+ vectorSource.removeFeature(this.reportRoutePoints[index]);
+ }
+ this.reportRoutePoints = [];
},
selectPosition: function(position) {
if (this.currentPosition === undefined) {
- this.currentPosition = new ol.Feature({
- style: this.getLineStyle(styles.map_report_route)
- });
+ this.currentPosition = new ol.Feature();
+ this.currentPosition.setStyle(this.getMarkerStyle(styles.map_select_radius, styles.map_select_color));
this.getView().vectorSource.addFeature(this.currentPosition);
}