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

style(nature): modifier la symbologie cartographique des arbres en cercles à bordure brune

Browse source
This commit is contained in:
kdeterme 2026-10-12 12:50:32 +02:00
parent ee73aa3912
commit e32dcf555a
12 changed files with 51 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,7 +34,7 @@
color: '#2e7d32', // vert — green spaces
iconClass: 'bi-tree-fill',
glyphCodepoint: 'f5e1',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20260521a',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20261012_circle',
iconSize: 56,
mapImage: 'icon-nature',
},
@ -264,7 +264,7 @@
naturetree_regional: {
thematic: 'nature',
color: '#1d4ed8',
iconUrl: '/static/assets/nature_tree_icon_regional.svg?v=20261009_round',
iconUrl: '/static/assets/nature_tree_icon_regional.svg?v=20261012_circle',
iconSize: 56,
iconClass: 'bi-tree',
glyphCodepoint: 'f5e1',
@ -273,7 +273,7 @@
naturetree_remarkable: {
thematic: 'nature',
color: '#d97706',
iconUrl: '/static/assets/nature_tree_icon_remarkable.svg?v=20261009_round',
iconUrl: '/static/assets/nature_tree_icon_remarkable.svg?v=20261012_circle',
iconSize: 56,
iconClass: 'bi-tree',
glyphCodepoint: 'f5e1',
@ -282,7 +282,7 @@
naturetree_dead: {
thematic: 'nature',
color: '#6b7280',
iconUrl: '/static/assets/nature_tree_icon_dead.svg?v=20261009_round',
iconUrl: '/static/assets/nature_tree_icon_dead.svg?v=20261012_circle',
iconSize: 56,
iconClass: 'bi-tree',
glyphCodepoint: 'f5e1',
@ -291,7 +291,7 @@
naturetree: {
thematic: 'nature',
color: '#2e7d32',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20261009_round',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20261012_circle',
iconSize: 56,
iconClass: 'bi-tree-fill',
glyphCodepoint: 'f5e1',
@ -309,7 +309,7 @@
natureshrub: {
thematic: 'nature',
color: '#2e7d32',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20260521a',
iconUrl: '/static/assets/nature_tree_icon.svg?v=20261012_circle',
iconSize: 56,
iconClass: 'bi-tree-fill',
glyphCodepoint: 'f5e1',

18
loko/assets/static/assets/nature_location_detail.js
View file

@ -201,9 +201,23 @@ document.addEventListener('DOMContentLoaded', function () {
16, 7,
19, 12
],
'circle-color': '#15803d',
'circle-color': [
'case',
['any',
['==', ['get', 'is_dead'], true],
['==', ['get', 'is_dead'], 'true'],
['==', ['get', 'is_dead'], 1],
['==', ['get', 'status'], 'Mort'],
['==', ['get', 'status'], 'dead'],
['==', ['get', 'vitality'], 'Mort'],
['==', ['get', 'vitality'], 'dead']
], '#6b7280',
['any', ['==', ['get', 'is_remarkable'], true], ['==', ['get', 'is_remarkable'], 'true'], ['==', ['get', 'is_remarkable'], 1]], '#d97706',
['any', ['==', ['get', 'management_type'], 'regional'], ['==', ['get', 'management_type'], 'Régional']], '#1d4ed8',
'#2e7d32'
],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
'circle-stroke-color': '#5d4037'
}
});

12
loko/assets/static/assets/nature_tree_icon.svg
View file

@ -4,17 +4,7 @@
<stop offset="0%" stop-color="#66bb6a"/>
<stop offset="100%" stop-color="#388e3c"/>
</linearGradient>
<linearGradient id="trunk" 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)"/>
<ellipse cx="40" cy="24" rx="12" ry="10" fill="url(#foliage)"/>
<ellipse cx="32" cy="18" rx="13" ry="11" fill="url(#foliage)"/>
<ellipse cx="32" cy="29" rx="15" ry="10" fill="url(#foliage)"/>
<rect x="28" y="30" width="8" height="24" rx="2" fill="url(#trunk)"/>
<rect x="25" y="54" width="14" height="5" rx="2" fill="#4e342e"/>
<circle cx="32" cy="32" r="26" fill="url(#foliage)" stroke="#5d4037" stroke-width="6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 893 B

After

Width:  |  Height:  |  Size: 400 B

12
loko/assets/static/assets/nature_tree_icon_dead.svg
View file

@ -4,17 +4,7 @@
<stop offset="0%" stop-color="#9ca3af"/>
<stop offset="100%" stop-color="#4b5563"/>
</linearGradient>
<linearGradient id="trunk-dead" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#78716c"/>
<stop offset="100%" stop-color="#57534e"/>
</linearGradient>
</defs>
<ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-dead)"/>
<ellipse cx="40" cy="24" rx="12" ry="10" fill="url(#foliage-dead)"/>
<ellipse cx="32" cy="18" rx="13" ry="11" fill="url(#foliage-dead)"/>
<ellipse cx="32" cy="29" rx="15" ry="10" fill="url(#foliage-dead)"/>
<rect x="28" y="30" width="8" height="24" rx="2" fill="url(#trunk-dead)"/>
<rect x="25" y="54" width="14" height="5" rx="2" fill="#44403c"/>
<circle cx="32" cy="32" r="26" fill="url(#foliage-dead)" stroke="#5d4037" stroke-width="6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 410 B

12
loko/assets/static/assets/nature_tree_icon_regional.svg
View file

@ -4,17 +4,7 @@
<stop offset="0%" stop-color="#60a5fa"/>
<stop offset="100%" stop-color="#1d4ed8"/>
</linearGradient>
<linearGradient id="trunk" 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-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)"/>
<rect x="25" y="54" width="14" height="5" rx="2" fill="#4e342e"/>
<circle cx="32" cy="32" r="26" fill="url(#foliage-reg)" stroke="#5d4037" stroke-width="6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 913 B

After

Width:  |  Height:  |  Size: 408 B

12
loko/assets/static/assets/nature_tree_icon_remarkable.svg
View file

@ -4,17 +4,7 @@
<stop offset="0%" stop-color="#fbbf24"/>
<stop offset="100%" stop-color="#d97706"/>
</linearGradient>
<linearGradient id="trunk" 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)"/>
<rect x="25" y="54" width="14" height="5" rx="2" fill="#4e342e"/>
<circle cx="32" cy="32" r="26" fill="url(#foliage-rem)" stroke="#5d4037" stroke-width="6"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 913 B

After

Width:  |  Height:  |  Size: 408 B

22
loko/assets/templates/assets/nature_index.html
View file

@ -176,23 +176,27 @@
],
'circle-color': [
'case',
['==', ['get', 'management_type'], 'regional'], '#1E3A8A',
['boolean', ['get', 'is_remarkable'], false], '#F59E0B',
['coalesce', ['get', 'color'], '#15803D']
['any',
['==', ['get', 'is_dead'], true],
['==', ['get', 'is_dead'], 'true'],
['==', ['get', 'is_dead'], 1],
['==', ['get', 'status'], 'dead'],
['==', ['get', 'status'], 'archived'],
['==', ['get', 'vitality'], 'dead']
], '#6b7280',
['any', ['==', ['get', 'is_remarkable'], true], ['==', ['get', 'is_remarkable'], 'true'], ['==', ['get', 'is_remarkable'], 1]], '#d97706',
['any', ['==', ['get', 'management_type'], 'regional'], ['==', ['get', 'management_type'], 'Régional']], '#1d4ed8',
['coalesce', ['get', 'color'], '#2e7d32']
],
'circle-stroke-width': [
'case',
['boolean', ['feature-state', 'highlighted'], false], 2.5,
['==', ['get', 'management_type'], 'regional'], 1.5,
['boolean', ['get', 'is_remarkable'], false], 2,
1
1.5
],
'circle-stroke-color': [
'case',
['boolean', ['feature-state', 'highlighted'], false], '#EF4444',
['==', ['get', 'management_type'], 'regional'], '#93C5FD',
['boolean', ['get', 'is_remarkable'], false], '#FEF08A',
'#064E3B'
'#5d4037'
],
'circle-opacity': 0.8
},

2
loko/assets/templates/assets/nature_locations_detail.html
View file

@ -701,5 +701,5 @@
</script>
<script src="{% static 'common/turf.min.js' %}"></script>
<script src="{% static 'common/layer-switcher-control.js' %}"></script>
<script src="{% static 'assets/nature_location_detail.js' %}"></script>
<script src="{% static 'assets/nature_location_detail.js' %}?v=20261012_circle"></script>
{% endblock script %}

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

@ -1505,10 +1505,10 @@
trafficlightelectricalcabinet: "{% static 'assets/electrical-panel.png' %}",
publiclighting: "{% static 'assets/public_lamp_post_icon.svg' %}?v=20260521c",
publiclightingelectricalcabinet: "{% static 'assets/electrical-panel.png' %}",
nature: "{% static 'assets/nature_tree_icon.svg' %}?v=20261009_round",
natureregional: "{% static 'assets/nature_tree_icon_regional.svg' %}?v=20261009_round",
natureremarkable: "{% static 'assets/nature_tree_icon_remarkable.svg' %}?v=20261009_round",
naturedead: "{% static 'assets/nature_tree_icon_dead.svg' %}?v=20261009_round",
nature: "{% static 'assets/nature_tree_icon.svg' %}?v=20261012_circle",
natureregional: "{% static 'assets/nature_tree_icon_regional.svg' %}?v=20261012_circle",
natureremarkable: "{% static 'assets/nature_tree_icon_remarkable.svg' %}?v=20261012_circle",
naturedead: "{% static 'assets/nature_tree_icon_dead.svg' %}?v=20261012_circle",
naturegreensurface: "{% static 'assets/nature_greensurface_icon.svg' %}?v=20261010a",
structures: "{% static 'assets/structures_bridge_tunnel_icon.svg' %}?v=20260522b",
roaddrain: "{% static 'assets/roaddrain_grille_icon.svg' %}?v=20260521a",
@ -1526,7 +1526,7 @@
<script src="{% static 'common/base_script.js' %}"></script>
<script src="{% static 'common/base_map.js' %}"></script>
<script src="{% static 'assets/sign_panels_shared.js' %}?v=20260703c"></script>
<script src="{% static 'assets/asset_symbology.js' %}?v=20261010_greensurface"></script>
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261010_greensurface"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261010_greensurface"></script>
<script src="{% static 'assets/asset_symbology.js' %}?v=20261012_circle"></script>
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_circle"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261012_circle"></script>
{% endblock script %}

2
loko/assets/views/nature.py
View file

@ -233,6 +233,8 @@ def nature_locations_detail(request, location_id):
"height": f"{tree.height} m" if tree.height else '',
"status": tree.get_status_display(),
"is_remarkable": tree.is_remarkable,
"management_type": tree.management_type or '',
"is_dead": (tree.vitality == 'dead' or tree.status == 'dead' or tree.status == 'archived'),
"lon": tree.lon,
"lat": tree.lat,
"detail_url": reverse('assets:nature_assets_detail', kwargs={'asset_model': 'naturetree', 'asset_id': tree.id}),

2
loko/mobile/templates/mobile/assets/assets_index_mobile.html
View file

@ -1134,7 +1134,7 @@
{% endblock content %}
{% block extra_scripts %}
<script src="{% static 'assets/asset_symbology.js' %}?v=20261010_greensurface"></script>
<script src="{% static 'assets/asset_symbology.js' %}?v=20261012_circle"></script>
<script>
(function() {
'use strict';

2
loko/mobile/templates/mobile/green_surfaces_edit_v2.html
View file

@ -1190,7 +1190,7 @@
17, 0.5,
19, 0.75
],
'circle-stroke-color': '#222222'
'circle-stroke-color': '#5d4037'
}
});