From 8cc5979c2e1ee30a0f725449a70f77da9f6c2b82 Mon Sep 17 00:00:00 2001 From: kdeterme Date: Mon, 12 Oct 2026 15:54:44 +0200 Subject: [PATCH] style: update map layer symbology and styling for selected and highlighted states --- loko/assets/static/assets/asset_symbology.js | 52 ++++--- .../static/assets/unified_map_layers.js | 138 ++++++++++++------ .../templates/assets/unified_index.html | 6 +- 3 files changed, 125 insertions(+), 71 deletions(-) diff --git a/loko/assets/static/assets/asset_symbology.js b/loko/assets/static/assets/asset_symbology.js index 134cc90..58c532a 100644 --- a/loko/assets/static/assets/asset_symbology.js +++ b/loko/assets/static/assets/asset_symbology.js @@ -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 ], }, diff --git a/loko/assets/static/assets/unified_map_layers.js b/loko/assets/static/assets/unified_map_layers.js index 6b51f1c..881dd11 100644 --- a/loko/assets/static/assets/unified_map_layers.js +++ b/loko/assets/static/assets/unified_map_layers.js @@ -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': [ diff --git a/loko/assets/templates/assets/unified_index.html b/loko/assets/templates/assets/unified_index.html index db821e4..ef75829 100644 --- a/loko/assets/templates/assets/unified_index.html +++ b/loko/assets/templates/assets/unified_index.html @@ -1636,7 +1636,7 @@ - - - + + + {% endblock script %} \ No newline at end of file