diff --git a/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx b/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx
index e80c526c..01d42bf5 100644
--- a/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx
+++ b/packages/visualizations-react/stories/Map/StudioChoropleth.stories.tsx
@@ -397,4 +397,32 @@ const StudioChoroplethPreventWorldCopiesArgs: Props<DataFrame, ChoroplethGeoJson
         subtitle: 'You should see two rectangles and one circle',
     },
 };
-StudioChoroplethPreventWorldCopies.args = StudioChoroplethPreventWorldCopiesArgs;
\ No newline at end of file
+StudioChoroplethPreventWorldCopies.args = StudioChoroplethPreventWorldCopiesArgs;
+
+export const StudioChoroplethCooperativeGestures = Template.bind({});
+const StudioChoroplethCooperativeGesturesArgs: Props<DataFrame, ChoroplethGeoJsonOptions> = {
+    data: {
+        loading: false,
+        value: [
+            { x: 'France', y: 60 },
+            { x: 'Île de France', y: 35 },
+            { x: 'Corsica', y: 95 },
+        ],
+    },
+    options: {
+        shapes,
+        emptyValueColor: 'red',
+        tooltip: {
+            formatter: defaultLabelCallback,
+        },
+        aspectRatio: 1,
+        attribution: 'Testing attribution',
+        description: 'Accessible description',
+        cooperativeGestures: {
+            windowsHelpText: 'Use Ctrl + scroll to zoom the map',
+            macHelpText: 'Use ⌘ + scroll to zoom the map',
+            mobileHelpText: 'Use two fingers to move the map',
+        },
+    },
+};
+StudioChoroplethCooperativeGestures.args = StudioChoroplethCooperativeGesturesArgs;
\ No newline at end of file
diff --git a/packages/visualizations-react/stories/Map/StudioChoroplethVector.stories.tsx b/packages/visualizations-react/stories/Map/StudioChoroplethVector.stories.tsx
index 635ff8a1..cc080767 100644
--- a/packages/visualizations-react/stories/Map/StudioChoroplethVector.stories.tsx
+++ b/packages/visualizations-react/stories/Map/StudioChoroplethVector.stories.tsx
@@ -65,6 +65,7 @@ const StudioChoroplethVectorGradientArgs: Props<DataFrame, ChoroplethVectorTiles
         value: dataReg,
     },
     options: {
+        bbox: [-17.529298, 38.79776, 23.889159, 52.836618],
         shapesTiles,
         colorScale: {
             type: ColorScaleTypes.Gradient,
@@ -311,6 +312,42 @@ const StudioChoroplethNavigationMapButtonsArgs: Props<DataFrame, ChoroplethVecto
 };
 StudioChoroplethNavigationMapButtons.args = StudioChoroplethNavigationMapButtonsArgs;
 
+export const StudioChoroplethVectorCooperativeGestures = Template.bind({});
+const StudioChoroplethVectorCooperativeGesturesArgs: Props<DataFrame, ChoroplethVectorTilesOptions> = {
+    data: {
+        loading: false,
+        value: dataReg,
+    },
+    options: {
+        shapesTiles,
+        colorScale: {
+            type: ColorScaleTypes.Gradient,
+            colors: {
+                start: '#bcf5f9',
+                end: '#0229bf',
+            },
+        },
+        legend: {
+            title: 'I Am Legend',
+        },
+        aspectRatio: 1,
+        activeShapes: ['11', '93'],
+        emptyValueColor: 'red',
+        tooltip: {
+            formatter: defaultLabelCallback,
+        },
+        bbox: [-17.529298, 38.79776, 23.889159, 52.836618],
+        navigationMaps: [...makeMiniMaps(15),],
+        sourceLink: defaultSource,
+        cooperativeGestures: {
+            windowsHelpText: 'Use Ctrl + scroll to zoom the map',
+            macHelpText: 'Use ⌘ + scroll to zoom the map',
+            mobileHelpText: 'Use two fingers to move the map',
+        },
+    },
+};
+StudioChoroplethVectorCooperativeGestures.args = StudioChoroplethVectorCooperativeGesturesArgs;
+
 /* The next story was used for the demo, but its too big for chromatic, keeping it hear for future ref on loading/wathever */
 // const LoaderTemplate: ComponentStory<typeof Choropleth> = (args, { loaded: { data } }) => (
 //     <div
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
index 6bf9a2fe..7958cd47 100644
--- a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
+++ b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -177,7 +177,7 @@ PoiMapLegendCenter.args = PoiMapLegendCenterArgs;
 export const PoiMapMinMaxZooms: ComponentStory<typeof PoiMap> = Template.bind({});
 const PoiMapMinMaxZoomsArgs = {
     data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
-    options: { 
+    options: {
         ...options,
         legend,
         minZoom: 3,
@@ -185,3 +185,21 @@ const PoiMapMinMaxZoomsArgs = {
     },
 };
 PoiMapMinMaxZooms.args = PoiMapMinMaxZoomsArgs;
+
+/**
+ * STORY: with cooperative gestures
+ */
+export const PoiMapCooperativeGestures: ComponentStory<typeof PoiMap> = Template.bind({});
+const PoiMapCooperativeGesturesArgs = {
+    data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
+    options: {
+        ...options,
+        legend,
+        cooperativeGestures: {
+            windowsHelpText: 'Use Ctrl + scroll to zoom the map',
+            macHelpText: 'Use ⌘ + scroll to zoom the map',
+            mobileHelpText: 'Use two fingers to move the map',
+        },
+    },
+};
+PoiMapCooperativeGestures.args = PoiMapCooperativeGesturesArgs;
diff --git a/packages/visualizations/package-lock.json b/packages/visualizations/package-lock.json
index 5f24c50f..8be137d1 100644
--- a/packages/visualizations/package-lock.json
+++ b/packages/visualizations/package-lock.json
@@ -21,7 +21,7 @@
                 "immutability-helper": "^3.1.1",
                 "lodash": "^4.17.21",
                 "luxon": "^2.5.0",
-                "maplibre-gl": "2.1.9",
+                "maplibre-gl": "2.2.1",
                 "markdown-it": "^12.0.4",
                 "markdown-it-link-attributes": "^3.0.0",
                 "markdown-it-mark": "^3.0.1",
@@ -1721,12 +1721,12 @@
             }
         },
         "node_modules/@mapbox/geojson-rewind": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
-            "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+            "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
             "dependencies": {
                 "get-stream": "^6.0.1",
-                "minimist": "^1.2.5"
+                "minimist": "^1.2.6"
             },
             "bin": {
                 "geojson-rewind": "geojson-rewind"
@@ -3377,9 +3377,9 @@
             }
         },
         "node_modules/earcut": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
-            "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+            "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "node_modules/electron-to-chromium": {
             "version": "1.3.846",
@@ -5120,32 +5120,32 @@
             }
         },
         "node_modules/maplibre-gl": {
-            "version": "2.1.9",
-            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.1.9.tgz",
-            "integrity": "sha512-pnWJmILeZpgA5QSI7K7xFK3yrkyYTd9srw3fCi2Ca52Phm78hsznPwUErEQcZLfxXKn/1h9t8IPdj0TH0NBNbg==",
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.2.1.tgz",
+            "integrity": "sha512-5WSzGRwbxcIkZ/DRDI+A3/o69IoLKFN80jtVqiqUuw0y1u24ZwVvqSr2fqLslUa0Yig1Z50w+wWdnER3JNOzPQ==",
             "hasInstallScript": true,
             "dependencies": {
-                "@mapbox/geojson-rewind": "^0.5.1",
+                "@mapbox/geojson-rewind": "^0.5.2",
                 "@mapbox/jsonlint-lines-primitives": "^2.0.2",
                 "@mapbox/mapbox-gl-supported": "^2.0.1",
                 "@mapbox/point-geometry": "^0.1.0",
-                "@mapbox/tiny-sdf": "^2.0.4",
+                "@mapbox/tiny-sdf": "^2.0.5",
                 "@mapbox/unitbezier": "^0.0.1",
                 "@mapbox/vector-tile": "^1.3.1",
                 "@mapbox/whoots-js": "^3.1.0",
-                "@types/geojson": "^7946.0.8",
+                "@types/geojson": "^7946.0.10",
                 "@types/mapbox__point-geometry": "^0.1.2",
                 "@types/mapbox__vector-tile": "^1.3.0",
                 "@types/pbf": "^3.0.2",
                 "csscolorparser": "~1.0.3",
-                "earcut": "^2.2.3",
+                "earcut": "^2.2.4",
                 "geojson-vt": "^3.2.1",
                 "gl-matrix": "^3.4.3",
                 "murmurhash-js": "^1.0.0",
                 "pbf": "^3.2.1",
                 "potpack": "^1.0.2",
                 "quickselect": "^2.0.0",
-                "supercluster": "^7.1.4",
+                "supercluster": "^7.1.5",
                 "tinyqueue": "^2.0.3",
                 "vt-pbf": "^3.1.3"
             }
@@ -9169,12 +9169,12 @@
             }
         },
         "@mapbox/geojson-rewind": {
-            "version": "0.5.1",
-            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz",
-            "integrity": "sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==",
+            "version": "0.5.2",
+            "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+            "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
             "requires": {
                 "get-stream": "^6.0.1",
-                "minimist": "^1.2.5"
+                "minimist": "^1.2.6"
             }
         },
         "@mapbox/jsonlint-lines-primitives": {
@@ -10384,9 +10384,9 @@
             }
         },
         "earcut": {
-            "version": "2.2.3",
-            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
-            "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+            "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
         },
         "electron-to-chromium": {
             "version": "1.3.846",
@@ -11686,31 +11686,31 @@
             }
         },
         "maplibre-gl": {
-            "version": "2.1.9",
-            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.1.9.tgz",
-            "integrity": "sha512-pnWJmILeZpgA5QSI7K7xFK3yrkyYTd9srw3fCi2Ca52Phm78hsznPwUErEQcZLfxXKn/1h9t8IPdj0TH0NBNbg==",
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.2.1.tgz",
+            "integrity": "sha512-5WSzGRwbxcIkZ/DRDI+A3/o69IoLKFN80jtVqiqUuw0y1u24ZwVvqSr2fqLslUa0Yig1Z50w+wWdnER3JNOzPQ==",
             "requires": {
-                "@mapbox/geojson-rewind": "^0.5.1",
+                "@mapbox/geojson-rewind": "^0.5.2",
                 "@mapbox/jsonlint-lines-primitives": "^2.0.2",
                 "@mapbox/mapbox-gl-supported": "^2.0.1",
                 "@mapbox/point-geometry": "^0.1.0",
-                "@mapbox/tiny-sdf": "^2.0.4",
+                "@mapbox/tiny-sdf": "^2.0.5",
                 "@mapbox/unitbezier": "^0.0.1",
                 "@mapbox/vector-tile": "^1.3.1",
                 "@mapbox/whoots-js": "^3.1.0",
-                "@types/geojson": "^7946.0.8",
+                "@types/geojson": "^7946.0.10",
                 "@types/mapbox__point-geometry": "^0.1.2",
                 "@types/mapbox__vector-tile": "^1.3.0",
                 "@types/pbf": "^3.0.2",
                 "csscolorparser": "~1.0.3",
-                "earcut": "^2.2.3",
+                "earcut": "^2.2.4",
                 "geojson-vt": "^3.2.1",
                 "gl-matrix": "^3.4.3",
                 "murmurhash-js": "^1.0.0",
                 "pbf": "^3.2.1",
                 "potpack": "^1.0.2",
                 "quickselect": "^2.0.0",
-                "supercluster": "^7.1.4",
+                "supercluster": "^7.1.5",
                 "tinyqueue": "^2.0.3",
                 "vt-pbf": "^3.1.3"
             }
diff --git a/packages/visualizations/package.json b/packages/visualizations/package.json
index 26d181f4..6462bd30 100644
--- a/packages/visualizations/package.json
+++ b/packages/visualizations/package.json
@@ -101,7 +101,7 @@
         "immutability-helper": "^3.1.1",
         "lodash": "^4.17.21",
         "luxon": "^2.5.0",
-        "maplibre-gl": "2.1.9",
+        "maplibre-gl": "2.2.1",
         "markdown-it": "^12.0.4",
         "markdown-it-link-attributes": "^3.0.0",
         "markdown-it-mark": "^3.0.1",
diff --git a/packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte b/packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte
index 65284d7b..6bf9c993 100644
--- a/packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte
+++ b/packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import turfBbox from '@turf/bbox';
-    import type { FilterSpecification, SourceSpecification } from 'maplibre-gl';
+    import type { ExpressionSpecification, SourceSpecification, GestureOptions } from 'maplibre-gl';
     import type { BBox, FeatureCollection } from 'geojson';
     import { debounce } from 'lodash';
     import type { ColorScale, DataBounds, Color, Source } from '../../types';
@@ -43,6 +43,7 @@
     let navigationMaps: NavigationMap[] | undefined;
     // Data source link
     let sourceLink: Source | undefined;
+    let cooperativeGestures: boolean | GestureOptions | undefined;
 
     // Used to apply a chosen color for shapes without values (default: #cccccc)
     let emptyValueColor: Color;
@@ -66,6 +67,7 @@
         description,
         navigationMaps,
         sourceLink,
+        cooperativeGestures,
     } = options);
 
     // Choropleth is always display over a blank map, for readability purposes
@@ -81,7 +83,7 @@
         values: ChoroplethDataValue[] = []
     ) {
         let colors;
-        let fillColor: string | (string | string[])[] | FilterSpecification = emptyValueColor;
+        let fillColor: string | ExpressionSpecification = emptyValueColor;
 
         if (values.length > 0) {
             dataBounds = getDataBounds(values);
@@ -131,6 +133,7 @@
         {navigationMaps}
         {data}
         {sourceLink}
+        {cooperativeGestures}
     />
 </div>
 
diff --git a/packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte b/packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte
index a541133b..8f01a8c1 100644
--- a/packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte
+++ b/packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { FilterSpecification, SourceSpecification } from 'maplibre-gl';
+    import type { SourceSpecification, GestureOptions, ExpressionSpecification } from 'maplibre-gl';
     import type { BBox } from 'geojson';
     import { debounce } from 'lodash';
     import type { ColorScale, DataBounds, Color, Source } from '../../types';
@@ -40,13 +40,14 @@
     let legend: MapLegend | undefined;
     let attribution: string | undefined;
     let filter: MapFilter | undefined;
-    let filterExpression: FilterSpecification | undefined;
+    let filterExpression: ExpressionSpecification | undefined;
     let title: string | undefined;
     let subtitle: string | undefined;
     let description: string | undefined;
     let navigationMaps: NavigationMap[] | undefined;
     // Data source link
     let sourceLink: Source | undefined;
+    let cooperativeGestures: boolean | GestureOptions | undefined;
 
     // Used to apply a chosen color for shapes without values (default: #cccccc)
     let emptyValueColor: Color;
@@ -73,6 +74,7 @@
         description,
         navigationMaps,
         sourceLink,
+        cooperativeGestures,
     } = options);
 
     // Choropleth is always display over a blank map, for readability purposes
@@ -91,7 +93,7 @@
         values: ChoroplethDataValue[] = []
     ) {
         let colors;
-        let fillColor: string | (string | string[])[] | FilterSpecification = emptyValueColor;
+        let fillColor: string | ExpressionSpecification = emptyValueColor;
 
         if (values.length > 0) {
             dataBounds = getDataBounds(values);
@@ -150,6 +152,7 @@
     {navigationMaps}
     {data}
     {sourceLink}
+    {cooperativeGestures}
 />
 
 <style>
diff --git a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte b/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
index 3b05cfee..484894bd 100644
--- a/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
+++ b/packages/visualizations/src/components/Map/WebGl/MapRender.svelte
@@ -11,6 +11,7 @@
         MapLayerMouseEvent,
         LngLatLike,
         FilterSpecification,
+        GestureOptions,
     } from 'maplibre-gl';
     import { onMount } from 'svelte';
     import { debounce } from 'lodash';
@@ -67,6 +68,7 @@
     export let data: { value: ChoroplethDataValue[] };
     // Data source link
     export let sourceLink: Source | undefined;
+    export let cooperativeGestures: boolean | GestureOptions | undefined;
 
     let clientWidth: number;
     let legendVariant: LegendVariant;
@@ -123,6 +125,7 @@
             zoom: 5,
             customAttribution: attribution,
             renderWorldCopies: false,
+            cooperativeGestures,
         };
 
         map = new maplibregl.Map({
@@ -425,7 +428,11 @@
         border-left-color: transparent;
         border-right-color: transparent;
     }
-
+    /* Add a more opacity and blur effect on map when cooperative gesture is shown */
+    .map-card :global(.maplibregl-cooperative-gesture-screen) {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+    }
     .main {
         aspect-ratio: var(--aspect-ratio);
         flex-grow: 1;
@@ -438,7 +445,6 @@
         justify-content: flex-start;
         pointer-events: var(--buttons-events);
     }
-
     /* Suitable for elements that are used via aria-describedby or aria-labelledby */
     .a11y-invisible-description {
         display: none;
diff --git a/packages/visualizations/src/components/Map/types.ts b/packages/visualizations/src/components/Map/types.ts
index 24ca1943..bc9e732d 100644
--- a/packages/visualizations/src/components/Map/types.ts
+++ b/packages/visualizations/src/components/Map/types.ts
@@ -1,5 +1,5 @@
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
-import type { FillLayerSpecification, Popup } from 'maplibre-gl';
+import type { FillLayerSpecification, Popup, GestureOptions } from 'maplibre-gl';
 import type { DebouncedFunc } from 'lodash';
 import type { LegendPositions } from '../Legend/types';
 import type { ColorScale, Color, Source } from '../types';
@@ -46,6 +46,7 @@ export interface ChoroplethOptions {
     navigationMaps?: NavigationMap[];
     /** Link button to source */
     sourceLink?: Source;
+    cooperativeGestures?: boolean | GestureOptions;
 }
 
 export interface MapFilter {
diff --git a/packages/visualizations/src/components/Map/utils.ts b/packages/visualizations/src/components/Map/utils.ts
index b80bee1c..faef7126 100644
--- a/packages/visualizations/src/components/Map/utils.ts
+++ b/packages/visualizations/src/components/Map/utils.ts
@@ -1,13 +1,19 @@
 import chroma from 'chroma-js';
 import turfBbox from '@turf/bbox';
-import maplibregl, { FilterSpecification } from 'maplibre-gl';
+import maplibregl, { ExpressionInputType, ExpressionSpecification } from 'maplibre-gl';
 import geoViewport from '@mapbox/geo-viewport';
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { Scale } from 'chroma-js';
 import { DEFAULT_COLORS } from './constants';
 import { assertUnreachable } from '../utils';
-import { ColorScaleTypes } from '../types';
-import type { Color, ColorScale, DataBounds } from '../types';
+import {
+    Color,
+    ColorScale,
+    DataBounds,
+    isGroupByForMatchExpression,
+    ColorScaleTypes,
+} from '../types';
+
 import type {
     ChoroplethDataValue,
     ChoroplethFixedTooltipDescription,
@@ -220,16 +226,19 @@ export const getFixedTooltips = (
 };
 
 /** Transform a filter object from the options into a Maplibre filter expression */
-export const computeFilterExpression = (filterConfig: MapFilter): FilterSpecification => {
+export const computeFilterExpression = (filterConfig: MapFilter): ExpressionSpecification => {
     const { key, value } = filterConfig;
-    // The matching is case-insensitive to make it easier with unique administrative codes
-    // that may have varying case but still represent the same entity.
-    const filterMatchExpression: FilterSpecification = ['in', ['downcase', ['get', key]]];
-    const matchingValues: string[] = [];
-    (Array.isArray(value) ? value : [value]).forEach((filterValue) => {
-        matchingValues.push(filterValue.toString().toLowerCase());
-    });
-    filterMatchExpression.push(['literal', matchingValues]);
+    const filterMatchExpression: ExpressionSpecification = [
+        'in',
+        ['downcase', ['get', key]],
+        ['literal', []],
+    ];
+
+    const matchingValues: string[] = Array.isArray(value)
+        ? value.map((v) => v.toString().toLowerCase())
+        : [value.toString().toLowerCase()];
+
+    filterMatchExpression[2] = ['literal', matchingValues];
     return filterMatchExpression;
 };
 
@@ -272,7 +281,7 @@ export const computeTooltip: ComputeTooltipFunction = (
 };
 
 export const computeBaseLayer = (
-    fillColor: string | (string | string[])[] | FilterSpecification,
+    fillColor: string | ExpressionSpecification,
     DefaultColor: Color
 ): ChoroplethLayer => ({
     type: 'fill',
@@ -288,9 +297,13 @@ export const computeMatchExpression = (
     colors: { [s: string]: string },
     matchKey: string,
     emptyValueColor: Color
-): FilterSpecification => {
-    const matchExpression = ['match', ['get', matchKey]];
-    Object.entries(colors).forEach((e) => matchExpression.push(...e));
-    matchExpression.push(emptyValueColor); // Default fallback color
-    return matchExpression;
+): ExpressionSpecification => {
+    const matchExpression: ['match', ExpressionSpecification] = ['match', ['get', matchKey]];
+    const groupByColors: ExpressionInputType[] = [];
+    Object.entries(colors).forEach((e) => groupByColors.push(...e));
+    groupByColors.push(emptyValueColor); // Default fallback color
+    if (!isGroupByForMatchExpression(groupByColors)) {
+        throw new Error('Not the expected type for complete match expression');
+    }
+    return [...matchExpression, ...groupByColors];
 };
diff --git a/packages/visualizations/src/components/MapPoi/Map.svelte b/packages/visualizations/src/components/MapPoi/Map.svelte
index 97eb93e6..b1886146 100644
--- a/packages/visualizations/src/components/MapPoi/Map.svelte
+++ b/packages/visualizations/src/components/MapPoi/Map.svelte
@@ -37,6 +37,7 @@
         aspectRatio,
         interactive,
         transformRequest,
+        cooperativeGestures,
     } = getMapOptions(options));
 
     const bbox = createDeepEqual(_bbox);
@@ -65,6 +66,7 @@
             {aspectRatio}
             {interactive}
             {transformRequest}
+            {cooperativeGestures}
         />
     {/key}
 </div>
diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
index a0a66fae..81059cdb 100644
--- a/packages/visualizations/src/components/MapPoi/MapRender.svelte
+++ b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -2,7 +2,13 @@
 
 <script lang="ts">
     import type { BBox } from 'geojson';
-    import type { LngLatBoundsLike, LngLatLike, MapOptions, StyleSpecification } from 'maplibre-gl';
+    import type {
+        LngLatBoundsLike,
+        LngLatLike,
+        MapOptions,
+        StyleSpecification,
+        GestureOptions,
+    } from 'maplibre-gl';
     import { onDestroy, onMount } from 'svelte';
     import CategoryLegend from '../Legend/CategoryLegend.svelte';
     import type { CategoryLegend as CategoryLegendType } from '../Legend/types';
@@ -31,6 +37,7 @@
     export let subtitle: string | undefined;
     export let legend: CategoryLegendType | undefined;
     export let description: string | undefined;
+    export let cooperativeGestures: boolean | GestureOptions | undefined;
     // Data source link
     export let sourceLink: Source | undefined;
 
@@ -63,6 +70,7 @@
             transformRequest,
             minZoom,
             maxZoom,
+            cooperativeGestures,
         };
         map.initialize(style, container, options);
     });
@@ -145,6 +153,11 @@
         border-radius: 6px;
         box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.26);
     }
+    /* Add a more opacity and blur effect on map when cooperative gesture is shown */
+    .map-card :global(.maplibregl-cooperative-gesture-screen) {
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(2px);
+    }
     .main {
         aspect-ratio: var(--aspect-ratio);
         flex-grow: 1;
diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
index 2257838a..6907800e 100644
--- a/packages/visualizations/src/components/MapPoi/types.ts
+++ b/packages/visualizations/src/components/MapPoi/types.ts
@@ -4,6 +4,7 @@ import type {
     GeoJSONFeature,
     LngLatLike,
     RequestTransformFunction,
+    GestureOptions,
 } from 'maplibre-gl';
 import type { BBox, GeoJsonProperties } from 'geojson';
 
@@ -50,6 +51,7 @@ export interface PoiMapOptions {
     legend?: CategoryLegend;
     /** Link button to source */
     sourceLink?: Source;
+    cooperativeGestures?: boolean | GestureOptions;
 }
 
 export type PoiMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
diff --git a/packages/visualizations/src/components/MapPoi/utils.ts b/packages/visualizations/src/components/MapPoi/utils.ts
index 064b9709..5b8ab591 100644
--- a/packages/visualizations/src/components/MapPoi/utils.ts
+++ b/packages/visualizations/src/components/MapPoi/utils.ts
@@ -1,11 +1,12 @@
 import type {
     CircleLayerSpecification,
-    DataDrivenPropertyValueSpecification,
+    ExpressionSpecification,
     MapOptions,
     StyleSpecification,
+    ExpressionInputType,
 } from 'maplibre-gl';
 
-import type { Color } from '../types';
+import { isGroupByForMatchExpression, Color } from '../types';
 
 import type {
     CenterZoomOptions,
@@ -43,26 +44,36 @@ export const getMapLayers = (layers?: Layer[]): CircleLayerSpecification[] => {
             borderColor: layerBorderColor,
         } = layer;
 
-        let circleColor: DataDrivenPropertyValueSpecification<Color> | Color = layerColor;
-        let circleBorderColor: DataDrivenPropertyValueSpecification<Color> | Color | undefined =
-            layerBorderColor;
+        let circleColor: ExpressionSpecification | Color = layerColor;
+        let circleBorderColor: ExpressionSpecification | Color | undefined = layerBorderColor;
 
         if (colorMatch) {
             const { key, colors, borderColors } = colorMatch;
-            const groupByColors = ['match', ['get', key]];
+            const matchExpression: ['match', ExpressionSpecification] = ['match', ['get', key]];
+            const groupByColors: ExpressionInputType[] = [];
             Object.keys(colors).forEach((color) => {
                 groupByColors.push(color, colors[color]);
             });
             groupByColors.push(layerColor);
-            circleColor = groupByColors;
+            if (!isGroupByForMatchExpression(groupByColors)) {
+                throw new Error('Not the expected type for complete match expression');
+            }
+            circleColor = [...matchExpression, ...groupByColors];
 
             if (borderColors) {
-                const groupBordersByColors = ['match', ['get', key]];
+                const matchBorderExpression: ['match', ExpressionSpecification] = [
+                    'match',
+                    ['get', key],
+                ];
+                const groupByBorderColors: ExpressionInputType[] = [];
                 Object.keys(borderColors).forEach((borderColor) => {
-                    groupBordersByColors.push(borderColor, borderColors[borderColor]);
+                    groupByBorderColors.push(borderColor, borderColors[borderColor]);
                 });
-                groupBordersByColors.push(circleBorderColor || DEFAULT_DARK_GREY);
-                circleBorderColor = groupBordersByColors;
+                groupByBorderColors.push(circleBorderColor || DEFAULT_DARK_GREY);
+                if (!isGroupByForMatchExpression(groupByBorderColors)) {
+                    throw new Error('Not the expected type for complete match expression');
+                }
+                circleBorderColor = [...matchBorderExpression, ...groupByBorderColors];
             }
         }
         return {
@@ -111,6 +122,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         legend,
         sourceLink,
         transformRequest,
+        cooperativeGestures,
     } = options;
     return {
         aspectRatio,
@@ -126,6 +138,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         legend,
         sourceLink,
         transformRequest,
+        cooperativeGestures,
     };
 };
 
diff --git a/packages/visualizations/src/components/types.ts b/packages/visualizations/src/components/types.ts
index c6f87b1d..101cb1fe 100644
--- a/packages/visualizations/src/components/types.ts
+++ b/packages/visualizations/src/components/types.ts
@@ -1,3 +1,5 @@
+import type { ExpressionInputType } from 'maplibre-gl';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DataFrame = Record<string, any>[];
 
@@ -33,3 +35,16 @@ export type PaletteScale = {
 };
 
 export type ColorScale = GradientScale | PaletteScale;
+
+// We expect an array with couples of values and ExpressionInput and for the last element a default ExpressionInput
+export function isGroupByForMatchExpression(
+    value: ExpressionInputType[]
+): value is [
+    ExpressionInputType,
+    ExpressionInputType,
+    ExpressionInputType,
+    ...ExpressionInputType[],
+    ExpressionInputType
+] {
+    return value.length >= 3 && value.length % 2 === 1;
+}