Merge pull request #101 from Chia-Chi-Shen/storybook

fix data visualization introduction

Author: Chia-Chi-Shen

src/stories/BasicUsage/MapControls/MapControl.mdx

@@ -77,7 +77,7 @@ import {
         {
             controlName: 'CompassControl',
             controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
-            options: { position: 'top-left' } as ControlOptions,
+            options: { position: 'bottom-right' } as ControlOptions,
         },
       ]}
     />
@@ -129,7 +129,7 @@ import {
         {
             controlName: 'TrafficControl',
             controlOptions: { incidents: true },
-            options: { position: 'top-right' } as ControlOptions,
+            options: { position: 'top-left' } as ControlOptions,
         },
         {
             controlName: 'TrafficLegendControl',

src/stories/DataVisualization/Datavisualization.mdx

@@ -1,17 +1,12 @@
 import { Meta, Source } from '@storybook/blocks';
-import BubbleLayer from './BubbleLayer/BubbleLayer';
-import * as BubbleLayerStories from './BubbleLayer/BubbleLayer.stories';
+import ClusterAggregates from './ClusterAggregates/ClusterAggregates'
 
 <Meta title="Data Visualization/Introduction"/>
 
-
 # Data Visualization
 **react-azure-maps** provides a set of components to help you visualize data on a map like this: <br/>
 
-{/* <BubbleLayer/> */}
-
-<Canvas of={BubbleLayerStories.Example} sourceState="none" />
-
+<ClusterAggregates showBubbles showNumbers/>
 
 We will need 2 kinds of components to visualize data on a map:
 1. `<AzureMapDataSourceProvider>` : to provide your data to the map.

src/stories/DataVisualization/PolygonLayer/PolygonLayer.stories.ts

@@ -36,8 +36,6 @@ const PolygonLayer = () => {
     </AzureMapsProvider>
   );
 };
-
-export default PolygonLayer;
 `,
     },
   },