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

style: update map layer symbology and styling for selected and highlighted states

Browse source
This commit is contained in:
kdeterme 2026-10-12 15:54:44 +02:00
parent 28eebb0300
commit 8cc5979c2e
3 changed files with 125 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1082,55 +1082,63 @@
isNatureExpr, isNatureExpr,
[ [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 4, 8, 8,
11, 6, 11, 13,
13, 8, 13, 17,
15, 11, 15, 23,
17, 14, 17, 30,
19, 17, 19, 38,
22, 21 22, 48
], ],
[ [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 8, 8, 10,
11, 12, 11, 15,
13, 15, 13, 20,
15, 18, 15, 26,
17, 22, 17, 34,
19, 26, 19, 44,
22, 32 22, 56
] ]
], ],
0 0
], ],
'circle-color': [ 'circle-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
'#fef08a', '#ffd600',
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent' 'transparent'
], ],
'circle-opacity': [ 'circle-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
0.95,
['boolean', ['feature-state', 'highlighted'], false],
0.85, 0.85,
0 0
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
'#ca8a04', '#78350f',
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent' 'transparent'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
2.5, 4.5,
['boolean', ['feature-state', 'highlighted'], false],
3,
0 0
], ],
'circle-stroke-opacity': [ 'circle-stroke-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
0.95, 1.0,
0 0
], ],
}, },

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

@ -557,15 +557,25 @@ const _unified_locations_circle = {
], // ne pas rendre de cercles aux vertex des polygones ni aux radars ], // ne pas rendre de cercles aux vertex des polygones ni aux radars
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'interpolate', ['linear'], ['zoom'], 'case',
7, 2, ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
14, 5, [
19, 10 'interpolate', ['linear'], ['zoom'],
7, 5,
14, 10,
19, 18
],
[
'interpolate', ['linear'], ['zoom'],
7, 2,
14, 5,
19, 10
]
], ],
// Colour by building usage_type or intersection status // Colour by building usage_type or intersection status
'circle-color': [ 'circle-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffeb3b', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffd600',
['any', ['==', ['get', 'thematic'], 'publicbuildings'], ['==', ['get', 'thematic'], 'buildings']], ['any', ['==', ['get', 'thematic'], 'publicbuildings'], ['==', ['get', 'thematic'], 'buildings']],
[ [
'match', 'match',
@ -593,12 +603,12 @@ const _unified_locations_circle = {
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffeb3b', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#78350f',
'#ffffff' '#ffffff'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 3, ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 4,
1.5 1.5
], ],
'circle-opacity': 0.85, 'circle-opacity': 0.85,
@ -1003,23 +1013,38 @@ const _unified_sign_poles_circle = {
filter: ['==', ['get', 'asset_type'], 'signpole'], filter: ['==', ['get', 'asset_type'], 'signpole'],
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'interpolate', ['linear'], ['zoom'], 'case',
8, 1.5 * UNIFIED_SIGN_SYMBOL_SCALE, ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
13, 3 * UNIFIED_SIGN_SYMBOL_SCALE, [
17, 5 * UNIFIED_SIGN_SYMBOL_SCALE, 'interpolate', ['linear'], ['zoom'],
22, 6 * UNIFIED_SIGN_SYMBOL_SCALE 8, 4 * UNIFIED_SIGN_SYMBOL_SCALE,
13, 8 * UNIFIED_SIGN_SYMBOL_SCALE,
17, 14 * UNIFIED_SIGN_SYMBOL_SCALE,
22, 18 * UNIFIED_SIGN_SYMBOL_SCALE
],
[
'interpolate', ['linear'], ['zoom'],
8, 1.5 * UNIFIED_SIGN_SYMBOL_SCALE,
13, 3 * UNIFIED_SIGN_SYMBOL_SCALE,
17, 5 * UNIFIED_SIGN_SYMBOL_SCALE,
22, 6 * UNIFIED_SIGN_SYMBOL_SCALE
]
],
'circle-color': [
'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffd600',
'#888888'
], ],
'circle-color': '#888888',
'circle-opacity': 0.8, 'circle-opacity': 0.8,
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffeb3b', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#78350f',
'#333333' '#333333'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
3 * UNIFIED_SIGN_SYMBOL_SCALE, 4 * UNIFIED_SIGN_SYMBOL_SCALE,
[ [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 0, 8, 0,
@ -1206,55 +1231,63 @@ const _unified_assets_point_selection = (typeof AssetSymbology !== 'undefined' &
['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']], ['any', ['==', ['get', 'asset_type'], 'naturetree'], ['==', ['get', 'asset_type'], 'natureshrub'], ['==', ['get', 'thematic'], 'nature']],
[ [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 4, 8, 8,
11, 6, 11, 13,
13, 8, 13, 17,
15, 11, 15, 23,
17, 14, 17, 30,
19, 17, 19, 38,
22, 21 22, 48
], ],
[ [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
8, 8, 8, 10,
11, 12, 11, 15,
13, 15, 13, 20,
15, 18, 15, 26,
17, 22, 17, 34,
19, 26, 19, 44,
22, 32 22, 56
] ]
], ],
0 0
], ],
'circle-color': [ 'circle-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
'#fef08a', '#ffd600',
['boolean', ['feature-state', 'highlighted'], false],
'#fde047',
'transparent' 'transparent'
], ],
'circle-opacity': [ 'circle-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
0.95,
['boolean', ['feature-state', 'highlighted'], false],
0.85, 0.85,
0 0
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
'#ca8a04', '#78350f',
['boolean', ['feature-state', 'highlighted'], false],
'#b45309',
'transparent' 'transparent'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['boolean', ['feature-state', 'selected'], false],
2.5, 4.5,
['boolean', ['feature-state', 'highlighted'], false],
3,
0 0
], ],
'circle-stroke-opacity': [ 'circle-stroke-opacity': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
0.95, 1.0,
0 0
], ],
}, },
@ -1273,24 +1306,37 @@ const _unified_assets_point = {
], ],
paint: { paint: {
'circle-radius': [ 'circle-radius': [
'interpolate', ['linear'], ['zoom'], 'case',
10, 4, ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
18, 8 [
'interpolate', ['linear'], ['zoom'],
10, 8,
18, 16
],
[
'interpolate', ['linear'], ['zoom'],
10, 4,
18, 8
]
], ],
'circle-color': [ 'circle-color': [
'match', ['get', 'asset_type'], 'case',
'roadway', '#4a4a4a', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffd600',
'sidewalk', '#255d88ff', [
'#9e9e9e' 'match', ['get', 'asset_type'],
'roadway', '#4a4a4a',
'sidewalk', '#255d88ff',
'#9e9e9e'
]
], ],
'circle-stroke-color': [ 'circle-stroke-color': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffeb3b', ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#78350f',
'#ffffff' '#ffffff'
], ],
'circle-stroke-width': [ 'circle-stroke-width': [
'case', 'case',
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 3, ['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], 3.5,
0 0
], ],
'circle-opacity': [ 'circle-opacity': [

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

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