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

Correct typos and add contents to README

Author: Chia-Chi-Shen

README.md

@@ -1,5 +1,55 @@
-## React Azure Maps Storybook
+# React Azure Maps Playground
 
-The React Azure Map Storybook provides a hands-on way to explore and interact with **react-azure-maps**. <br/>
-With Storybook, You can try adjusting various settings and see how these components work in real-time. <br/>
-This helps you understand the practical applications of the package and how to integrate Azure Maps into your React projects effectively.
+The **React Azure Map Playground** utilize [Storybook](https://storybook.js.org/) to provide an interactive way to explore and experiment with the [**react-azure-maps**](https://github.com/Azure/react-azure-maps) components.<br/>
+Visit React Azure Map Playground: https://azure.github.io/react-azure-maps-playground/
+
+## Usage
+
+In the playground, you can:
+
+- Learn how to effectively integrate Azure Maps into your React projects
+- Adjust the component settings via the controls provided.
+- Observe the immediate effects of your changes on the map.
+- Read the full source code of the examples.
+
+## Running Locally
+
+Before you begin, ensure you have met the following requirements:
+
+- **Node.js**: Make sure you have Node.js installed on your machine. This project uses Node.js v20.16.0.
+- **npm**: npm is required for package management. It comes with Node.js, so you should have it by default.
+
+### Installation
+
+Follow these steps to get your local environment up and running:
+
+1. **Clone the Repository**
+
+   ```bash
+   git clone https://github.com/Azure/react-azure-maps-playground.git
+   ```
+
+2. **Navigate to the Project Directory**
+
+   ```bash
+   cd react-azure-maps-playground
+   ```
+
+3. **Install Dependencies**
+
+   Use npm to install the necessary packages:
+
+   ```bash
+   npm install
+   ```
+
+### Running the Project
+
+Once the dependencies are installed, you can run the project locally.<br/>
+Start the Storybook server to view and interact with the components:
+
+```bash
+npm run storybook
+```
+
+Open your web browser and navigate to [http://localhost:6006](http://localhost:6006) to view the Storybook interface.

src/stories/BasicUsage/MapControls/MapControl.mdx

@@ -4,10 +4,10 @@ import MapControl, { controls } from './MapControl';
 
 <Meta title="Basic Usage/Map Control" />
 
-# MapControl
+# Map Control
 These examples show all the map navigation controls on the map and how to customize different option settings.
 
-## Style control
+## Style Control
 
 
 <MapControl controls={[controls[0]]}/>
@@ -32,7 +32,7 @@ import {
 </AzureMapsProvider>;
 `}/>
 
-## Zoom control
+## Zoom Control
 
 <MapControl controls={[controls[1]]}/>
 <Source code={`
@@ -55,7 +55,7 @@ import {
 </AzureMapsProvider>;
 `}/>
 
-## Compass control
+## Compass Control
 
 <MapControl controls={[controls[2]]}/>
 <Source code={`
@@ -79,7 +79,7 @@ import {
 </AzureMapsProvider>;
 `}/>
 
-## Pitch control
+## Pitch Control
 
 <MapControl controls={[controls[3]]}/>
 <Source code={`
@@ -103,7 +103,7 @@ import {
 </AzureMapsProvider>;
 `}/>
 
-## Traffic control and Legend control
+## Traffic Control and Legend Control
 
 <MapControl controls={[controls[4], controls[5]]}/>
 <Source code={`

src/stories/BasicUsage/MapRef/MapRef.mdx

@@ -18,7 +18,7 @@ const YourComponent = () => {
 
     useEffect(() => {
         if (isMapReady && mapRef)
-            // do something with mapRef
+            // Do something with mapRef
     }, [isMapReady]);
 
     return (
@@ -27,7 +27,7 @@ const YourComponent = () => {
 }
 `}/>
 
-Remember to wrap your component with AzureMapsProvider to provide the necessary context:
+Remember to wrap your component with AzureMapsProvider to provide the necessary context.
 
 <Source code={`
 import { AzureMapsProvider } from 'react-azure-maps';
@@ -44,7 +44,7 @@ const NewComponent = () => {
 
 ## 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!
+Only codes referring 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.
@@ -64,7 +64,7 @@ const SetCenter = () => {
   // Set the map center when the map is ready or when the map center changes.
   useEffect(() => {
     if (isMapReady && mapRef)
-      // set map center
+      // Set map center
       mapRef.setCamera({ center: mapCenter });
   }, [isMapReady, mapCenter]);
 
@@ -107,7 +107,7 @@ const SetStyle = () => {
   //Set the tile boundaries when the map is ready or when the showTileBoundaries state changes
   useEffect(() => {
     if (isMapReady && mapRef)
-      // toggle tile boundaries
+      // Toggle tile boundaries
       mapRef.setStyle({ showTileBoundaries });
   }, [isMapReady, showTileBoundaries]);
 

src/stories/BasicUsage/MapStyles/MapStyles.mdx

@@ -9,7 +9,7 @@ You can change the style of the map by passing the `styleOptions` prop like this
 <Source code={`
 import { AzureMap, AzureMapsProvider } from 'react-azure-maps';
 
-const Your_Component = () => {
+const YourComponent = () => {
   return (
     <AzureMapsProvider>
         <AzureMap

src/stories/DataVisualization/BubbleLayer/BubbleLayer.mdx

@@ -16,15 +16,15 @@ For more available properties, see the documentation [BubbleLayerOptions](https:
 
 <Source code={`
 <AzureMapLayerProvider
-    type="BubbleLayer"
-    options={{
-        radius: 10,
-        color: 'DodgerBlue',
-        opacity: 1,
-        strokeColor: 'DarkBlue',
-        strokeWidth: 2,
-        strokeOpacity: 1,
-        blur: 0,
-    }}
+  type="BubbleLayer"
+  options={{
+    radius: 10,
+    color: 'DodgerBlue',
+    opacity: 1,
+    strokeColor: 'DarkBlue',
+    strokeWidth: 2,
+    strokeOpacity: 1,
+    blur: 0,
+  }}
 />
 `} />

src/stories/DataVisualization/ClusterAggregates/ClusterAggregate.mdx

@@ -5,10 +5,10 @@ import ClusterAggregates from './ClusterAggregates';
 <Meta title="Data Visualization/Cluster Aggregates"/>
 
 # Cluster Aggregates
-This example shows how to enable point based clustering on a data source and render them differently from individual points on the map.
-Clustered points have four properties;
+This example shows how to enable point-based clustering on a data source and render them differently from individual points on the map.
+Clustered points have four properties:
 - `cluster` - A boolean value indicating that it is a cluster.
-- `cluster_id` - A unique id for the cluster which can be used with the DataSource getClusterExpansionZoom, getClusterChildren, and getClusterLeaves functions.
+- `cluster_id` - A unique ID for the cluster which can be used with the DataSource getClusterExpansionZoom, getClusterChildren, and getClusterLeaves functions.
 - `point_count` - The number of points the cluster contains.
 - `point_count_abbreviated` - A string that abbreviates the point_count value if it is long. (i.e. 4,000 becomes 4K)
 
@@ -34,7 +34,7 @@ const bubbleLayerOptions = {
     40, //If point_count >= 750, radius is 40 pixels.
   ],
 
-  //Change the color of the cluster based on the value on the point_cluster property of the cluster.
+  //Change the color of the cluster based on the value of the point_cluster property of the cluster.
   color: [
     'step',
     ['get', 'point_count'],
@@ -45,7 +45,7 @@ const bubbleLayerOptions = {
     'rgba(255,0,0,0.8)', //If the point_count >= 100, color is red.
   ],
   strokeWidth: 0,
-  filter: ['has', 'point_count'], //Only rendered data points which have a point_count property, which clusters do.
+  filter: ['has', 'point_count'], //Only render data points which have a point_count property, which clusters do.
 };
 `}/>
 
@@ -86,7 +86,7 @@ const ClusterAggregates = () => {
               cluster: true,
               //The radius in pixels to cluster points together.
               clusterRadius: 45,
-              //The maximium zoom level in which clustering occurs.
+              //The maximium zoom level at which clustering occurs.
               //If you zoom in more than this, all points are rendered as symbols.
               clusterMaxZoom: 15,
             }}

src/stories/DataVisualization/Datavisualization.mdx

@@ -1,5 +1,5 @@
 import { Meta, Source } from '@storybook/blocks';
-import ClusterAggregates from './ClusterAggregates/ClusterAggregates'
+import ClusterAggregates from './ClusterAggregates/ClusterAggregates';
 
 <Meta title="Data Visualization/Introduction"/>
 
@@ -8,31 +8,26 @@ import ClusterAggregates from './ClusterAggregates/ClusterAggregates'
 
 <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.
-2. `<AzureMapLayerProvider>` : to create a visualization layer on the map based on your data.
+We will need two kinds of components to visualize data on a map:
+1. `<AzureMapDataSourceProvider>`: to provide your data to the map.
+2. `<AzureMapLayerProvider>`: to create a visualization layer on the map based on your data.
 
 Therefore, the basic structure of a data visualization component is as follows:
 
 <Source code= {`
 import { AzureMap, AzureMapsProvider, AzureMapDataSourceProvider, AzureMapLayerProvider } from 'react-azure-maps';
 
 const Your_Component = () => {
-    return (
-        <AzureMapsProvider>
-            <AzureMap options={your_options}>
-                <AzureMapDataSourceProvider 
-                    id="your_layer_id" 
-                    collection={your_data}>
-                    <AzureMapLayerProvider
-                        type="layer_type"
-                        options={your_layer_options}
-                    />
-                </AzureMapDataSourceProvider>
-            </AzureMap>
-        </AzureMapsProvider>
-    )
-}
+  return (
+    <AzureMapsProvider>
+      <AzureMap options={your_options}>
+        <AzureMapDataSourceProvider id="your_layer_id" collection={your_data}>
+          <AzureMapLayerProvider type="layer_type" options={your_layer_options} />
+        </AzureMapDataSourceProvider>
+      </AzureMap>
+    </AzureMapsProvider>
+  );
+};
 `} />
 ## Create a data source
 To create a data source, you can pass the data to the `collection` prop in various ways: <br/>
@@ -70,4 +65,4 @@ You can also provide the data by passing the `dataFromUrl` prop like this: <br/>
 
 <br/>
 Now that you have created a data source, you can create a visualization layer on the map. <br/>
-See expamples below for further details.
+See examples below for further details.

src/stories/DataVisualization/HeatMapLayer/HeatMapLayer.mdx

@@ -7,7 +7,7 @@ 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/>
+The 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}/>
@@ -16,14 +16,14 @@ For more available properties, see the documentation [HeatMapLayerOptions](https
 <AzureMapLayerProvider
     type="HeatLayer"
     options={{
-        radius={10},
-        opacity={1},
-        intensity={1},
+        radius: 10,
+        opacity: 1,
+        intensity: 1,
     }}
 />
 `}/>
 
-## color
+## Color
 You can customize the color of the heat map layer by passing the `color` prop like this: <br/>
 
 <HeatMapLayer 
@@ -60,10 +60,10 @@ You can customize the color of the heat map layer by passing the `color` prop li
 />
 `}/>
 
-## weight
+## Weight
 Specifies how much an individual data point contributes to the heatmap. <br/>
-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/>
+Must be a number greater than 0. Default is `1`.<br/>
+In our example, we set the weight based on the "mag" property of the earthquake data. <br/>
 
 <HeatMapLayer
   radius={10}
@@ -91,7 +91,7 @@ In our example, we set the weight based on "mag" property of the earthquake data
         10,
         1,
     ]}
-/>;
+/>
 `}/>
 
 

src/stories/DataVisualization/ImageLayer/ImageLayer.mdx

@@ -6,11 +6,11 @@ import ImageLayer from './ImageLayer';
 
 # Image Layer
 
-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/>
+You can overlay an image on a fixed set of coordinates with the Image Layer.<br/>
+The 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](/docs/data-visualization-tile-layer--docs).
+> 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/LineLayer/LineLayer.mdx

@@ -8,8 +8,8 @@ import LineLayer from './LineLayer';
 
 A line layer can be used to render LineString and MultiLineString features as paths or routes on the map.<br/> 
 It can also be used to render the outline of Polygon and MultiPolygon features.<br/><br/>
-Following code shows how to add a simple line layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-line-layer)<br/>
-For more available properties, see the documentation [LineLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.linelayeroptions?view=azure-maps-typescript-latest)
+The following code shows how to add a simple line layer. A thorough tutorial can be found [here](https://learn.microsoft.com/en-us/azure/azure-maps/map-add-line-layer).<br/>
+For more available properties, see the documentation [LineLayerOptions](https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.linelayeroptions?view=azure-maps-typescript-latest).
 
 <LineLayer/>
 

src/stories/DataVisualization/PolygonExtrusion/PolygonExtrusion.mdx

@@ -8,8 +8,8 @@ import * as PolygonExtrusionStories from './PolygonExtrusion.stories';
 
 # Polygon Extrusion
 
-The polygon extrusion layer renders the areas of a **Polygon** and **MultiPolygon** features as extruded shapes.<br/> 
-The height and base properties of the polygon extrusion layer define the base distance from the ground and height of the extruded shape in meters.
+The polygon extrusion layer renders the areas of **Polygon** and **MultiPolygon** features as extruded shapes.<br/> 
+The height and base properties of the polygon extrusion layer define the base distance from the ground and the height of the extruded shape in meters.
 
 <PolygonExtrusion height={30}/>
 

src/stories/DataVisualization/PolygonLayer/PolygonLayer.mdx

@@ -4,10 +4,11 @@ import * as PolygonLayerStories from './PolygonLayer.stories';
 
 <Meta of={PolygonLayerStories}/>
 
-# PolygonLayer
+# Polygon Layer
 
-To create a polygon, add it to a data source, and render it with a polygon layer using the PolygonLayer class.
+To create a polygon, add it to a data source and render it with a polygon layer using the PolygonLayer class.
 
 <PolygonLayer fillOpacity={0.5} fillColor={'black'}/>
-<Source code={`<AzureMapLayerProvider type="PolygonLayer" options={{ fillColor: 'black', fillOpacity: 0.5 }} />;
+<Source code={`
+<AzureMapLayerProvider type="PolygonLayer" options={{ fillColor: 'black', fillOpacity: 0.5 }} />
 `}/>