feat: handled circle-heatmap color for icons and for input. Saved the…

… layer with the correct type to preserve the compatibility with mapbox.
gisaia · Jan 31, 2024 · bdfd9a5 · bdfd9a5
1 parent bfcb3e7
commit bdfd9a5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/src/app/modules/map-config/services/map-import/map-import.service.ts b/src/app/modules/map-config/services/map-import/map-import.service.ts
@@ -242,7 +242,9 @@ export class MapImportService {
 
     } else {
       propertySelectorValues.propertySource = PROPERTY_SELECTOR_SOURCE.interpolated;
-      const getValue = (inputValues[2] as Array<string>)[1];
+      const interpolatedColumn = (inputValues[2] as Array<string>);
+      // cause interpolated column could contain only one value, ex: [zoom]
+      const getValue = (interpolatedColumn.length > 1) ?  interpolatedColumn[1] : interpolatedColumn[0];
       if (getValue.startsWith('count')) {
         propertySelectorValues.propertyInterpolatedFg = {
           propertyInterpolatedCountOrMetricCtrl: COUNT_OR_METRIC.COUNT,
@@ -536,6 +538,7 @@ export class MapImportService {
     (manualValues || []).forEach(kc =>
       typeFg.colorFg.addToColorManualValuesCtrl(kc));
 
+
     return layerFg;
   }
 
@@ -550,7 +553,6 @@ export class MapImportService {
     values.visibilityStep.featuresMax = layerSource.maxfeatures;
     values.styleStep.geometryType = layer.type === 'symbol' ? 'label' : layer.type;
     values.styleStep.filter = layer.filter;
-
   }
 
   public static importLayerFeaturesMetric(
@@ -597,9 +599,13 @@ export class MapImportService {
     values.geometryStep.rawGeometry = isGeometryTypeRaw ? layerSource.raw_geometry.geometry : null;
     values.geometryStep.clusterSort = isGeometryTypeRaw ? layerSource.raw_geometry.sort : null;
     values.visibilityStep.featuresMin = layerSource.minfeatures;
-    values.styleStep.geometryType = layer.type === 'symbol' ? 'label' : layer.type;
+    // to display the correct geom type when editing a circle-heat layer
+    if(layer.metadata.hiddenProps && layer.metadata.hiddenProps.geomType === GEOMETRY_TYPE.circleHeat) {
+      values.styleStep.geometryType = GEOMETRY_TYPE.circleHeat;
+    } else {
+      values.styleStep.geometryType = layer.type === 'symbol' ? 'label' : layer.type;
+    }
     values.styleStep.filter = layer.filter;
-
   }
 
   public doImport(config: Config, mapConfig: MapConfig) {

diff --git a/src/app/services/main-form-manager/config-map-export-helper.ts b/src/app/services/main-form-manager/config-map-export-helper.ts
@@ -53,6 +53,7 @@ export class ConfigMapExportHelper {
     const fillStrokeLayers = [];
     const scrollableLayers = [];
     const labelLayers = [];
+    console.error('in process config map export');
     const layers: Array<[Layer, LAYER_MODE]> = mapConfigLayers.controls.map((layerFg: MapLayerFormGroup) => {
       const taggableFields = taggableFieldsMap.get(layerFg.customControls.collection.value);
       const layer = this.getLayer(layerFg, colorService, taggableFields);
@@ -169,6 +170,13 @@ export class ConfigMapExportHelper {
       collection,
       collectionDisplayName
     };
+
+    // with this prop we ll be able to restore the good geomType when we ll reload the layer;
+    metadata.hiddenProps = {geomType: ''};
+    if(modeValues.styleStep.geometryType === GEOMETRY_TYPE.circleHeat) {
+      metadata.hiddenProps.geomType = GEOMETRY_TYPE.circleHeat;
+    }
+
     if (modeValues.styleStep.geometryType === GEOMETRY_TYPE.fill.toString()) {
       const fillStroke: FillStroke = {
         color: this.getMapProperty(modeValues.styleStep.strokeColorFg, mode, colorService, taggableFields),
@@ -192,7 +200,7 @@ export class ConfigMapExportHelper {
     const layerSource: LayerSourceConfig = ConfigExportHelper.getLayerSourceConfig(layerFg);
     const layer: Layer = {
       id: layerFg.value.arlasId,
-      type: modeValues.styleStep.geometryType === 'label' ? 'symbol' : modeValues.styleStep.geometryType,
+      type: this.getLayerType(modeValues),
       source: layerSource.source,
       minzoom: modeValues.visibilityStep.zoomMin,
       maxzoom: modeValues.visibilityStep.zoomMax,
@@ -234,6 +242,19 @@ export class ConfigMapExportHelper {
     return layer;
   }
 
+  /**
+   * set the correct layer type before we save it.
+   * @param modeValues
+   */
+  public static getLayerType(modeValues: ModesValues): GEOMETRY_TYPE {
+    /** we change the type of circle heat map  to keep the compatibility with mapbox **/
+    if(modeValues.styleStep.geometryType === GEOMETRY_TYPE.circleHeat){
+      return GEOMETRY_TYPE.circle;
+    }
+
+    return modeValues.styleStep.geometryType === 'label' ? 'symbol' : modeValues.styleStep.geometryType;
+  }
+
   public static getLayerPaint(modeValues, mode, colorService: ArlasColorService, taggableFields?: Set<string>) {
     const paint: Paint = {};
     const color = this.getMapProperty(modeValues.styleStep.colorFg, mode, colorService, taggableFields);
@@ -285,7 +306,7 @@ export class ConfigMapExportHelper {
         break;
       }
       case GEOMETRY_TYPE.circleHeat: {
-
+        paint['circle-stroke-color'] = color;
         paint['circle-opacity'] = opacity;
         paint['circle-color'] = color;
         paint['circle-radius'] = this.getRadPropFromGranularity(modeValues as ModesValues);

diff --git a/src/app/shared/models/circle-heat-map-radius-granularity.ts b/src/app/shared/models/circle-heat-map-radius-granularity.ts
@@ -33,7 +33,7 @@ export const circleHeatMapRadiusGranularity = {
   'medium': [
     0, 50,
     2.999999, 110,
-    3, 30,
+    3, 90,
     5.999999, 180,
     6, 40,
     8.999999, 200,
@@ -48,7 +48,7 @@ export const circleHeatMapRadiusGranularity = {
     0, 30,
     3.999999, 250,
     4, 50,
-    6.999999, 320,
+    6.999999, 300,
     7, 120,
     9.999999, 480,
     10, 120,