From 6727c439dd4845f7dbc1c160b28dad00342b5cc9 Mon Sep 17 00:00:00 2001
From: Etienne Burdet <etienne.burdet@hey.com>
Date: Tue, 10 Oct 2023 09:00:45 +0200
Subject: [PATCH] Add a small story

---
 .../stories/Poi/PoiMap.stories.tsx              | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
index dcf31972..6602970a 100644
--- 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 legend on center align
+ */
+export const PoiMapMinMaxZooms: ComponentStory<typeof PoiMap> = Template.bind({});
+const PoiMapMinMaxZoomsArgs = {
+    data: { value: { layers: [{ ...layer1, colorMatch: citiesColorMatch }, layer2], sources } },
+    options: { 
+        ...options,
+        legend: { ...legend, align: 'center' as const },
+        minZoom: 3,
+        maxZoom: 5,
+    },
+};
+PoiMapMinMaxZooms.args = PoiMapMinMaxZoomsArgs;