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: {
'circle-radius': [
'interpolate', ['linear'], ['zoom'],
13, 4,
16, 7,
19, 12
8, 1.5,
11, 2.5,
13, 3.5,
15, 5,
17, 6.5,
19, 8.5,
22, 11
],
'circle-color': [
'case',

View file

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

View file

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

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

View file

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