diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js index b89c5a07dcc1d1ed39225ad038c1870d03ab3b36..ff7ea76d6842084ec1a1e738ddc5f419a12616f8 100644 --- a/src/assets/js/map-util.js +++ b/src/assets/js/map-util.js @@ -298,8 +298,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; } }, @@ -310,15 +309,64 @@ 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 hiddenStyle = ({ - radius: 0, - fillOpacity: 0.5, - weight: 0, - fill: false, - color: featureType.color, - }) + const color = this.retrieveFeatureColor(featureType, properties); + + // 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, + }); + + } + // Filtre sur le feature type if (form_filters && form_filters.type.selected) { if (featureType.title !== form_filters.type.selected) { @@ -337,13 +385,7 @@ const mapUtil = { return hiddenStyle; } } - return ({ - radius: 4, - fillOpacity: 0.5, - weight: 3, - fill: true, - color: color, - }); + return defaultStyle; }, }, // subdomains: "0123",