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

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

@ -201,9 +201,23 @@ document.addEventListener('DOMContentLoaded', function () {
16, 7, 16, 7,
19, 12 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-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="0%" stop-color="#66bb6a"/>
<stop offset="100%" stop-color="#388e3c"/> <stop offset="100%" stop-color="#388e3c"/>
</linearGradient> </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> </defs>
<ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage)"/> <circle cx="32" cy="32" r="26" fill="url(#foliage)" stroke="#5d4037" stroke-width="6"/>
<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"/>
</svg> </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="0%" stop-color="#9ca3af"/>
<stop offset="100%" stop-color="#4b5563"/> <stop offset="100%" stop-color="#4b5563"/>
</linearGradient> </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> </defs>
<ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-dead)"/> <circle cx="32" cy="32" r="26" fill="url(#foliage-dead)" stroke="#5d4037" stroke-width="6"/>
<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"/>
</svg> </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="0%" stop-color="#60a5fa"/>
<stop offset="100%" stop-color="#1d4ed8"/> <stop offset="100%" stop-color="#1d4ed8"/>
</linearGradient> </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> </defs>
<ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-reg)"/> <circle cx="32" cy="32" r="26" fill="url(#foliage-reg)" stroke="#5d4037" stroke-width="6"/>
<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"/>
</svg> </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="0%" stop-color="#fbbf24"/>
<stop offset="100%" stop-color="#d97706"/> <stop offset="100%" stop-color="#d97706"/>
</linearGradient> </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> </defs>
<ellipse cx="24" cy="24" rx="12" ry="10" fill="url(#foliage-rem)"/> <circle cx="32" cy="32" r="26" fill="url(#foliage-rem)" stroke="#5d4037" stroke-width="6"/>
<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"/>
</svg> </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': [ 'circle-color': [
'case', 'case',
['==', ['get', 'management_type'], 'regional'], '#1E3A8A', ['any',
['boolean', ['get', 'is_remarkable'], false], '#F59E0B', ['==', ['get', 'is_dead'], true],
['coalesce', ['get', 'color'], '#15803D'] ['==', ['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': [ 'circle-stroke-width': [
'case', 'case',
['boolean', ['feature-state', 'highlighted'], false], 2.5, ['boolean', ['feature-state', 'highlighted'], false], 2.5,
['==', ['get', 'management_type'], 'regional'], 1.5, 1.5
['boolean', ['get', 'is_remarkable'], false], 2,
1
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['boolean', ['feature-state', 'highlighted'], false], '#EF4444', ['boolean', ['feature-state', 'highlighted'], false], '#EF4444',
['==', ['get', 'management_type'], 'regional'], '#93C5FD', '#5d4037'
['boolean', ['get', 'is_remarkable'], false], '#FEF08A',
'#064E3B'
], ],
'circle-opacity': 0.8 'circle-opacity': 0.8
}, },

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

@ -701,5 +701,5 @@
</script> </script>
<script src="{% static 'common/turf.min.js' %}"></script> <script src="{% static 'common/turf.min.js' %}"></script>
<script src="{% static 'common/layer-switcher-control.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 %} {% endblock script %}

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

@ -1505,10 +1505,10 @@
trafficlightelectricalcabinet: "{% static 'assets/electrical-panel.png' %}", trafficlightelectricalcabinet: "{% static 'assets/electrical-panel.png' %}",
publiclighting: "{% static 'assets/public_lamp_post_icon.svg' %}?v=20260521c", publiclighting: "{% static 'assets/public_lamp_post_icon.svg' %}?v=20260521c",
publiclightingelectricalcabinet: "{% static 'assets/electrical-panel.png' %}", publiclightingelectricalcabinet: "{% static 'assets/electrical-panel.png' %}",
nature: "{% static 'assets/nature_tree_icon.svg' %}?v=20261009_round", nature: "{% static 'assets/nature_tree_icon.svg' %}?v=20261012_circle",
natureregional: "{% static 'assets/nature_tree_icon_regional.svg' %}?v=20261009_round", natureregional: "{% static 'assets/nature_tree_icon_regional.svg' %}?v=20261012_circle",
natureremarkable: "{% static 'assets/nature_tree_icon_remarkable.svg' %}?v=20261009_round", natureremarkable: "{% static 'assets/nature_tree_icon_remarkable.svg' %}?v=20261012_circle",
naturedead: "{% static 'assets/nature_tree_icon_dead.svg' %}?v=20261009_round", naturedead: "{% static 'assets/nature_tree_icon_dead.svg' %}?v=20261012_circle",
naturegreensurface: "{% static 'assets/nature_greensurface_icon.svg' %}?v=20261010a", naturegreensurface: "{% static 'assets/nature_greensurface_icon.svg' %}?v=20261010a",
structures: "{% static 'assets/structures_bridge_tunnel_icon.svg' %}?v=20260522b", structures: "{% static 'assets/structures_bridge_tunnel_icon.svg' %}?v=20260522b",
roaddrain: "{% static 'assets/roaddrain_grille_icon.svg' %}?v=20260521a", 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_script.js' %}"></script>
<script src="{% static 'common/base_map.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/sign_panels_shared.js' %}?v=20260703c"></script>
<script src="{% static 'assets/asset_symbology.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=20261010_greensurface"></script> <script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_circle"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261010_greensurface"></script> <script src="{% static 'assets/unified_index.js' %}?v=20261012_circle"></script>
{% endblock 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 '', "height": f"{tree.height} m" if tree.height else '',
"status": tree.get_status_display(), "status": tree.get_status_display(),
"is_remarkable": tree.is_remarkable, "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, "lon": tree.lon,
"lat": tree.lat, "lat": tree.lat,
"detail_url": reverse('assets:nature_assets_detail', kwargs={'asset_model': 'naturetree', 'asset_id': tree.id}), "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 %} {% endblock content %}
{% block extra_scripts %} {% 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> <script>
(function() { (function() {
'use strict'; 'use strict';

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

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