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

README

Browse Source
This commit is contained in:
Anton Tranelis 2024-10-13 23:12:28 +02:00
parent 5321c56669
commit 5c68069940
1 changed files with 27 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -29,15 +29,6 @@ install via npm
npm install utopia-ui npm install utopia-ui
``` ```
## Examples
[Moos Map](https://github.com/utopia-os/moos-map)
## Demo
[Moos Map](https://moos-map.de)
## Map Component ## Map Component
The map shows various Layers (places, events, profiles ...) of Irems at their respective position whith nice and informative Popups. The map shows various Layers (places, events, profiles ...) of Irems at their respective position whith nice and informative Popups.
@ -45,15 +36,15 @@ Tags, colors and clusters help to retain the overview.
use the Map UI Component use the Map UI Component
```jsx ```jsx
import { UtopiaMap, Layer, Tags } from 'utopia-ui' import { UtopiaMap, Layer} from 'utopia-ui'
<UtopiaMap zoom={5} height='calc(100vh - 64px)' width="100%"> <UtopiaMap zoom={5} height='100dvh' width="100dvw">
<Layer <Layer
name='events' name='events'
menuIcon='CalendarIcon' menuIcon='CalendarIcon'
menuText='add new event' menuText='add new event'
menuColor='#f9a825' menuColor='#f9a825'
markerIcon='calendar-days-solid' markerIcon='calendar'
markerShape='square' markerShape='square'
markerDefaultColor='#777' markerDefaultColor='#777'
data={events} /> data={events} />
@ -62,18 +53,17 @@ import { UtopiaMap, Layer, Tags } from 'utopia-ui'
menuIcon='MapPinIcon' menuIcon='MapPinIcon'
menuText='add new place' menuText='add new place'
menuColor='#2E7D32' menuColor='#2E7D32'
markerIcon='circle-solid' markerIcon='point'
markerShape='circle' markerShape='circle'
markerDefaultColor='#777' markerDefaultColor='#777'
data={places} /> data={places} />
<Tags data={tags}></Tags>
</UtopiaMap> </UtopiaMap>
``` ```
You can find some Sample Data (places, events, tags) for test in the `SamleData/` folder You can find some Sample Data (places, events, tags) for test in the `SamleData/` folder
### Options ### Map Options
Option | Type | Default | Required | Description Option | Type | Default | Required | Description
--- | --- | --- | --- | --- --- | --- | --- | --- | ---
@ -82,7 +72,11 @@ You can find some Sample Data (places, events, tags) for test in the `SamleData/
`center` | `LatLng` |`[50.6, 9.5]` | No | initial map position `center` | `LatLng` |`[50.6, 9.5]` | No | initial map position
`zoom` | `number` |`10` | No | initial zoom level `zoom` | `number` |`10` | No | initial zoom level
### Layer Options
Option | Type | Default | Required | Description
--- | --- | --- | --- | ---
| ... | | | |
## Join the community ## Join the community
@ -90,4 +84,4 @@ You can find some Sample Data (places, events, tags) for test in the `SamleData/
*We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.* *We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.*
[https://t.me/utopiaOS](https://t.me/utopiaOS) [https://t.me/UtopiaMap](https://t.me/UtopiaMap)