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

Update README.md

Browse Source
This commit is contained in:
antontranelis 2025-01-24 12:45:10 +00:00 committed by GitHub
parent 61ef7f5617
commit 7e06d7a16a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 1 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
README.md
View File

@ -26,103 +26,8 @@ It is the base of [Utopia Map](https://github.com/utopia-os/utopia-map) and [Uto
## Getting Started
### Basic Map
In this tutorial we learn how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
See our [`/exampes`](/examples)
For this tutorial 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.jsx` and we replace the content with
```jsx
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 🙂
### Static Layers
Now we add some static content in two layer.
First we put some sample data in a new file called `src/sample-data.js`
```javascript
export const places = [{
"id": 51,
"name": "Stadtgemüse",
"text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
"position": { "type": "Point", "coordinates": [9.632435, 50.560342] },
},
{
"id": 166,
"name": "Weidendom",
"text": "free camping",
"position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
}];
export const events = [
{
"id": 423,
"name": "Hackathon",
"text": "still in progress",
"position": { "type": "Point", "coordinates": [10.5, 51.62] },
"start": "2022-03-25T12:00:00",
"end": "2022-05-12T12:00:00",
}
]
```
We want to create two Layers. One we want to call *Places* and the other *Events*
we import our sample data to the `src/App.jsx`
```jsx
import { events, places } from "./sample-data"
```
and than we create our two `<Layer>` inside of our `<UtopiaMap>` component
```jsx
<UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
<Layer
name='events'
markerIcon='calendar'
markerShape='square'
markerDefaultColor='#700'
data={events} />
<Layer
name='places'
markerIcon='point'
markerShape='circle'
markerDefaultColor='#007'
data={places} />
</UtopiaMap>
```
## Components
![Utopia UI Components](Components.svg)