anonymous authentication and final check

Author: Savina Shen (Manpower Services Taiwan Co Ltd)

src/key.ts

@@ -4,8 +4,14 @@ 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',

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.
 
@@ -75,7 +82,7 @@ const SetCenter = () => {
   );
 };
 
-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];

src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx

@@ -7,8 +7,8 @@ import HeatMapLayer from './HeatMapLayer';
 # Heat Map Layer
 
 A heat map layer can be used to visualize the density of point data on the map.<br/>
-Following code shows how to add a simple heat map layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-heat-map-layer)<br/>
-For more available properties, see the documentation [HeatMapLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.heatmaplayeroptions?view=azure-maps-typescript-latest)    
+Following code shows how to add a simple heat map layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-heat-map-layer).<br/>
+For more available properties, see the documentation [HeatMapLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.heatmaplayeroptions?view=azure-maps-typescript-latest).   
 
 <HeatMapLayer radius={10}/>
 
@@ -62,37 +62,36 @@ You can customize the color of the heat map layer by passing the `color` prop li
 
 ## weight
 Specifies how much an individual data point contributes to the heatmap. <br/>
-Must be a number greater than 0. Default `1`
+Must be a number greater than 0. Default `1`.<br/>
 In our example, we set the weight based on "mag" property of the earthquake data. <br/>
 
-<HeatMapLayer 
-    radius={10}
-    weight={[
-                'interpolate',
-                ['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
-                ['get', 'mag'],
-                0,
-                0,
-                10,
-                1,
-            ]}/>
+<HeatMapLayer
+  radius={10}
+  weight={[
+    'interpolate',
+    //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
+    ['exponential', 2],
+    ['get', 'mag'],
+    0,
+    0,
+    10,
+    1,
+  ]}
+/>;
 
 <Source code={`
-<AzureMapLayerProvider
-    type="HeatLayer"
-    options={{
-        radius: 10,
-        weight: [
-                'interpolate',
-                ['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
-                ['get', 'mag'],
-                0,
-                0,
-                10,
-                1,
-            ]
-    }}
-/>
+<HeatMapLayer
+    radius={10}
+    weight={[
+        'interpolate',
+        ['exponential', 2],
+        ['get', 'mag'],
+        0,
+        0,
+        10,
+        1,
+    ]}
+/>;
 `}/>
 
 

src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.stories.ts

@@ -6,6 +6,44 @@ const meta: Meta<typeof HeatMapLayer> = {
   component: HeatMapLayer,
   parameters: {
     controls: { exclude: ['color'] },
+    storySource: {
+      source: `
+import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
+
+const magWeight = [
+  'interpolate',
+  ['exponential', 2], //Using an exponential interpolation since earthquake magnitudes are on an exponential scale.
+  ['get', 'mag'],
+  0,
+  0,
+  10,
+  1,
+];
+
+const HeatMapLayer = () => {
+  return (
+    <AzureMapsProvider>
+      <AzureMap options={your_options}>
+        <AzureMapDataSourceProvider
+          id="LineLayer DataSourceProvider"
+          dataFromUrl="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
+        >
+          <AzureMapLayerProvider
+            type="HeatLayer"
+            options={{
+              radius: 10,
+              opacity: 1,
+              intensity: 1,
+              weight: 1,  // if weight is set true in the Controls, magWeight is used
+            }}
+          />
+        </AzureMapDataSourceProvider>
+      </AzureMap>
+    </AzureMapsProvider>
+  );
+};
+`,
+    },
   },
   args: {
     radius: 10,

src/stories/DataVisualization/ImageLayer/ImageLayer.mdx

@@ -10,7 +10,7 @@ You can overlay an image to a fixed set of coordinates with the Image Layer.<br/
 Following code shows how to add a simple image layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-image-layer).<br/>
 For more available properties, see the documentation [ImageLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.imagelayeroptions?view=azure-maps-typescript-latest).
 
-> Note that browsers might have difficulty loading a large image. In this case, consider breaking your image up into tiles, and loading them into the map as a **TileLayer**.
+> Note that browsers might have difficulty loading a large image. In this case, consider breaking your image up into tiles, and loading them into the map as a [TileLayer](/docs/data-visualization-tile-layer--docs).
 
 <ImageLayer/>
 

src/stories/DataVisualization/TileLayer/TileLayer.stories.ts

@@ -29,9 +29,6 @@ return (
     </AzureMapsProvider>
   );
 };
-
-export default TileLayer;
-
 `,
     },
   },

src/stories/DefaultMap/GettingStarted.mdx

@@ -52,11 +52,11 @@ const option: IAzureMapOptions = {
 };
 
 const DefaultMap = () => (
-  <AzureMapsProvider>
-    <div>
+  <div style={{width:'700px', height: '300px'}}>
+    <AzureMapsProvider>
       <AzureMap options={option} />
-    </div>
-  </AzureMapsProvider>
+    </AzureMapsProvider>
+  </div>
 );
 `} />
 
@@ -105,7 +105,7 @@ There are three main references that depend on the basic `Azure Maps API`:
     - See [Default Map](#create-a-map) as an example.
 #### AzureMapDataSourceProvider
     - provides the data source instance and references to the data source.
-    - See [Data Visualization]() for more usages.
+    - See [Data Visualization Introduction](/docs/data-visualization-introduction--docs) for more usages.
 #### AzureMapLayerProvider
     - provides the layer instance and references to the layer.
-    - See [Data Visualization]() and for more usages.
+    - See [Data Visualization](/docs/data-visualization-introduction--docs) for more usages.

src/stories/Events/MapEvents/MapEvents.mdx

@@ -20,6 +20,7 @@ const MapEvents = () => {
   const [position, setPosition] = useState([0, 0]);
 
   const handleMapClick = (e: any) => {
+    // get the position of the click event
     setPosition(e.position);
   };
   const displayPosition = (position: number[]) => {

src/stories/MapAnnotations/HtmlMarker/HtmlMarker.mdx

@@ -12,7 +12,6 @@ Following is a simple example of how to use the HtmlMarker component. <br/>
 You can customize the marker by setting the [options prop](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.htmlmarkeroptions?view=azure-maps-typescript-latest). 
 
 <HtmlMarker text='10'/>
-{/* show basic code */}
 
 <Source code={`
 <AzureMapHtmlMarker options={{ text: '10' }}/>
@@ -21,5 +20,5 @@ You can customize the marker by setting the [options prop](https://learn.microso
 You can also pass a **custom component** to the marker. <br/>
 Noted that the custom component will be rendered into a static element.
 <Source code={`
-<AzureMapHtmlMarker options={{ position }} markerContent={<YourComponent/>} />
+<AzureMapHtmlMarker markerContent={<YourComponent/>} />
 `} />