antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(docu): update README.md (#143)

Browse Source 
* Update README.md

* Update examples/1-basic-map/README.md

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
This commit is contained in:
Anton Tranelis 2025-02-20 14:12:12 +00:00 committed by GitHub
parent 656fbb3ffc
commit f8a0f36d54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
examples/1-basic-map/README.md
View File

@ -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 ```shell
npm create vite@latest 1-static-map -- --template react-ts 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 ```shell
cd 1-static-map cd 1-static-map
npm install utopia-ui 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 ```tsx
import { UtopiaMap } from "utopia-ui" import { UtopiaMap } from "utopia-ui";
function App() { function App() {
return ( return (
<UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw"> <UtopiaMap center={[50.6, 9.5]} zoom={5} height="100dvh" width="100dvw" />
</UtopiaMap> );
)
} }
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 ```shell
npm run dev 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.