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

Storybook to production

Author: Chia-Chi-Shen

package-lock.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "azure-maps-control": "^3.0.1",
+    "azure-maps-control": "^3.3.0",
     "react": "^18.2.0",
     "react-azure-maps": "^1.0.0",
     "react-dom": "^18.2.0",

package.json

@@ -2,3 +2,7 @@
   width: 700px;
   height: 300px;
 }
+
+.atlas-map .azure-map-copyright a {
+  font-size: 9px;
+}

src/Storybook.css

@@ -0,0 +1,38 @@
+import { useContext, useEffect } from 'react';
+import { useAzureMaps } from 'react-azure-maps';
+import { AzureMapLayerContext, IAzureMapLayerProps } from 'react-azure-maps';
+
+const Test = () => {
+  const { layerRef } = useContext<IAzureMapLayerProps>(AzureMapLayerContext);
+  const { mapRef, isMapReady } = useAzureMaps();
+
+  const onClick = () => {
+    console.log(layerRef); // returns undefined
+    console.log(mapRef?.layers); // this works
+  };
+
+  useEffect(() => {
+    if (isMapReady) {
+      console.log('Map is ready');
+      onClick();
+    }
+  }, [isMapReady]);
+
+  return (
+    <button
+      style={{
+        width: '50px',
+        height: '50px',
+        backgroundColor: 'white',
+        position: 'relative',
+        top: '-50px',
+        left: '-50px',
+      }}
+      onClick={onClick}
+    >
+      Test
+    </button>
+  );
+};
+
+export default Test;

src/Test.tsx

@@ -2,7 +2,7 @@ import { Source, Meta } from '@storybook/addon-docs/blocks';
 
 import MapControl, { controls } from './MapControl';
 
-<Meta title="Basic Usage/MapControl" />
+<Meta title="Basic Usage/Map Control" />
 
 # MapControl
 These examples show all the map navigation controls on the map and how to customize different option settings.

src/stories/BasicUsage/MapControls/MapControl.mdx

@@ -18,6 +18,7 @@ const Your_Component = () => {
                 showLabels: false,
                 showLogo: false,
                 renderWorldCopies: false,
+                showFeedbackLink: false,
             }}
         ></AzureMap>
     </AzureMapsProvider>

src/stories/BasicUsage/MapStyles/MapStyles.mdx

@@ -37,5 +37,6 @@ export const Example: Story = {
     showLabels: true,
     showLogo: true,
     renderWorldCopies: true,
+    showFeedbackLink: true,
   },
 };

src/stories/BasicUsage/MapStyles/MapStyles.stories.ts

@@ -5,18 +5,20 @@ export interface MapStylesProps {
   showLogo?: boolean;
   showLabels?: boolean;
   renderWorldCopies?: boolean;
+  showFeedbackLink?: boolean;
 }
 
-const MapStyles = ({ showLabels, showLogo, renderWorldCopies }: MapStylesProps) => {
+const MapStyles = ({ showLabels, showLogo, renderWorldCopies, showFeedbackLink }: MapStylesProps) => {
   return (
     <div className="defaultMap">
       <AzureMapsProvider>
         <AzureMap
           options={mapOptions}
           styleOptions={{
-            showLabels: showLabels,
-            showLogo: showLogo,
-            renderWorldCopies: renderWorldCopies,
+            showLabels,
+            showLogo,
+            renderWorldCopies,
+            showFeedbackLink,
           }}
         ></AzureMap>
       </AzureMapsProvider>

src/stories/BasicUsage/MapStyles/MapStyles.tsx

@@ -1,7 +1,5 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
 
-import { code } from './code';
-
 import * as BubbleLayerStories from './BubbleLayer.stories';
 
 import BubbleLayer from './BubbleLayer';
@@ -19,8 +17,6 @@ For more available properties, see the documentation [BubbleLayerOptions](https:
 {/* <Canvas of={BubbleLayerStories.Example} sourceState="none" /> */}
 
 <Source code={`
-import { AzureMapLayerProvider } from 'react-azure-maps';
-
 <AzureMapLayerProvider
     type="BubbleLayer"
     options={{

src/stories/DataVisualization/BubbleLayer/BubbleLayer.mdx

@@ -1,14 +1,61 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import BubbleLayer from './BubbleLayer';
-import { code } from './code';
 
 const meta: Meta<typeof BubbleLayer> = {
   title: 'Data Visualization/Bubble Layer',
   component: BubbleLayer,
   parameters: {
     layout: 'centered',
     storySource: {
-      source: code,
+      source: `import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+import atlas, { BubbleLayerOptions } from 'azure-maps-control';
+
+// Generate random points to build the data source for the BubbleLayer.
+const collection = generateRandomPoints(); 
+
+const BubbleLayer = () => {
+  <AzureMapsProvider>
+  <div className="defaultMap">
+  <AzureMap options={your_options}>
+
+    <AzureMapDataSourceProvider 
+      id="BubbleLayer DataSourceProvider" 
+      collection={collection}>
+      <AzureMapLayerProvider
+        type="BubbleLayer"
+        options={{
+          radius: 10,
+          color: 'DodgerBlue',
+          opacity: 1,
+          strokeColor: 'DarkBlue',
+          strokeWidth: 2,
+          strokeOpacity: 1,
+          blur: 0,
+        }}
+      />
+    </AzureMapDataSourceProvider>
+
+  </AzureMap>
+  </div>
+  </AzureMapsProvider>
+  );
+};
+
+function generateRandomPoints() {
+  var layerData = [];
+
+  for (var i = 0; i < 50; i++) {
+    layerData.push(
+      new atlas.data.Feature(new atlas.data.Point([Math.random() * 360 - 180, Math.random() * 170 - 85]), {
+        title: 'Pin_' + i,
+      }),
+    );
+  }
+
+  return layerData;
+}
+
+`,
     },
   },
   args: {
@@ -31,7 +78,4 @@ export default meta;
 
 type Story = StoryObj<typeof BubbleLayer>;
 
-export const Example: Story = {
-  name: 'Example',
-  args: {},
-};
+export const Example: Story = {};