style(nature): adapter la taille des cercles d'arbres selon le niveau de zoom

- Réduction de l'échelle des cercles d'arbres sur la carte unifiée (diamètre de ~2px à ~18px)
- Suppression des chevauchements d'arbres alignés aux zooms de rue (z15-z17)
- Centrage des cercles sur leurs coordonnées GPS (anchor: center, offset: [0, 0])
- Harmonisation des rayons sur les vues détails et index nature
This commit is contained in:
kdeterme 2026-10-12 13:16:24 +02:00
parent 31d6951f42
commit 5a48dc4d2f
5 changed files with 27 additions and 20 deletions

View file

@ -197,9 +197,13 @@ document.addEventListener('DOMContentLoaded', function () {
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
13, 4, 8, 1.5,
16, 7, 11, 2.5,
19, 12 13, 3.5,
15, 5,
17, 6.5,
19, 8.5,
22, 11
], ],
'circle-color': [ 'circle-color': [
'case', 'case',

View file

@ -693,7 +693,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.07, ], 0.07,
['==', ['get', 'asset_type'], 'naturetree'], 0.08, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.04,
0.28 0.28
], ],
11, [ 11, [
@ -729,7 +729,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.12, ], 0.12,
['==', ['get', 'asset_type'], 'naturetree'], 0.14, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.07,
0.40 0.40
], ],
13, [ 13, [
@ -765,7 +765,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.19, ], 0.19,
['==', ['get', 'asset_type'], 'naturetree'], 0.22, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.10,
0.52 0.52
], ],
15, [ 15, [
@ -801,7 +801,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.34, ], 0.34,
['==', ['get', 'asset_type'], 'naturetree'], 0.38, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.15,
0.66 0.66
], ],
17, [ 17, [
@ -837,7 +837,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.55, ], 0.55,
['==', ['get', 'asset_type'], 'naturetree'], 0.62, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.22,
0.82 0.82
], ],
19, [ 19, [
@ -873,7 +873,7 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 0.80, ], 0.80,
['==', ['get', 'asset_type'], 'naturetree'], 0.85, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.28,
0.98 0.98
], ],
22, [ 22, [
@ -909,27 +909,27 @@ const _unified_assets_symbol = {
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'], ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BAC'],
['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC'] ['==', ['slice', ['get', 'code'], 0, 7], 'CSE-BNC']
], 1.05, ], 1.05,
['==', ['get', 'asset_type'], 'naturetree'], 1.10, ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 0.36,
1.15 1.15
] ]
], ],
'icon-anchor': [ 'icon-anchor': [
'case', 'case',
['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], 'center',
['==', ['get', 'thematic'], 'publiclighting'], 'bottom', ['==', ['get', 'thematic'], 'publiclighting'], 'bottom',
['==', ['get', 'thematic'], 'trafficlights'], 'bottom', ['==', ['get', 'thematic'], 'trafficlights'], 'bottom',
['==', ['get', 'thematic'], 'nature'], 'bottom',
['==', ['get', 'asset_type'], 'itsbollardplot'], 'bottom', ['==', ['get', 'asset_type'], 'itsbollardplot'], 'bottom',
'center' 'center'
], ],
'icon-offset': [ 'icon-offset': [
'case', 'case',
['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], ['literal', [0, 0]],
['==', ['get', 'thematic'], 'publiclighting'], ['literal', [0, -2]], ['==', ['get', 'thematic'], 'publiclighting'], ['literal', [0, -2]],
['==', ['get', 'thematic'], 'trafficlights'], [ ['==', ['get', 'thematic'], 'trafficlights'], [
'case', 'case',
['all', ['==', ['get', 'asset_type'], 'trafficlightradar'], ['coalesce', ['get', 'has_support'], false]], ['literal', [0, -25]], ['all', ['==', ['get', 'asset_type'], 'trafficlightradar'], ['coalesce', ['get', 'has_support'], false]], ['literal', [0, -25]],
['literal', [0, 0]] ['literal', [0, 0]]
], ],
['==', ['get', 'thematic'], 'nature'], ['literal', [0, 5]],
['literal', [0, 0]] ['literal', [0, 0]]
], ],
'icon-allow-overlap': true, 'icon-allow-overlap': true,

View file

@ -169,10 +169,13 @@
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 2, 8, 1.5,
12, 3, 11, 2.5,
16, 5, 13, 3.5,
20, 8 15, 5,
17, 6.5,
19, 8.5,
22, 11
], ],
'circle-color': [ 'circle-color': [
'case', 'case',

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' %}?v=20261012_circle"></script> <script src="{% static 'assets/nature_location_detail.js' %}?v=20261012_tree_scale"></script>
{% endblock script %} {% endblock script %}

View file

@ -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=20261012_circle"></script> <script src="{% static 'assets/asset_symbology.js' %}?v=20261012_tree_scale"></script>
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_circle"></script> <script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_tree_scale"></script>
<script src="{% static 'assets/unified_index.js' %}?v=20261012_circle"></script> <script src="{% static 'assets/unified_index.js' %}?v=20261012_tree_scale"></script>
{% endblock script %} {% endblock script %}