Valogeo/loko
Valogeo/loko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
kdeterme 2026-10-09 13:32:09 +02:00
parent 4823d55f08
commit 587f4abf8a
7 changed files with 135 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
loko/assets/static/assets/asset_symbology.js
View file

@ -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',

20
loko/assets/static/assets/nature_tree_icon_regional.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 921 B

20
loko/assets/static/assets/nature_tree_icon_remarkable.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 921 B

15
loko/assets/static/assets/unified_index.js
View file

@ -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,

10
loko/assets/static/assets/unified_map_layers.js
View file

@ -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')) {

20
loko/assets/templates/assets/unified_index.html
View file

@ -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 {

9
loko/assets/views/core.py
View file

@ -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'),