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

Add Events Examples and Implement Anonymous Authentication
Azure · Aug 20, 2024 · 392bd36 · 392bd36
2 parents 2a3ba68 + 7d1885e
commit 392bd36
Show file tree

Hide file tree

Showing 40 changed files with 1,070 additions and 301 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,6 +22,8 @@ const preview: Preview = {
           '*',
           'Data Visualization',
           ['Introduction'],
+          'Events',
+          ['Map Events'],
         ],
       },
     },

diff --git a/public/logo2.png b/public/logo2.png
diff --git a/src/key.ts b/src/key.ts
@@ -1,11 +1,15 @@
 import { IAzureMapOptions, AuthenticationType } from 'react-azure-maps';
 
-export const key = process.env.STORYBOOK_AZURE_MAPS_KEY || '';
-
 export const mapOptions: IAzureMapOptions = {
   authOptions: {
-    authType: AuthenticationType.subscriptionKey,
-    subscriptionKey: key,
+    authType: AuthenticationType.anonymous,
+    clientId: '2a60774c-f588-423b-b004-56d213773ee6',
+    getToken: (resolve, reject) => {
+      fetch('https://anonymous-auth.azurewebsites.net/api/GetAccessToken-Prod')
+        .then((result) => result.text())
+        .then((result) => resolve(result))
+        .catch((error) => reject(new Error(`Failed to fetch anon auth token: ${error.message}`)));
+    },
   },
   center: [0, 0],
   view: 'Auto',

diff --git a/src/stories/BasicUsage/MapControls/MapControl.mdx b/src/stories/BasicUsage/MapControls/MapControl.mdx
@@ -19,18 +19,16 @@ import {
 } from 'react-azure-maps';
 
 <AzureMapsProvider>
-  <div className="defaultMap">
-    <AzureMap
-      options={your_options}
-      controls={[
-        {
-          controlName: 'StyleControl',
-          controlOptions: { mapStyles: 'all' },
-          options: { position: 'top-right' } as ControlOptions,
-        },
-      ]}
-    />
-  </div>
+  <AzureMap
+    options={your_options}
+    controls={[
+      {
+        controlName: 'StyleControl',
+        controlOptions: { mapStyles: 'all' },
+        options: { position: 'top-right' } as ControlOptions,
+      },
+    ]}
+  />
 </AzureMapsProvider>;
 `}/>
 
@@ -45,17 +43,15 @@ import {
 } from 'react-azure-maps';
 
 <AzureMapsProvider>
-  <div className="defaultMap">
-    <AzureMap
-      options={your_options}
-      controls={[
-        {
-            controlName: 'ZoomControl',
-            options: { position: 'top-right' } as ControlOptions,
-        },
-      ]}
-    />
-  </div>
+  <AzureMap
+    options={your_options}
+    controls={[
+      {
+          controlName: 'ZoomControl',
+          options: { position: 'top-right' } as ControlOptions,
+      },
+    ]}
+  />
 </AzureMapsProvider>;
 `}/>
 
@@ -70,18 +66,16 @@ import {
 } from 'react-azure-maps';
 
 <AzureMapsProvider>
-  <div className="defaultMap">
-    <AzureMap
-      options={your_options}
-      controls={[
-        {
-            controlName: 'CompassControl',
-            controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
-            options: { position: 'bottom-right' } as ControlOptions,
-        },
-      ]}
-    />
-  </div>
+  <AzureMap
+    options={your_options}
+    controls={[
+      {
+          controlName: 'CompassControl',
+          controlOptions: { rotationDegreesDelta: 10, style: 'dark' },
+          options: { position: 'bottom-right' } as ControlOptions,
+      },
+    ]}
+  />
 </AzureMapsProvider>;
 `}/>
 
@@ -96,18 +90,16 @@ import {
 } from 'react-azure-maps';
 
 <AzureMapsProvider>
-  <div className="defaultMap">
-    <AzureMap
-      options={your_options}
-      controls={[
-        {
-            controlName: 'PitchControl',
-            controlOptions: { pitchDegreesDelta: 10 },
-            options: { position: 'bottom-right' } as ControlOptions,
-        },
-      ]}
-    />
-  </div>
+  <AzureMap
+    options={your_options}
+    controls={[
+      {
+          controlName: 'PitchControl',
+          controlOptions: { pitchDegreesDelta: 10 },
+          options: { position: 'bottom-right' } as ControlOptions,
+      },
+    ]}
+  />
 </AzureMapsProvider>;
 `}/>
 
@@ -122,22 +114,20 @@ import {
 } from 'react-azure-maps';
 
 <AzureMapsProvider>
-  <div className="defaultMap">
-    <AzureMap
-      options={your_options}
-      controls={[
-        {
-            controlName: 'TrafficControl',
-            controlOptions: { incidents: true },
-            options: { position: 'top-left' } as ControlOptions,
-        },
-        {
-            controlName: 'TrafficLegendControl',
-            controlOptions: {},
-            options: { position: 'bottom-left' } as ControlOptions,
-        },
-      ]}
-    />
-  </div>
+  <AzureMap
+    options={your_options}
+    controls={[
+      {
+          controlName: 'TrafficControl',
+          controlOptions: { incidents: true },
+          options: { position: 'top-left' } as ControlOptions,
+      },
+      {
+          controlName: 'TrafficLegendControl',
+          controlOptions: {},
+          options: { position: 'bottom-left' } as ControlOptions,
+      },
+    ]}
+  />
 </AzureMapsProvider>;
 `}/>
diff --git a/src/stories/BasicUsage/MapRef/MapRef.mdx b/src/stories/BasicUsage/MapRef/MapRef.mdx
@@ -33,12 +33,19 @@ Remember to wrap your component with AzureMapsProvider to provide the necessary
 import { AzureMapsProvider } from 'react-azure-maps';
 import YourComponent from './YourComponent';
 
-<AzureMapsProvider>
-    <YourComponent/>
-</AzureMapsProvider>
+const NewComponent = () => {
+  return(
+      <AzureMapsProvider>
+          <YourComponent/>
+      </AzureMapsProvider>
+  );
+}
 `}/>
 
 ## Examples
+Here are two examples of how to use the `mapRef` to change the map's display. <br/>
+Only codes refering to the usage of `mapRef` are shown here. Don't forget to wrap your component with `AzureMapsProvider` when implementing the examples!
+
 In the first example, we use the `setCamera()` function to change the center of the map. <br/>
 Click the button to see the effect.
 
@@ -68,14 +75,14 @@ const SetCenter = () => {
         onClick={() => setMapCenter(getRandomPosition())}>
         Change Map Center
       </button>
-      <div className="defaultMap">
-        <AzureMap options={mapOptions} />
+      <div style={{ width: '700px', height:'300px' }}>
+        <AzureMap options={ your_options } />
       </div>
     </>
   );
 };
 
-const getRandomPosition = () => {
+function getRandomPosition() {
   const randomLongitude = Math.floor(Math.random() * (180 - -180) + -180);
   const randomLatitude = Math.floor(Math.random() * (-90 - 90) + 90);
   return [randomLatitude, randomLongitude];
@@ -112,8 +119,8 @@ const SetStyle = () => {
       >
         Toggle Tile Boundaries
       </button>
-      <div className="defaultMap">
-        <AzureMap options={mapOptions} />
+      <div style={{ width: '700px', height:'300px' }}>
+        <AzureMap options={ your_options } />
       </div>
     </>
   );

diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.mdx b/src/stories/BasicUsage/MapStyles/MapStyles.mdx
@@ -26,5 +26,5 @@ const Your_Component = () => {
 };
 `}/>
 
-The props shown in the example above are all set to `true` by default.
+The props shown in the example above are all set to `true` by default.<br/>
 For more available properties, see the documentation for [StyleOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.styleoptions?view=azure-maps-typescript-latest).
diff --git a/src/stories/BasicUsage/MapStyles/MapStyles.stories.ts b/src/stories/BasicUsage/MapStyles/MapStyles.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof MapStyles> = {
   title: 'Basic Usage/Map Styles',
   component: MapStyles,
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `
 import { AzureMap, AzureMapsProvider } from 'react-azure-maps';
@@ -14,7 +13,6 @@ const MapStyles = () => {
 
   return (
     <AzureMapsProvider>
-    <div className="defaultMap">
       <AzureMap
         options={your_options}
         styleOptions={{
@@ -23,7 +21,6 @@ const MapStyles = () => {
           renderWorldCopies={true},
         }}
       ></AzureMap>
-    </div>
     </AzureMapsProvider>
   );
 };

diff --git a/src/stories/DataVisualization/BubbleLayer/BubbleLayer.stories.ts b/src/stories/DataVisualization/BubbleLayer/BubbleLayer.stories.ts
@@ -5,7 +5,6 @@ const meta: Meta<typeof BubbleLayer> = {
   title: 'Data Visualization/Bubble Layer',
   component: BubbleLayer,
   parameters: {
-    layout: 'centered',
     storySource: {
       source: `import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
 import atlas, { BubbleLayerOptions } from 'azure-maps-control';
@@ -15,28 +14,22 @@ 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>
+    <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>
   </AzureMapsProvider>
   );
 };