feat(nature): distinction arbres régionaux, filtre gestionnaire, tableau compact et essences botaniques

loko/assets/static/assets/asset_symbology.js

@@ -261,6 +261,24 @@
             glyphCodepoint: 'f30b',
             mapImage: 'icon-naturerwiasset',
         },
+        naturetree_regional: {
+            thematic: 'nature',
+            color: '#1d4ed8',
+            iconUrl: '/static/assets/nature_tree_icon_regional.svg?v=20261009a',
+            iconSize: 56,
+            iconClass: 'bi-tree-fill',
+            glyphCodepoint: 'f5e1',
+            mapImage: 'icon-nature-regional',
+        },
+        naturetree_remarkable: {
+            thematic: 'nature',
+            color: '#d97706',
+            iconUrl: '/static/assets/nature_tree_icon_remarkable.svg?v=20261009a',
+            iconSize: 56,
+            iconClass: 'bi-tree-fill',
+            glyphCodepoint: 'f5e1',
+            mapImage: 'icon-nature-remarkable',
+        },
         naturetree: {
             thematic: 'nature',
             color: '#2e7d32',
@@ -578,6 +596,20 @@
         }
 
         // 3. Specific asset_type override
+        if (assetType === 'naturetree' || (thematic === 'nature' && (assetType === 'naturetree' || !assetType))) {
+            const isRemarkable = item.is_remarkable === true || item.is_remarkable === 'true';
+            const isRegional = item.management_type === 'regional' ||
+                (typeof item.managing_authority === 'string' && (item.managing_authority.toLowerCase().includes('région') || item.managing_authority.toLowerCase().includes('mobilité')));
+            if (isRemarkable && ASSET_TYPE_OVERRIDES.naturetree_remarkable) {
+                return Object.assign({}, ASSET_TYPE_OVERRIDES.naturetree_remarkable);
+            }
+            if (isRegional && ASSET_TYPE_OVERRIDES.naturetree_regional) {
+                return Object.assign({}, ASSET_TYPE_OVERRIDES.naturetree_regional);
+            }
+            if (ASSET_TYPE_OVERRIDES.naturetree) {
+                return Object.assign({}, ASSET_TYPE_OVERRIDES.naturetree);
+            }
+        }
         if (assetType === 'naturebench') {
             const isPlanter = (item.asset_sub_type === 'planter') ||
                 ['Bac à fleurs / Jardinière', 'Bloembak', 'Jardinière', 'Bac à fleurs', 'Bac à plantes'].includes(item.model) ||
@@ -625,12 +657,17 @@
 
         const customStyle = options.style ? ` style="${options.style}"` : '';
 
+        const classList = ['asset-symbology-icon-img'];
+        if (options.imgClass) classList.push(options.imgClass);
+        const imgClass = classList.join(' ');
+        const defaultImgStyle = 'width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; vertical-align: middle; display: inline-block;';
+        const finalStyle = options.style ? ` style="${defaultImgStyle} ${options.style}"` : ` style="${defaultImgStyle}"`;
+
         if (symbology.iconUrl) {
-            const imgClass = options.imgClass || 'asset-symbology-icon-img';
             const fallbackUrl = symbology.fallbackUrl || (symbology.iconUrl.includes('.svg') ? symbology.iconUrl.replace(/\.svg(\?.*)?$/, '.png$1') : '');
             const fallbackClass = options.iconClass || symbology.iconClass || 'bi-sign-stop-fill';
             const onerrorAttr = ` onerror="this.onerror=null; ${fallbackUrl ? `if(this.src && this.src.indexOf('.svg') !== -1){ this.src='${fallbackUrl}'; } else {` : ''} this.style.display='none'; if(this.nextElementSibling){ this.nextElementSibling.style.display=''; } ${fallbackUrl ? '}' : ''}"`;
-            return `<img src="${symbology.iconUrl}" alt="" class="${imgClass}"${customStyle}${onerrorAttr}><i class="bi ${fallbackClass}" style="display:none;${options.style || ''}"></i>`;
+            return `<img src="${symbology.iconUrl}" alt="" class="${imgClass}"${finalStyle}${onerrorAttr}><i class="bi ${fallbackClass}" style="display:none;${options.style || ''}"></i>`;
         }
 
         const iconClass = options.iconClass || symbology.iconClass || 'bi-pin-map';
@@ -653,6 +690,8 @@
             publiclighting: injected.publiclighting || THEMATIC_CONFIG.publiclighting.iconUrl,
             publiclightingelectricalcabinet: injected.publiclightingelectricalcabinet || ASSET_TYPE_OVERRIDES.publiclightingelectricalcabinet.iconUrl,
             nature: injected.nature || THEMATIC_CONFIG.nature.iconUrl,
+            natureregional: injected.natureregional || (ASSET_TYPE_OVERRIDES.naturetree_regional && ASSET_TYPE_OVERRIDES.naturetree_regional.iconUrl),
+            natureremarkable: injected.natureremarkable || (ASSET_TYPE_OVERRIDES.naturetree_remarkable && ASSET_TYPE_OVERRIDES.naturetree_remarkable.iconUrl),
             structures: injected.structures || THEMATIC_CONFIG.structures.iconUrl,
             roaddrain: injected.roaddrain || ASSET_TYPE_OVERRIDES.roaddrain.iconUrl,
             roadconcreteblockset: injected.roadconcreteblockset || ASSET_TYPE_OVERRIDES.roadconcreteblockset.iconUrl,
@@ -773,6 +812,11 @@
                 ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
             ], 'icon-natureplanter',
             ['==', ['get', 'asset_type'], 'naturebench'], 'icon-naturebench',
+            ['all', ['==', ['get', 'thematic'], 'nature'], ['==', ['get', 'is_remarkable'], true]], 'icon-nature-remarkable',
+            ['all', ['==', ['get', 'thematic'], 'nature'], ['==', ['get', 'management_type'], 'regional']], 'icon-nature-regional',
+            ['all', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'is_remarkable'], true]], 'icon-nature-remarkable',
+            ['all', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'management_type'], 'regional']], 'icon-nature-regional',
+            ['==', ['get', 'asset_type'], 'naturetree'], 'icon-nature',
             ['==', ['get', 'asset_type'], 'drain'], 'icon-roaddrain',
             ['==', ['get', 'asset_type'], 'roaddrain'], 'icon-roaddrain',
             ['==', ['get', 'category'], 'Ralentisseur'], 'icon-speedbump',

loko/assets/static/assets/nature_tree_icon_regional.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="foliage-reg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#1d4ed8"/>
+    </linearGradient>
+    <linearGradient id="trunk-reg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#64748b"/>
+      <stop offset="100%" stop-color="#334155"/>
+    </linearGradient>
+  </defs>
+
+  <ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-reg)"/>
+  <ellipse cx="40" cy="24" rx="12" ry="10" fill="url(#foliage-reg)"/>
+  <ellipse cx="32" cy="18" rx="13" ry="11" fill="url(#foliage-reg)"/>
+  <ellipse cx="32" cy="29" rx="15" ry="10" fill="url(#foliage-reg)"/>
+
+  <rect x="28" y="30" width="8" height="24" rx="2" fill="url(#trunk-reg)"/>
+  <rect x="25" y="54" width="14" height="5" rx="2" fill="#1e293b"/>
+</svg>

loko/assets/static/assets/nature_tree_icon_remarkable.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" aria-hidden="true">
+  <defs>
+    <linearGradient id="foliage-rem" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="100%" stop-color="#d97706"/>
+    </linearGradient>
+    <linearGradient id="trunk-rem" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#8d6e63"/>
+      <stop offset="100%" stop-color="#5d4037"/>
+    </linearGradient>
+  </defs>
+
+  <ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-rem)"/>
+  <ellipse cx="40" cy="24" rx="12" ry="10" fill="url(#foliage-rem)"/>
+  <ellipse cx="32" cy="18" rx="13" ry="11" fill="url(#foliage-rem)"/>
+  <ellipse cx="32" cy="29" rx="15" ry="10" fill="url(#foliage-rem)"/>
+
+  <rect x="28" y="30" width="8" height="24" rx="2" fill="url(#trunk-rem)"/>
+  <rect x="25" y="54" width="14" height="5" rx="2" fill="#4e342e"/>
+</svg>

loko/assets/static/assets/unified_index.js

@@ -549,7 +549,7 @@ function buildColumns() {
                     const symb = AssetSymbology.getAssetSymbology(row);
                     const colorStyle = symb.color ? `color:${symb.color};` : '';
                     iconPrefix = AssetSymbology.renderIconHtml(symb, {
-                        style: `${colorStyle} font-size: 0.95rem; vertical-align: -1px; margin-right: 5px;`,
+                        style: `${colorStyle} width: 20px; height: 20px; vertical-align: middle; margin-right: 6px;`,
                         imgClass: 'me-1'
                     });
                 }
@@ -1593,6 +1593,11 @@ function buildAssetsGeojsonPostBody(thematicCode, bbox, includeNonGeoFilters) {
         }
     }
     if (thematicCode === 'nature') {
+        if (Array.isArray(thematicFilters.management_type) && thematicFilters.management_type.length) {
+            payload.management_type = thematicFilters.management_type;
+        } else if (thematicFilters.management_type) {
+            payload.management_type = [thematicFilters.management_type];
+        }
         if (thematicFilters.location_type) {
             payload.location_type = thematicFilters.location_type;
         }
@@ -2028,6 +2033,9 @@ function collectClickedAssets(clickEvent) {
             detail_url: p.detail_url || null,
             feature_id: id,
             extra_info: p.plots_count != null ? `${p.plots_count} plot(s)` : (p.bollard_type || ''),
+            management_type: p.management_type || '',
+            managing_authority: p.managing_authority || '',
+            is_remarkable: p.is_remarkable || false,
         });
     });
 
@@ -2729,6 +2737,11 @@ function loadTableData(features) {
             model: p.model || '',
             status: p.status || '',
             detail_url: p.detail_url || null,
+            management_type: p.management_type || '',
+            managing_authority: p.managing_authority || '',
+            is_remarkable: p.is_remarkable || false,
+            scientific_name: p.scientific_name || '',
+            vernacular_name: p.vernacular_name || '',
             lon: p.lon,
             lat: p.lat,
             length: Number.isFinite(length) ? length : 0,

loko/assets/static/assets/unified_map_layers.js

@@ -140,6 +140,16 @@ function loadUnifiedMapIcons(map) {
             .then(data => { if (!map.hasImage('icon-nature')) map.addImage('icon-nature', data); })
             .catch(e => console.warn('unified_map_layers: could not load nature icon', e));
     }
+    if (iconUrls.natureregional && !map.hasImage('icon-nature-regional')) {
+        loadNormalisedIcon(iconUrls.natureregional, 56)
+            .then(data => { if (!map.hasImage('icon-nature-regional')) map.addImage('icon-nature-regional', data); })
+            .catch(e => console.warn('unified_map_layers: could not load nature regional icon', e));
+    }
+    if (iconUrls.natureremarkable && !map.hasImage('icon-nature-remarkable')) {
+        loadNormalisedIcon(iconUrls.natureremarkable, 56)
+            .then(data => { if (!map.hasImage('icon-nature-remarkable')) map.addImage('icon-nature-remarkable', data); })
+            .catch(e => console.warn('unified_map_layers: could not load nature remarkable icon', e));
+    }
 
     // structures: dedicated bridge/tunnel SVG (52 px)
     if (iconUrls.structures && !map.hasImage('icon-structures')) {

loko/assets/templates/assets/unified_index.html

@@ -480,7 +480,7 @@
             text-transform: uppercase !important;
             letter-spacing: 0.04em !important;
             border-bottom: 1.5px solid #e2e8f0 !important;
-            padding: 0.65rem 0.75rem !important;
+            padding: 0.45rem 0.65rem !important;
             vertical-align: middle !important;
             white-space: nowrap !important;
         }
@@ -489,16 +489,28 @@
             padding: 0 !important;
             font-size: 0.74rem !important;
             font-weight: 600 !important;
-            line-height: 1.4 !important;
+            line-height: 1.3 !important;
         }
 
         /* Rows & Cells */
         .bootstrap-table.bootstrap5 #unified-table td {
-            padding: 0.65rem 0.75rem !important;
+            padding: 0.32rem 0.65rem !important;
             vertical-align: middle !important;
-            font-size: 0.83rem !important;
+            font-size: 0.82rem !important;
             color: #334155;
             border-bottom: 1px solid #f1f5f9 !important;
+            line-height: 1.3 !important;
+        }
+
+        .asset-symbology-icon-img {
+            width: 20px !important;
+            height: 20px !important;
+            max-width: 20px !important;
+            max-height: 20px !important;
+            object-fit: contain !important;
+            vertical-align: middle !important;
+            display: inline-block !important;
+            margin-right: 6px !important;
         }
 
         .bootstrap-table.bootstrap5 #unified-table tbody tr {

loko/assets/views/core.py

@@ -753,6 +753,15 @@ def build_conditional_filter_config(accessible_thematics, user=None):
     # Nature
     if 'nature' in accessible_codes:
         config['nature'] = [
+            {
+                'key': 'management_type',
+                'label': _('Gestionnaire'),
+                'type': 'multi',
+                'options': [
+                    {'value': 'municipal', 'label': _('Commune (Watermael-Boitsfort)')},
+                    {'value': 'regional', 'label': _('Région (Bruxelles Mobilité)')},
+                ],
+            },
             {
                 'key': 'location_type',
                 'label': _('Type de localisation'),