From 3885d2fac4ac5d8538c5f15a4b58a1440f73b7b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Kocy=C5=82a?= <maciej.kocyla@polcode.net>
Date: Wed, 11 Dec 2024 11:23:57 +0100
Subject: [PATCH] move markers with similar locations

---
 .../packs/data_centers/map_component.vue      | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/javascript/packs/data_centers/map_component.vue b/app/javascript/packs/data_centers/map_component.vue
index 0620deb7a..5e77ce598 100644
--- a/app/javascript/packs/data_centers/map_component.vue
+++ b/app/javascript/packs/data_centers/map_component.vue
@@ -22,7 +22,7 @@
   import { mapGetters } from 'vuex';
   import '../mixins/numbers_mixins'
   import { MarkerClusterer } from "@googlemaps/markerclusterer";
-import { defaultOnClusterClickHandler } from '@googlemaps/markerclusterer';
+  import { h } from 'vue'
 
   axios.defaults.headers.get["Authorization"] = window.api_authorization;
 
@@ -102,8 +102,11 @@ import { defaultOnClusterClickHandler } from '@googlemaps/markerclusterer';
           const infoWindow = new google.maps.InfoWindow();
           axios.get('/api/v1/data-centers-for-map?network=' + this.network)
                .then(response => {
-                 this.data_centers = response.data['data_centers'];
-                 this.data_centers = this.data_centers.filter(data_center => data_center.location_latitude && data_center.location_longitude);
+                let valid_data_centers = response.data['data_centers'].filter(data_center => data_center.location_latitude && data_center.location_longitude);
+                valid_data_centers.forEach(data_center => {
+                  let checked_data_center = this.test_unique_data_center(data_center);
+                  this.data_centers.push(checked_data_center);
+                })
                  this.data_centers.forEach(data_center => {
                     let position = { lat: parseFloat(data_center.location_latitude), lng: parseFloat(data_center.location_longitude) };
                     this.heat_points.push({
@@ -131,6 +134,20 @@ import { defaultOnClusterClickHandler } from '@googlemaps/markerclusterer';
                 this.set_up_clusterer(this.marker_list, this.map);
           });
         },
+        
+        test_unique_data_center: function(data_center, lv = 0) {
+          lv = lv + 1;
+          if (this.data_centers.length == 0) {
+            return data_center;
+          }
+          this.data_centers.forEach(data_center_added => {
+            if(data_center_added.location_latitude == data_center.location_latitude && data_center_added.location_longitude == data_center.location_longitude) {
+              data_center.location_longitude = parseFloat(data_center.location_longitude) + 0.0003;
+              return this.test_unique_data_center(data_center, lv);
+            }
+          });
+          return data_center;
+        },
 
         set_up_clusterer: function(marker_list, map) {
           this.markerClusterer && this.markerClusterer.clearMarkers();
@@ -162,12 +179,7 @@ import { defaultOnClusterClickHandler } from '@googlemaps/markerclusterer';
                   zIndex: count,
                 });
               }
-            },
-            // onClusterClick: function(event, cluster, map) {
-            //   console.log("Cluster click event", event);
-            //   console.log("Cluster click cluster", cluster);
-            //   console.log("Cluster click map", map);
-            // }
+            }
           });
         },