|
1 |
| -## React Azure Maps Storybook |
| 1 | +# React Azure Maps Playground |
2 | 2 |
|
3 |
| -The React Azure Map Storybook provides a hands-on way to explore and interact with **react-azure-maps**. <br/> |
4 |
| -With Storybook, You can try adjusting various settings and see how these components work in real-time. <br/> |
5 |
| -This helps you understand the practical applications of the package and how to integrate Azure Maps into your React projects effectively. |
| 3 | +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/> |
| 4 | +Visit React Azure Map Playground: https://azure.github.io/react-azure-maps-playground/ |
| 5 | + |
| 6 | +## Usage |
| 7 | + |
| 8 | +In the playground, you can: |
| 9 | + |
| 10 | +- Learn how to effectively integrate Azure Maps into your React projects |
| 11 | +- Adjust the component settings via the controls provided. |
| 12 | +- Observe the immediate effects of your changes on the map. |
| 13 | +- Read the full source code of the examples. |
| 14 | + |
| 15 | +## Running Locally |
| 16 | + |
| 17 | +Before you begin, ensure you have met the following requirements: |
| 18 | + |
| 19 | +- **Node.js**: Make sure you have Node.js installed on your machine. This project uses Node.js v20.16.0. |
| 20 | +- **npm**: npm is required for package management. It comes with Node.js, so you should have it by default. |
| 21 | + |
| 22 | +### Installation |
| 23 | + |
| 24 | +Follow these steps to get your local environment up and running: |
| 25 | + |
| 26 | +1. **Clone the Repository** |
| 27 | + |
| 28 | + ```bash |
| 29 | + git clone https://github.com/Azure/react-azure-maps-playground.git |
| 30 | + ``` |
| 31 | + |
| 32 | +2. **Navigate to the Project Directory** |
| 33 | + |
| 34 | + ```bash |
| 35 | + cd react-azure-maps-playground |
| 36 | + ``` |
| 37 | + |
| 38 | +3. **Install Dependencies** |
| 39 | + |
| 40 | + Use npm to install the necessary packages: |
| 41 | + |
| 42 | + ```bash |
| 43 | + npm install |
| 44 | + ``` |
| 45 | + |
| 46 | +### Running the Project |
| 47 | + |
| 48 | +Once the dependencies are installed, you can run the project locally.<br/> |
| 49 | +Start the Storybook server to view and interact with the components: |
| 50 | + |
| 51 | +```bash |
| 52 | +npm run storybook |
| 53 | +``` |
| 54 | + |
| 55 | +Open your web browser and navigate to [http://localhost:6006](http://localhost:6006) to view the Storybook interface. |
0 commit comments