fix(POI Map): Add min max zoom options (#197)

--------- Co-authored-by: Kevin Fabre <[email protected]>
opendatasoft · Oct 12, 2023 · a3fbd11 · a3fbd11
1 parent 40ba134
commit a3fbd11
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
         "bootstrap": "lerna bootstrap",
         "watch": "lerna run watch --parallel --stream",
         "lint": "lerna run lint  --parallel --no-bail",
-        "build-package-lock": "lerna run build-package-lock"
+        "build-package-lock": "lerna run build-package-lock",
+        "storybook": "lerna run --scope=@opendatasoft/visualizations-react storybook"
     },
     "devDependencies": {
         "lerna": "^5.5.0",

diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -107,7 +107,7 @@ const meta: ComponentMeta<typeof PoiMap> = {
 
 export default meta;
 
-const Template: ComponentStory<typeof PoiMap> = (args) => (
+const Template: ComponentStory<typeof PoiMap> = args => (
     <div
         style={{
             width: '50%',
@@ -170,3 +170,18 @@ const PoiMapLegendCenterArgs = {
     options: { ...options, legend: { ...legend, align: 'center' as const } },
 };
 PoiMapLegendCenter.args = PoiMapLegendCenterArgs;
+
+/**
+ * STORY: with min and max zoom
+ */
+export const PoiMapMinMaxZooms: ComponentStory<typeof PoiMap> = Template.bind({});
+const PoiMapMinMaxZoomsArgs = {
+    data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
+    options: { 
+        ...options,
+        legend,
+        minZoom: 3,
+        maxZoom: 5,
+    },
+};
+PoiMapMinMaxZooms.args = PoiMapMinMaxZoomsArgs;
diff --git a/packages/visualizations/src/components/MapPoi/Map.svelte b/packages/visualizations/src/components/MapPoi/Map.svelte
@@ -24,8 +24,10 @@
 
     $: ({
         bbox: _bbox,
-        zoom,
         center: _center,
+        zoom,
+        minZoom,
+        maxZoom,
         title,
         subtitle,
         description,
@@ -52,6 +54,8 @@
             bbox={$bbox}
             center={$center}
             {zoom}
+            {minZoom}
+            {maxZoom}
             {title}
             {subtitle}
             {description}

diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -275,6 +275,18 @@ export default class MapPOI {
         });
     }
 
+    setMinZoom(minZoom?: number) {
+        this.queue((map) => {
+            map.setMinZoom(minZoom);
+        });
+    }
+
+    setMaxZoom(maxZoom?: number) {
+        this.queue((map) => {
+            map.setMaxZoom(maxZoom);
+        });
+    }
+
     setBbox(bbox?: BBox) {
         this.queue((map) => {
             if (!bbox) {

diff --git a/packages/visualizations/src/components/MapPoi/MapRender.svelte b/packages/visualizations/src/components/MapPoi/MapRender.svelte
@@ -22,6 +22,8 @@
     // Options
     export let bbox: BBox | undefined;
     export let zoom: number | undefined;
+    export let minZoom: number | undefined;
+    export let maxZoom: number | undefined;
     export let center: LngLatLike | undefined;
     export let aspectRatio: number;
     export let interactive: boolean;
@@ -42,6 +44,8 @@
 
     $: map.toggleInteractivity(interactive ? 'enable' : 'disable');
     $: map.setBbox(bbox);
+    $: map.setMinZoom(minZoom);
+    $: map.setMaxZoom(maxZoom);
     $: map.setSourcesAndLayers(sources, layers);
     $: map.setPopupsConfiguration(popupsConfiguration);
     $: map.jumpTo(getCenterZoomOptions({ zoom, center }));
@@ -53,6 +57,8 @@
             bounds: bbox as LngLatBoundsLike,
             ...getCenterZoomOptions({ zoom, center }),
             transformRequest,
+            minZoom,
+            maxZoom,
         };
         map.initialize(style, container, options);
     });

diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
@@ -38,6 +38,8 @@ export interface PoiMapOptions {
     bbox?: BBox;
     center?: LngLatLike;
     zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
     // Aspect ratio used to draw the map. The map will take he width available to it, and decide its height based on that ratio.
     aspectRatio?: number;
     // Is the map interactive for the user (zoom, move, tooltips...)

diff --git a/packages/visualizations/src/components/MapPoi/utils.ts b/packages/visualizations/src/components/MapPoi/utils.ts
@@ -101,6 +101,8 @@ export const getMapOptions = (options: PoiMapOptions) => {
         aspectRatio = DEFAULT_ASPECT_RATIO,
         bbox,
         zoom,
+        maxZoom,
+        minZoom,
         center,
         interactive = true,
         title,
@@ -114,6 +116,8 @@ export const getMapOptions = (options: PoiMapOptions) => {
         aspectRatio,
         bbox,
         zoom,
+        minZoom,
+        maxZoom,
         center,
         interactive,
         title,