REDMINE-ISSUE-12499 | Erreur 403 - Perte de la connexion

src/assets/js/map-util.js

@@ -292,24 +292,23 @@ const mapUtil = {
     // Redraw the layers
     this.addLayers(layers);
   },
-  // eslint-disable-next-line no-unused-vars
+
+  retrieveFeatureColor: function (featureType, properties) {
+    if (featureType && featureType.colors_style && featureType.colors_style.custom_field_name) {
+      const currentValue = properties[featureType.colors_style.custom_field_name];
+      const colorStyle = featureType.colors_style.colors[currentValue];
+      return colorStyle ? colorStyle : featureType.color
+    }
+  },
+
   addVectorTileLayer: function (url, project_slug, featureTypes, form_filters) {
     layerMVT = L.vectorGrid.protobuf(url, {
       vectorTileLayerStyles: {
-        "default": function (properties, zoom) {
-          // console.log(properties);
-
-          let featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
-          let color = featureType.color;
-          if (featureType.colors_style && featureType.colors_style.custom_field_name) {
-            let currentValue = properties[featureType.colors_style.custom_field_name];
-            let colorValue = featureType.colors_style.colors[currentValue];
-            if (colorValue) {
-              color = colorValue;
-            }
+        "default": (properties) => {
+          const featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
+          const color = this.retrieveFeatureColor(featureType, properties)
 
-          }
-          let hiddenStyle = ({
+          const hiddenStyle = ({
             radius: 0,
             fillOpacity: 0.5,
             weight: 0,
@@ -341,21 +340,19 @@ const mapUtil = {
             fill: true,
             color: color,
           });
-
         },
       },
       // subdomains: "0123",
       // key: 'abcdefghi01234567890',
       interactive: true,
-      maxNativeZoom: 14,
+      maxNativeZoom: 18,
       getFeatureId: function (f) {
         return f.properties.id;
       }
     });
-    let self = this;
-    layerMVT.on('click', function (e) {    // The .on method attaches an event handler
-      console.log("click on mvt", e);
-      const popupContent = self._createContentPopup(e.layer, featureTypes, project_slug);
+    layerMVT.on('click', (e) => {    // The .on method attaches an event handler
+      console.log("e", e);
+      const popupContent = this._createContentPopup(e.layer, featureTypes, project_slug);
       L.popup()
         .setContent(popupContent)
         .setLatLng(e.latlng)
@@ -366,16 +363,12 @@ const mapUtil = {
   },
 
   addFeatures: function (features, filter, addToMap = true, featureTypes) {
-    let featureGroup = new L.FeatureGroup();
+    const featureGroup = new L.FeatureGroup();
     features.forEach((feature) => {
-      
-      let featureType = featureTypes.find((x) => x.slug === feature.properties.feature_type.slug);
-      if (!featureType) {
-        featureType = feature.properties.feature_type;
-      }
 
-      let filters = [];
+      const featureType = featureTypes.find((ft) => ft.slug === (feature.properties.feature_type.slug || feature.properties.feature_type));
 
+      let filters = [];
       if (filter) {
         const typeCheck = filter.featureType && feature.properties.feature_type.slug === filter.featureType;
         const statusCheck = filter.featureStatus && feature.properties.status.value === filter.featureStatus;
@@ -384,9 +377,7 @@ const mapUtil = {
       }
 
       if (!filter || !Object.values(filter).some(val => val) || Object.values(filter).some(val => val) && filters.length && filters.every(val => val !== false)) {
-
         const geomJSON = flip(feature.geometry);
-
         const popupContent = this._createContentPopup(feature);
 
         // Look for a custom field
@@ -396,6 +387,7 @@ const mapUtil = {
           customField = Object.keys(feature.properties).filter(el => featureType.customfield_set.map(e => e.name).includes(el));
           customFieldOption = feature.properties[customField[0]];
         }
+        const color = this.retrieveFeatureColor(featureType, feature.properties) || feature.properties.color;
 
         let color;
         if (customFieldOption && featureType.colors_style) {
@@ -412,7 +404,7 @@ const mapUtil = {
           color = featureType.color;
         }
         if (geomJSON.type === 'Point') {
-          if (customFieldOption && featureType.colors_style) {
+          if (customFieldOption && featureType.colors_style && featureType.colors_style.value && featureType.colors_style.value.icons) {
             const iconHTML = `
               <i
                 class="fas fa-${featureType.colors_style.value.icons[customFieldOption]} fa-2x"
@@ -425,7 +417,7 @@ const mapUtil = {
               className: 'myDivIcon',
             });
             L.marker(geomJSON.coordinates, {
-              icon:  customMapIcon,
+              icon: customMapIcon,
               color: color,
               zIndexOffset: 100
             })
@@ -482,9 +474,9 @@ const mapUtil = {
     let feature_url = feature.properties.feature_url;
     if (featureTypes) { // => VectorTile
       feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
-      status = statusList.find((x) => x.value == feature.properties.status).name;
+      status = statusList.find((x) => x.value === feature.properties.status).name;
       date_maj = formatDate(new Date(feature.properties.updated_on));
-      feature_type_url = '/geocontrib/projet/' + project_slug + '/type_signalement/' + feature_type.slug + '/';
+      feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
       feature_url = feature_type_url + 'signalement/' + feature.properties.feature_id + '/';
       //status=feature.properties.status;
     } else {
@@ -519,4 +511,4 @@ const mapUtil = {
   },
 };
 
-export { mapUtil }
\ No newline at end of file
+export { mapUtil }