Merge branch 'develop' into redmine-issues/12721

src/assets/js/map-util.js

@@ -289,8 +289,7 @@ const mapUtil = {
       const currentValue = properties[colorsStyle.custom_field_name];
       const colorStyle = colorsStyle.colors[currentValue];
       return colorStyle ? colorStyle : featureType.color;
-    }
-    else{
+    } else {
       return featureType.color;
     }
   },
@@ -301,15 +300,72 @@ const mapUtil = {
       vectorTileLayerStyles: {
         default: (properties) => {
           const featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
+
           const color = this.retrieveFeatureColor(featureType, properties);
+          const colorValue =
+          color.value && color.value.length ?
+            color.value : typeof color === 'string' && color.length ?
+              color : '#000000';
+
+          // Look for a custom field
+          let customField;
+          let customFieldOption;
+          if (
+            featureType.customfield_set &&
+            Object.keys(properties).some(el => featureType.customfield_set.map(e => e.name).includes(el))
+          ) {
+            customField = Object.keys(properties)
+              .filter(el => featureType.customfield_set.map(e => e.name).includes(el));
+            customFieldOption = properties[customField[0]];
+          }
+
+          let defaultStyle;
+          let hiddenStyle;
+
+          if (
+            featureType.colors_style.value.icons[customFieldOption] &&
+            featureType.colors_style.value.icons[customFieldOption] !== 'circle'
+          ) {
+            const iconHTML = `
+              <i
+                class="fas fa-${featureType.colors_style.value.icons[customFieldOption]} fa-lg"
+                style="color: ${colorValue}"
+              ></i>
+            `;
+            const customMapIcon = L.divIcon({
+              html: iconHTML,
+              iconSize: [20, 20],
+              className: 'myDivIcon',
+            });
+
+            defaultStyle = {
+              icon: customMapIcon
+            };
+
+            hiddenStyle = ({
+              icon: customMapIcon
+            });
+
+          } else {
+
+            defaultStyle = {
+              radius: 4,
+              fillOpacity: 0.5,
+              weight: 3,
+              fill: true,
+              color: color,
+            };
+
+            hiddenStyle = ({
+              radius: 0,
+              fillOpacity: 0.5,
+              weight: 0,
+              fill: false,
+              color: featureType.color,
+            });
+
+          }
 
-          const hiddenStyle = ({
-            radius: 0,
-            fillOpacity: 0.5,
-            weight: 0,
-            fill: false,
-            color: featureType.color,
-          });
           // Filtre sur le feature type
           if (form_filters && form_filters.type.selected) {
             if (featureType.title !== form_filters.type.selected) {
@@ -328,13 +384,7 @@ const mapUtil = {
               return hiddenStyle;
             }
           }
-          return ({
-            radius: 4,
-            fillOpacity: 0.5,
-            weight: 3,
-            fill: true,
-            color: color,
-          });
+          return defaultStyle;
         },
       },
       // subdomains: "0123",

src/store/modules/feature.js

@@ -259,7 +259,7 @@ const feature = {
             }
             let updateMsg = {
               project: rootState.project_slug,
-              type: 'put',
+              type: routeName === "editer-signalement" ? "put" : "post",
               featureId: state.form.feature_id,
               geojson: geojson
             };