From 279fe6c18dc248f6c987612416037440f965f976 Mon Sep 17 00:00:00 2001
From: Cendrine HOARAU <c.hoarau@cbn-alpin.fr>
Date: Wed, 12 Jul 2023 09:35:43 +0200
Subject: [PATCH] fix synthese: resolve multipoint error

---
 .../synthese-carte.component.ts               | 57 +++++++------------
 1 file changed, 20 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/syntheseModule/synthese-results/synthese-carte/synthese-carte.component.ts b/frontend/src/app/syntheseModule/synthese-results/synthese-carte/synthese-carte.component.ts
index 20662a1298..35d23f25ca 100644
--- a/frontend/src/app/syntheseModule/synthese-results/synthese-carte/synthese-carte.component.ts
+++ b/frontend/src/app/syntheseModule/synthese-results/synthese-carte/synthese-carte.component.ts
@@ -264,16 +264,6 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
     }
   }
 
-  markerStyle(layer, countObs) {
-    layer.setIcon(this.defaultIcon);
-    layer.bindTooltip(`${countObs}`, {
-      permanent: true,
-      direction: 'center',
-      offset: L.point({ x: 0, y: -25 }),
-      className: 'number-obs',
-    });
-  }
-
   layerEvent(feature, layer, idSyntheseIds) {
     layer.on({
       click: (e) => {
@@ -287,17 +277,12 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
   }
 
   onEachFeature(feature, layer) {
-    let countObs = feature.properties.observations.id.length;
     // make a cache a layers in a dict with id key
     this.layerDictCache(feature.properties.observations.id, layer);
     // set style
     if (this.areasEnable) {
       this.setAreasStyle(layer, feature.properties.observations.id.length);
     }
-    if (feature.geometry.type == 'Point' || feature.geometry.type == 'MultiPoint') {
-      this.markerStyle(layer, countObs);
-    }
-    // set events
     this.layerEvent(feature, layer, feature.properties.observations.id);
   }
 
@@ -307,8 +292,8 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
   clusterCountOverrideFn(cluster) {
     const obsChildCount = cluster
       .getAllChildMarkers()
-      .map((marker) => {
-        return marker.feature.properties.observations.id.length;
+      .map((layer) => {
+        return layer.nb_obs;
       })
       .reduce((previous, next) => previous + next);
     const clusterSize = obsChildCount > 100 ? 'large' : obsChildCount > 10 ? 'medium' : 'small';
@@ -336,6 +321,19 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
           })
         : new L.FeatureGroup();
       const geojsonLayer = new L.GeoJSON(change.inputSyntheseData.currentValue, {
+        pointToLayer: (feature, latlng) => {
+          const circleMarker = L.circleMarker(latlng);
+          let countObs = feature.properties.observations.id.length;
+          (circleMarker as any).nb_obs = countObs;
+          circleMarker.bindTooltip(`${countObs}`, {
+            permanent: true,
+            direction: 'center',
+            offset: L.point({ x: 0, y: 0 }),
+            className: 'number-obs',
+          });
+
+          return circleMarker;
+        },
         onEachFeature: this.onEachFeature.bind(this),
       });
       this.cluserOrSimpleFeatureGroup.addLayer(geojsonLayer);
@@ -378,22 +376,15 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
     // restore initial style
     let originStyle = this.areasEnable ? this.originAreasStyle : this.originDefaultStyle;
     let selectedStyle = this.areasEnable ? this.selectedAreasStyle : this.selectedDefaultStyle;
+
     if (this.selectedLayers.length > 0) {
       this.selectedLayers.forEach((layer) => {
-        if ('setStyle' in layer) {
-          (layer as L.GeoJSON).setStyle(originStyle);
-        } else {
-          (layer as L.Marker).setIcon(this.defaultIcon);
-        }
+        (layer as L.GeoJSON).setStyle(originStyle);
       });
     }
     // set selected style
-    if (this.areasEnable || !(feature.geometry.type == 'Point')) {
-      layer.setStyle(selectedStyle);
-    } else {
-      layer.setIcon(this.selectedIcon);
-    }
 
+    layer.setStyle(selectedStyle);
     this.selectedLayers = [layer];
   }
 
@@ -402,11 +393,7 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
     let originStyle = this.areasEnable ? this.originAreasStyle : this.originDefaultStyle;
     if (this.selectedLayers.length > 0) {
       this.selectedLayers.forEach((layer) => {
-        if ('setStyle' in layer) {
-          (layer as L.GeoJSON).setStyle(originStyle);
-        } else {
-          (layer as L.Marker).setIcon(this.defaultIcon);
-        }
+        (layer as L.GeoJSON).setStyle(originStyle);
       });
     }
     // Apply new selected layer
@@ -414,11 +401,7 @@ export class SyntheseCarteComponent implements OnInit, AfterViewInit, OnChanges,
 
     let selectedStyle = this.areasEnable ? this.selectedAreasStyle : this.selectedDefaultStyle;
     this.selectedLayers.forEach((layer) => {
-      if ('setStyle' in layer) {
-        (layer as any).setStyle(selectedStyle);
-      } else {
-        (layer as L.Marker).setIcon(this.selectedIcon);
-      }
+      (layer as L.GeoJSON).setStyle(selectedStyle);
     });
   }