Implement clustering for report

2 files changed, 6 insertions, 12 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index b75503c32..49dcd1b99 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -32,6 +32,8 @@ Ext.define('Traccar.Style', {
     reportHeight: 250,
     reportTime: 100,
 
+    mapClusterDistance: 30,
+
     mapDefaultLat: 51.507222,
     mapDefaultLon: -0.1275,
     mapDefaultZoom: 6,
diff --git a/web/app/view/Map.js b/web/app/view/Map.js
index a2bbdc92c..d9b041535 100644
--- a/web/app/view/Map.js
+++ b/web/app/view/Map.js
@@ -99,21 +99,13 @@ Ext.define('Traccar.view.Map', {
             this.reportSource = new ol.source.Vector({});
             reportLayer = new ol.layer.Vector({
                 source: new ol.source.Cluster({
-                    distance: 40,
+                    distance: Traccar.Style.mapClusterDistance,
                     source: this.reportSource
                 }),
                 style: function (feature, resolution) {
-                    style = [new ol.style.Style({
-                        image: new ol.style.Circle({
-                            radius: feature.get('radius'),
-                            fill: new ol.style.Fill({
-                                color: [255, 153, 0, Math.min(0.8, 0.4 + (feature.get('features').length / 100))]
-                            })
-                        }),
-                        text: new ol.style.Text({
-                            text: feature.get('features').length.toString()
-                        })
-                    })];
+                    if (feature.get('features').length == 1) {
+                        return [feature.get('features')[0].getStyle()];
+                    }
                 }
             });