mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
43 lines
992 B
Markdown
43 lines
992 B
Markdown
# 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.
|
|
|
|
For this example we use Vite to create an empty React app called "utopia-static-map"
|
|
|
|
```shell
|
|
npm create vite@latest utopia-static-map -- --template react
|
|
```
|
|
|
|
We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
|
|
|
|
```shell
|
|
cd utopia-static-map
|
|
npm install utopia-ui
|
|
```
|
|
|
|
We open our `src/App.tsx` and we replace the content with
|
|
|
|
```tsx
|
|
import { UtopiaMap } from "utopia-ui"
|
|
|
|
function App() {
|
|
return (
|
|
<UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
|
|
</UtopiaMap>
|
|
)
|
|
}
|
|
|
|
export default App
|
|
|
|
```
|
|
|
|
Then we start the development server to check out the result in our browser:
|
|
|
|
```shell
|
|
npm run dev
|
|
```
|
|
|
|
And can open our first map app in the browser 🙂
|
|
|
|
In [Tutorial 2](../2-static-layers/) we gonna add some static data to our map
|