diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js index 1d12f0ad6213f67618d5b8ca51a5a7aff3c1093e..1450f3c042e17a420ba85f923b5601cc91102c9f 100644 --- a/src/assets/js/map-util.js +++ b/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", diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js index e00e202415762ef4fab1d7c80656b0863b6f4d1d..0e7e8592e38eb4c0e3713783bf924fa6bd4e51ff 100644 --- a/src/store/modules/feature.js +++ b/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 };