utopia-ui 3.0.1 → 3.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -20
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ Utopia UIs mission is to provide open source building blocks to create beautiful
|
|
|
10
10
|
|
|
11
11
|
The building blocks are designed to allow different networks and communities to assemble their map and app for their specific needs and purpose.
|
|
12
12
|
|
|
13
|
-
Utopia Game is the
|
|
13
|
+
Utopia Game is one of the apps made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at [utopia-game.org](https://utopia-game.org/) or see the code in the [repository](https://github.com/utopia-os/utopia-game)
|
|
14
14
|
|
|
15
15
|
## Features
|
|
16
16
|
|
|
@@ -23,44 +23,108 @@ Utopia Game is the first app made with Utopia UI. It is an attempt to use gamifi
|
|
|
23
23
|
|
|
24
24
|
## Getting Started
|
|
25
25
|
|
|
26
|
+
### Basic Map
|
|
27
|
+
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.
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
For this tutorial we use Vite to create an empty React app called "utopia-static-map"
|
|
30
|
+
|
|
31
|
+
```shell
|
|
32
|
+
npm create vite@latest utopia-static-map -- --template react
|
|
30
33
|
```
|
|
31
34
|
|
|
32
|
-
|
|
33
|
-
The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.
|
|
35
|
+
We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
```shell
|
|
38
|
+
cd utopia-static-map
|
|
39
|
+
npm install utopia-ui
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
We open our `src/App.jsx` and we replace the content with
|
|
36
43
|
|
|
37
|
-
use the Map UI Component
|
|
38
44
|
```jsx
|
|
39
|
-
import { UtopiaMap
|
|
45
|
+
import { UtopiaMap } from "utopia-ui"
|
|
46
|
+
|
|
47
|
+
function App() {
|
|
48
|
+
return (
|
|
49
|
+
<UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
|
|
50
|
+
</UtopiaMap>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default App
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Then we start the development server to check out the result in our browser:
|
|
59
|
+
|
|
60
|
+
```shell
|
|
61
|
+
npm run dev
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
And can open our first map app in the browser 🙂
|
|
65
|
+
|
|
66
|
+
### Static Layers
|
|
67
|
+
|
|
68
|
+
Now we add some static layer.
|
|
69
|
+
|
|
70
|
+
First we put some sample data in a new file called `src/sample-data.js`
|
|
71
|
+
|
|
72
|
+
```javascript
|
|
73
|
+
export const places = [{
|
|
74
|
+
"id": 51,
|
|
75
|
+
"name": "Stadtgemüse",
|
|
76
|
+
"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",
|
|
77
|
+
"position": { "type": "Point", "coordinates": [9.632435, 50.560342] },
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"id": 166,
|
|
81
|
+
"name": "Weidendom",
|
|
82
|
+
"text": "free camping",
|
|
83
|
+
"position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
|
|
84
|
+
}];
|
|
85
|
+
|
|
86
|
+
export const events = [
|
|
87
|
+
{
|
|
88
|
+
"id": 423,
|
|
89
|
+
"name": "Hackathon",
|
|
90
|
+
"text": "still in progress",
|
|
91
|
+
"position": { "type": "Point", "coordinates": [10.5, 51.62] },
|
|
92
|
+
"start": "2022-03-25T12:00:00",
|
|
93
|
+
"end": "2022-05-12T12:00:00",
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
We want to create two Layers. One we want to call *Places* and the other *Events*
|
|
40
99
|
|
|
41
|
-
|
|
100
|
+
we import our sample data to the `src/App.jsx`
|
|
101
|
+
|
|
102
|
+
```jsx
|
|
103
|
+
import { events, places } from "./sample-data"
|
|
104
|
+
```
|
|
105
|
+
and than we create our two `<Layer>` inside of our `<UtopiaMap>` component
|
|
106
|
+
```jsx
|
|
107
|
+
<UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
|
|
42
108
|
<Layer
|
|
43
109
|
name='events'
|
|
44
|
-
menuIcon='CalendarIcon'
|
|
45
|
-
menuText='add new event'
|
|
46
|
-
menuColor='#f9a825'
|
|
47
110
|
markerIcon='calendar'
|
|
48
111
|
markerShape='square'
|
|
49
|
-
markerDefaultColor='#
|
|
112
|
+
markerDefaultColor='#700'
|
|
50
113
|
data={events} />
|
|
51
114
|
<Layer
|
|
52
115
|
name='places'
|
|
53
|
-
menuIcon='MapPinIcon'
|
|
54
|
-
menuText='add new place'
|
|
55
|
-
menuColor='#2E7D32'
|
|
56
116
|
markerIcon='point'
|
|
57
117
|
markerShape='circle'
|
|
58
|
-
markerDefaultColor='#
|
|
118
|
+
markerDefaultColor='#007'
|
|
59
119
|
data={places} />
|
|
60
120
|
</UtopiaMap>
|
|
121
|
+
|
|
61
122
|
```
|
|
62
|
-
You can find some Sample Data (places, events, tags) for test in the `SamleData/` folder
|
|
63
123
|
|
|
124
|
+
## Map Component
|
|
125
|
+
The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.
|
|
126
|
+
|
|
127
|
+
Tags, colors and clusters help to retain the overview.
|
|
64
128
|
|
|
65
129
|
|
|
66
130
|
### Map Options
|
|
@@ -90,4 +154,4 @@ You can find some Sample Data (places, events, tags) for test in the `SamleData/
|
|
|
90
154
|
|
|
91
155
|
<a href="https://opencollective.com/utopia-project">
|
|
92
156
|
<img width="300" src="https://opencollective.com/utopia-project/donate/button@2x.png?color=blue" />
|
|
93
|
-
</a>
|
|
157
|
+
</a>
|
package/dist/index.js
CHANGED
|
@@ -2413,6 +2413,8 @@ var addIcon = function (icon) {
|
|
|
2413
2413
|
return '<svg class="group-icon" stroke="#fff" fill="#fff" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="1.6em" width="1.6em" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM1.49 15.326a.78.78 0 0 1-.358-.442 3 3 0 0 1 4.308-3.516 6.484 6.484 0 0 0-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 0 1-2.07-.655ZM16.44 15.98a4.97 4.97 0 0 0 2.07-.654.78.78 0 0 0 .357-.442 3 3 0 0 0-4.308-3.517 6.484 6.484 0 0 1 1.907 3.96 2.32 2.32 0 0 1-.026.654ZM18 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM5.304 16.19a.844.844 0 0 1-.277-.71 5 5 0 0 1 9.947 0 .843.843 0 0 1-.277.71A6.975 6.975 0 0 1 10 18a6.974 6.974 0 0 1-4.696-1.81Z"></path></svg>';
|
|
2414
2414
|
case "puzzle":
|
|
2415
2415
|
return '<svg class="group-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" width="1.6em" height="1.6em"><path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z" /></svg>';
|
|
2416
|
+
case "staff-snake":
|
|
2417
|
+
return '<svg class="staff-snake-icon" stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 384 512" height="1.6em" width="1.6em" xmlns="http://www.w3.org/2000/svg"><path d="M222.6 43.2l-.1 4.8H288c53 0 96 43 96 96s-43 96-96 96H248V160h40c8.8 0 16-7.2 16-16s-7.2-16-16-16H248 220l-4.5 144H256c53 0 96 43 96 96s-43 96-96 96H240V384h16c8.8 0 16-7.2 16-16s-7.2-16-16-16H213l-3.1 99.5L208.5 495l0 1c-.3 8.9-7.6 16-16.5 16s-16.2-7.1-16.5-16l0-1-1-31H136c-22.1 0-40-17.9-40-40s17.9-40 40-40h36l-1-32H152c-53 0-96-43-96-96c0-47.6 34.6-87.1 80-94.7V256c0 8.8 7.2 16 16 16h16.5L164 128H136 122.6c-9 18.9-28.3 32-50.6 32H56c-30.9 0-56-25.1-56-56S25.1 48 56 48h8 8 89.5l-.1-4.8L161 32c0-.7 0-1.3 0-1.9c.5-16.6 14.1-30 31-30s30.5 13.4 31 30c0 .6 0 1.3 0 1.9l-.4 11.2zM64 112a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"></path></svg>';
|
|
2416
2418
|
default:
|
|
2417
2419
|
return "";
|
|
2418
2420
|
}
|
|
@@ -3330,7 +3332,7 @@ function styleInject(css, ref) {
|
|
|
3330
3332
|
}
|
|
3331
3333
|
}
|
|
3332
3334
|
|
|
3333
|
-
var css_248z$2 = ".leaflet-container {\n text-align: left;\n background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n background-repeat: no-repeat;\n background-attachment: fixed;\n background-position: 50% 80%; \n }\n \n input {\n box-sizing: border-box;\n }\n \n textarea {\n box-sizing: border-box;\n }\n \n .leaflet-control-attribution {\n display: none;\n }\n \n .leaflet-control-locate {\n display: none;\n }\n\n .leaflet-data-marker {\n \n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n background-position: 6px 32px;\n }\n \n .crosshair-cursor-enabled {\n cursor: crosshair;\n }\n \n .leaflet-container {\n cursor: inherit;\n }\n \n .calendar-icon {\n position: relative;\n top: -35px;\n left: 10px;\n width: 13px;\n }\n \n .user-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .circle-icon {\n position: relative;\n top: -33px;\n left: 10px;\n width: 13px;\n }\n\n .fire-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .tree-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n\n .music-icon {\n position: relative;\n top: -35px;\n left: 4px;\n width: 24px;\n }\n\n .quest-icon {\n position: relative;\n top: -34px;\n left: 4px;\n width: 24px;\n }\n\n .drum-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n\n \n .compass-icon {\n position: relative;\n top: -36.5px;\n left: 4px;\n width: 24px;\n }\n\n .group-icon {\n position: relative;\n top: -37px;\n left: 4px;\n width: 24px;\n }\n\n .liebevoll-jetzt-icon{\n position: relative;\n top: -35px;\n left: 4px;\n width: 24px;\n }\n\n \n .leaflet-popup-scrolled {\n overflow-x: hidden;\n }\n\n .leaflet-popup-content-wrapper, .leaflet-popup-tip{\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n\n }\n\n .leaflet-tooltip {\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n border-width: 0px;\n border-radius: 1em;\n transition: opacity 500ms;\n transition-delay: 50ms;\n }\n\n .leaflet-tooltip-top::before {\n border-top-color: var(--fallback-b1,oklch(var(--b1)/1));\n }\n\n .marker-cluster span {\n color: #000;\n }";
|
|
3335
|
+
var css_248z$2 = ".leaflet-container {\n text-align: left;\n background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n background-repeat: no-repeat;\n background-attachment: fixed;\n background-position: 50% 80%; \n }\n \n input {\n box-sizing: border-box;\n }\n \n textarea {\n box-sizing: border-box;\n }\n \n .leaflet-control-attribution {\n display: none;\n }\n \n .leaflet-control-locate {\n display: none;\n }\n\n .leaflet-data-marker {\n \n background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n background-position: 6px 32px;\n }\n \n .crosshair-cursor-enabled {\n cursor: crosshair;\n }\n \n .leaflet-container {\n cursor: inherit;\n }\n \n .calendar-icon {\n position: relative;\n top: -35px;\n left: 10px;\n width: 13px;\n }\n \n .user-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .circle-icon {\n position: relative;\n top: -33px;\n left: 10px;\n width: 13px;\n }\n\n .fire-icon {\n position: relative;\n top: -36px;\n left: 10px;\n width: 13px;\n }\n\n .tree-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n\n .music-icon {\n position: relative;\n top: -35px;\n left: 4px;\n width: 24px;\n }\n\n .quest-icon {\n position: relative;\n top: -34px;\n left: 4px;\n width: 24px;\n }\n\n .drum-icon {\n position: relative;\n top: -38px;\n left: 4px;\n width: 24px;\n }\n\n \n .compass-icon {\n position: relative;\n top: -36.5px;\n left: 4px;\n width: 24px;\n }\n\n .group-icon {\n position: relative;\n top: -37px;\n left: 4px;\n width: 24px;\n }\n\n .liebevoll-jetzt-icon{\n position: relative;\n top: -35px;\n left: 4px;\n width: 24px;\n }\n\n .staff-snake-icon {\n position: relative;\n top: -36px;\n left: 4px;\n width: 24px;\n }\n \n .leaflet-popup-scrolled {\n overflow-x: hidden;\n }\n\n .leaflet-popup-content-wrapper, .leaflet-popup-tip{\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n\n }\n\n .leaflet-tooltip {\n background-color: var(--fallback-b1,oklch(var(--b1)/1));\n color: var(--fallback-bc,oklch(var(--bc)/1));\n border-width: 0px;\n border-radius: 1em;\n transition: opacity 500ms;\n transition-delay: 50ms;\n }\n\n .leaflet-tooltip-top::before {\n border-top-color: var(--fallback-b1,oklch(var(--b1)/1));\n }\n\n .marker-cluster span {\n color: #000;\n }";
|
|
3334
3336
|
styleInject(css_248z$2);
|
|
3335
3337
|
|
|
3336
3338
|
function AddButton(_a) {
|