antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-12 23:36:00 +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
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 (
<UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
</UtopiaMap>
)
<UtopiaMap center={[50.6, 9.5]} zoom={5} height="100dvh" width="100dvw" />
);
}
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.