REDMINE_ISSUE-12870

src/assets/js/map-util.js

@@ -105,9 +105,9 @@ L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
 
     if (err) {
       content = `
-				<h4>${this.options.title}</h4>
-				<p>Données de la couche inaccessibles</p>
-			`;
+        <h4>${this.options.title}</h4>
+        <p>Données de la couche inaccessibles</p>
+      `;
 
       L.popup({ maxWidth: 800 })
         .setLatLng(latlng)
@@ -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) {
@@ -370,7 +368,7 @@ const mapUtil = {
     window.layerMVT = layerMVT;
   },
 
-  addFeatures: function (features, filter, addToMap = true, featureTypes) {
+  addFeatures: function (features, filter, addToMap = true, featureTypes, project_slug) {
     const featureGroup = new L.FeatureGroup();
     features.forEach((feature) => {
       const featureProperties = feature.properties ? feature.properties : feature;
@@ -391,7 +389,7 @@ const mapUtil = {
         filters.length && filters.every(val => val !== false)
       ) {
         const geomJSON = flip(feature.geometry || feature.geom);
-        const popupContent = this._createContentPopup(feature);
+        const popupContent = this._createContentPopup(feature, featureTypes, project_slug);
 
         // Look for a custom field
         let customField;
@@ -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,32 +518,26 @@ 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 feature_url = feature.feature_url;
+    let status = feature.status;
+    let feature_type_url = feature.feature_type_url;
+    let date_maj = feature.updated_on;
     if (feature.properties) {
       status = feature.properties.status;
-      date_maj = feature.properties.updated_on;
+      date_maj = feature.properties.updated_on ? formatDate(new Date(feature.properties.updated_on)) : '<i>indisponible</i>';
       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;
     }
 
-    if (featureTypes) { // => VectorTile
-      feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
+    if (featureTypes && feature.properties) { // => VectorTile
+      feature_type = feature.properties.feature_type_id ?
+        featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id) :
+        featureTypes.find((f_type) => f_type.slug === feature.properties.feature_type); //* geojson
       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 + '/';
+      if (feature_type) 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;
     }
 
@@ -556,27 +551,37 @@ const mapUtil = {
     if (creator) {
       author = creator.full_name
         ? `<div>
-					Auteur : ${creator.first_name} ${creator.last_name}
-				</div>`
+          Auteur : ${creator.first_name} ${creator.last_name}
+        </div>`
         : creator.username ? `<div>Auteur: ${creator.username}</div>` : '';
     }
 
-    const title = feature.properties ? feature.properties.title : feature.title;
+    let title = feature.properties ? feature.properties.title : feature.title;
+    if (feature_url) {
+      title = `<a href="${feature_url}">${title}</a>`;
+    } else {
+      title = `<span>${title|| '<i>indisponible</i>'}</span>`;
+    }
+
+    if (feature_type_url) {
+      `<a href="${feature_type_url}"> ${feature_type.title || '<i>indisponible</i>'} </a>`;
+    }
+
     return `
-					<h4>
-						<a href="${feature_url}">${title}</a>
-					</h4>
-					<div>
-						Statut : ${status}
-					</div>
-					<div>
-						Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
-					</div>
-					<div>
-						Dernière mise à jour : ${date_maj}
-					</div>
-					${author}
-				`;
+          <h4>
+            <${feature_url ? 'a href="' + feature_url + '"' : 'span'}>${title || '<i>indisponible</i>'}</${feature_url ? 'a' : 'span'}>
+          </h4>
+          <div>
+            Statut : ${status || '<i>indisponible</i>'}
+          </div>
+          <div>
+            Type : <${feature_type_url ? 'a href="'+ feature_type_url + '"' : 'span'}> ${feature_type.title || '<i>indisponible</i>'} </${feature_type_url ? 'a' : 'span'}>
+          </div>
+          <div>
+            Dernière mise à jour : ${date_maj || '<i>indisponible</i>'}
+          </div>
+          ${author}
+        `;
   },
 };