style: update map layer symbology and styling for selected and highlighted states
This commit is contained in:
parent
28eebb0300
commit
8cc5979c2e
3 changed files with 125 additions and 71 deletions
|
|
@ -1082,55 +1082,63 @@
|
|||
isNatureExpr,
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
8, 4,
|
||||
11, 6,
|
||||
13, 8,
|
||||
15, 11,
|
||||
17, 14,
|
||||
19, 17,
|
||||
22, 21
|
||||
8, 8,
|
||||
11, 13,
|
||||
13, 17,
|
||||
15, 23,
|
||||
17, 30,
|
||||
19, 38,
|
||||
22, 48
|
||||
],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
8, 8,
|
||||
11, 12,
|
||||
13, 15,
|
||||
15, 18,
|
||||
17, 22,
|
||||
19, 26,
|
||||
22, 32
|
||||
8, 10,
|
||||
11, 15,
|
||||
13, 20,
|
||||
15, 26,
|
||||
17, 34,
|
||||
19, 44,
|
||||
22, 56
|
||||
]
|
||||
],
|
||||
0
|
||||
],
|
||||
'circle-color': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
'#fef08a',
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
'#ffd600',
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
'#fde047',
|
||||
'transparent'
|
||||
],
|
||||
'circle-opacity': [
|
||||
'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
|
||||
],
|
||||
'circle-stroke-color': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
'#ca8a04',
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
'#78350f',
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
'#b45309',
|
||||
'transparent'
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
2.5,
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
4.5,
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
3,
|
||||
0
|
||||
],
|
||||
'circle-stroke-opacity': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
0.95,
|
||||
1.0,
|
||||
0
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -557,15 +557,25 @@ const _unified_locations_circle = {
|
|||
], // ne pas rendre de cercles aux vertex des polygones ni aux radars
|
||||
paint: {
|
||||
'circle-radius': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
7, 2,
|
||||
14, 5,
|
||||
19, 10
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
[
|
||||
'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
|
||||
'circle-color': [
|
||||
'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']],
|
||||
[
|
||||
'match',
|
||||
|
|
@ -593,12 +603,12 @@ const _unified_locations_circle = {
|
|||
],
|
||||
'circle-stroke-color': [
|
||||
'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'
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'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
|
||||
],
|
||||
'circle-opacity': 0.85,
|
||||
|
|
@ -1003,23 +1013,38 @@ const _unified_sign_poles_circle = {
|
|||
filter: ['==', ['get', 'asset_type'], 'signpole'],
|
||||
paint: {
|
||||
'circle-radius': [
|
||||
'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
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
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-stroke-color': [
|
||||
'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'
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
3 * UNIFIED_SIGN_SYMBOL_SCALE,
|
||||
4 * UNIFIED_SIGN_SYMBOL_SCALE,
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
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']],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
8, 4,
|
||||
11, 6,
|
||||
13, 8,
|
||||
15, 11,
|
||||
17, 14,
|
||||
19, 17,
|
||||
22, 21
|
||||
8, 8,
|
||||
11, 13,
|
||||
13, 17,
|
||||
15, 23,
|
||||
17, 30,
|
||||
19, 38,
|
||||
22, 48
|
||||
],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
8, 8,
|
||||
11, 12,
|
||||
13, 15,
|
||||
15, 18,
|
||||
17, 22,
|
||||
19, 26,
|
||||
22, 32
|
||||
8, 10,
|
||||
11, 15,
|
||||
13, 20,
|
||||
15, 26,
|
||||
17, 34,
|
||||
19, 44,
|
||||
22, 56
|
||||
]
|
||||
],
|
||||
0
|
||||
],
|
||||
'circle-color': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
'#fef08a',
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
'#ffd600',
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
'#fde047',
|
||||
'transparent'
|
||||
],
|
||||
'circle-opacity': [
|
||||
'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
|
||||
],
|
||||
'circle-stroke-color': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
'#ca8a04',
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
'#78350f',
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
'#b45309',
|
||||
'transparent'
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
2.5,
|
||||
['boolean', ['feature-state', 'selected'], false],
|
||||
4.5,
|
||||
['boolean', ['feature-state', 'highlighted'], false],
|
||||
3,
|
||||
0
|
||||
],
|
||||
'circle-stroke-opacity': [
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
0.95,
|
||||
1.0,
|
||||
0
|
||||
],
|
||||
},
|
||||
|
|
@ -1273,24 +1306,37 @@ const _unified_assets_point = {
|
|||
],
|
||||
paint: {
|
||||
'circle-radius': [
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 4,
|
||||
18, 8
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 8,
|
||||
18, 16
|
||||
],
|
||||
[
|
||||
'interpolate', ['linear'], ['zoom'],
|
||||
10, 4,
|
||||
18, 8
|
||||
]
|
||||
],
|
||||
'circle-color': [
|
||||
'match', ['get', 'asset_type'],
|
||||
'roadway', '#4a4a4a',
|
||||
'sidewalk', '#255d88ff',
|
||||
'#9e9e9e'
|
||||
'case',
|
||||
['any', ['boolean', ['feature-state', 'highlighted'], false], ['boolean', ['feature-state', 'selected'], false]], '#ffd600',
|
||||
[
|
||||
'match', ['get', 'asset_type'],
|
||||
'roadway', '#4a4a4a',
|
||||
'sidewalk', '#255d88ff',
|
||||
'#9e9e9e'
|
||||
]
|
||||
],
|
||||
'circle-stroke-color': [
|
||||
'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'
|
||||
],
|
||||
'circle-stroke-width': [
|
||||
'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
|
||||
],
|
||||
'circle-opacity': [
|
||||
|
|
|
|||
|
|
@ -1636,7 +1636,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_point_select"></script>
|
||||
<script src="{% static 'assets/unified_map_layers.js' %}?v=20261012_point_select"></script>
|
||||
<script src="{% static 'assets/unified_index.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_circle_select_v2"></script>
|
||||
<script src="{% static 'assets/unified_index.js' %}?v=20261012_circle_select_v2"></script>
|
||||
{% endblock script %}
|
||||
Loading…
Reference in a new issue