fix overide color for offline features, fixing popup status

src/assets/js/map-util.js

@@ -156,15 +156,14 @@ const mapUtil = {
       zoom,
       zoomControl = true,
     } = options;
-
     map = L.map(el, {
       maxZoom: 18,
       minZoom: 1,
       zoomControl: false,
     }).setView(
       [
-        !lat ? mapDefaultViewCenter[0] : lat,
-        !lng ? mapDefaultViewCenter[1] : lng,
+        lat ? lat : mapDefaultViewCenter[0],
+        lng ? lng : mapDefaultViewCenter[1],
       ],
       !zoom ? mapDefaultViewZoom : zoom
     );
@@ -295,9 +294,8 @@ const mapUtil = {
       const currentValue = properties[colorsStyle.custom_field_name];
       const colorStyle = colorsStyle.colors[currentValue];
       return colorStyle ? colorStyle : featureType.color;
-    } else {
-      return featureType.color;
     }
+    return featureType.color;
   },
 
   addVectorTileLayer: function (url, project_slug, featureTypes, form_filters) {
@@ -404,14 +402,16 @@ const mapUtil = {
             .filter(el => featureType.customfield_set.map(e => e.name).includes(el));
           customFieldOption = featureProperties[customField[0]];
         }
-        let color = this.retrieveFeatureColor(featureType, featureProperties) || featureProperties.color;
-        if (color == undefined){
-          color = featureType.color;
+        let color = '#000000';
+        if (feature.overideColor) {
+          color = feature.overideColor;
+        } else {
+          color = this.retrieveFeatureColor(featureType, featureProperties) || featureProperties.color;
+          if (color.value && color.value.length) {
+            color = color.value;
+          }
         }
-        const colorValue =
-          color.value && color.value.length ?
-            color.value : typeof color === 'string' && color.length ?
-              color : '#000000';
+
         if (geomJSON.type === 'Point') {
           if (
             customFieldOption &&
@@ -427,7 +427,7 @@ const mapUtil = {
               const iconHTML = `
                 <i
                   class="fas fa-${featureType.colors_style.value.icons[customFieldOption]} fa-lg"
-                  style="color: ${colorValue}"
+                  style="color: ${color}"
                 ></i>
               `;
               const customMapIcon = L.divIcon({
@@ -437,14 +437,14 @@ const mapUtil = {
               });
               L.marker(geomJSON.coordinates, {
                 icon: customMapIcon,
-                color: colorValue,
+                color: color,
                 zIndexOffset: 100
               })
                 .bindPopup(popupContent)
                 .addTo(featureGroup);
             } else {
               L.circleMarker(geomJSON.coordinates, {
-                color: colorValue,
+                color: color,
                 radius: 4,
                 fillOpacity: 0.5,
                 weight: 3,
@@ -457,7 +457,7 @@ const mapUtil = {
               const iconHTML = `
                 <i
                   class="fas fa-${featureType.icon} fa-lg"
-                  style="color: ${colorValue}"
+                  style="color: ${color}"
                 ></i>
               `;
               const customMapIcon = L.divIcon({
@@ -467,7 +467,7 @@ const mapUtil = {
               });
               L.marker(geomJSON.coordinates, {
                 icon: customMapIcon,
-                color: colorValue,
+                color: color,
                 zIndexOffset: 100
               })
                 .bindPopup(popupContent)
@@ -485,14 +485,14 @@ const mapUtil = {
           }
         } else if (geomJSON.type === 'LineString') {
           L.polyline(geomJSON.coordinates, {
-            color: colorValue,
+            color: color,
             weight: 3,
           })
             .bindPopup(popupContent)
             .addTo(featureGroup);
         } else if (geomJSON.type === 'Polygon') {
           L.polygon(geomJSON.coordinates, {
-            color: colorValue,
+            color: color,
             weight: 3,
             fillOpacity: 0.5,
           })
@@ -501,6 +501,7 @@ const mapUtil = {
         }
       }
     });
+
     if (map && addToMap) {
       map.addLayer(featureGroup);
     }
@@ -517,23 +518,21 @@ const mapUtil = {
         ('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
       return formatted_date;
     };
-    let feature_type;
-    let status;
-    let date_maj;
-    let feature_type_url;
-    let feature_url;
-
+    let feature_type = feature.properties ? feature.properties.feature_type : feature.feature_type;
+    let status = feature.status;
+    let date_maj = feature.updated_on;
+    let feature_type_url = feature.feature_type_url;
+    let feature_url = feature.feature_url;
     if (feature.properties) {
       status = feature.properties.status;
       date_maj = feature.properties.updated_on;
       feature_type_url = feature.properties.feature_type_url;
       feature_url = feature.properties.feature_url;
-    } else {
-      status = feature.status;
-      date_maj = feature.updated_on;
-      feature_type_url =feature.feature_type_url;
-      feature_url = feature.feature_url;
     }
+    console.log(status,
+      date_maj,
+      feature_type_url,
+      feature_url);
 
     if (featureTypes) { // => VectorTile
       feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
@@ -542,10 +541,9 @@ const mapUtil = {
       feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
       feature_url = feature_type_url + 'signalement/' + feature.properties.feature_id + '/';
     } else {
-      feature_type = feature.properties ? feature.properties.feature_type : feature.feature_type;
       status = feature.properties ? feature.properties.status.label : feature.status.label;
     }
-
+    
     //* adapt link url for shared-project restricted navigation
     if (window.location.pathname.includes('projet-partage')) {
       feature_url = feature_url.replace('projet', 'projet-partage');

src/views/feature/Feature_edit.vue

@@ -987,6 +987,10 @@ export default {
             const allFeaturesExceptCurrent = features.filter(
               (feat) => feat.id !== currentFeatureId
             );
+            console.log(allFeaturesExceptCurrent);
+            console.log(allFeaturesExceptCurrent[0].geometry);
+            console.log(allFeaturesExceptCurrent[0].geometry.coordinates);
+            console.log(allFeaturesExceptCurrent[0].geometry.coordinates[0]);
             mapUtil.addFeatures(
               allFeaturesExceptCurrent,
               {},

src/views/project/Project_detail.vue

@@ -1199,29 +1199,17 @@ export default {
           this.$store.state.feature_type.feature_types
         );
         this.mapLoading = false;
-        this.arraysOffline.forEach((x) => (x.geojson.properties.color = 'red'));
-        const featuresOffline = this.arraysOffline.map((x) => x.geojson);
-
-        /*  this.GET_PROJECT_FEATURES({
-          project_slug: this.slug,
-          ordering: '-created_on',
-          limit: null,
-          geojson: true,
-        })
-          .then(() => { */
-        console.log(featuresOffline);
+        const featuresOffline = this.arraysOffline.map((x) => {
+          return { ...x.geojson, overideColor: '#ff0000' }; //* red (hex format is better for perf)
+        });
+        console.log('featuresOffline', featuresOffline);
         this.featuresLoading = false;
         mapUtil.addFeatures(
           featuresOffline,
           {},
           true,
-          this.$store.state.feature_type.feature_types
+          this.$store.state.feature_type.feature_types,
         );
-        /*  })
-          .catch((err) => {
-            console.error(err);
-            this.featuresLoading = false;
-          }); */
 
         featureAPI.getFeaturesBbox(this.slug).then((bbox) => {
           if (bbox) {
@@ -1252,7 +1240,7 @@ export default {
   margin-right: 5px;
   height: 25px;
   vertical-align: bottom;
-  }
+}
 .feature-type-container {
   display: flex;
   justify-content: space-between;