fix(visualizations): add cooperative gestures for maps (#206)

Also upgrade maplibre to 2.2.1 and add better typing for expressions

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;
+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;

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

packages/visualizations-react/stories/Poi/PoiMap.stories.tsx

@@ -177,11 +177,29 @@ 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,
         maxZoom: 5,
     },
 };
 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;

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",

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>
 

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>