diff --git a/examples/1-basic-map/README.md b/examples/1-basic-map/README.md index ee8fefec..7b1f3b35 100644 --- a/examples/1-basic-map/README.md +++ b/examples/1-basic-map/README.md @@ -1,42 +1,44 @@ -# Example 1: Basic Map +# Example 1: Basic Map -In this example we see how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library. +In this example, we'll learn how to create a **basic React app** with a map component using the [utopia-ui](https://github.com/utopia-os/utopia-ui) library. -For this example we use Vite to create an empty React app called "1-static-map" +### Setting Up the Project + +We'll use **Vite** to create an empty React app named **"1-static-map"**: ```shell npm create vite@latest 1-static-map -- --template react-ts -``` -We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package +Next, we navigate into our project folder and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package: ```shell cd 1-static-map npm install utopia-ui -``` +``` -We open our `src/App.tsx` and we replace the content with +### Implementing the Map + +Now, we open `src/App.tsx` and replace its content with the following: ```tsx -import { UtopiaMap } from "utopia-ui" +import { UtopiaMap } from "utopia-ui"; function App() { return ( - - - ) + + ); } -export default App +export default App; +``` -``` +### Running the Application -Then we start the development server to check out the result in our browser: +To see our **first map app**, we start the development server: ```shell npm run dev -``` -And can open our first map app in the browser 🙂 +Now, we can open the project in the browser and explore our interactive map! 😊 -In [Example 2](../2-static-layers/) we gonna add some static data to our map +➡️ In [Example 2](../2-static-layers/), we'll add **static data** to our map.