utopia-ui 1.0.3 → 1.0.6
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 +118 -13
- package/dist/Components/Map/MarkerPopup.d.ts +5 -5
- package/dist/Utils/StringFormater.d.ts +1 -0
- package/dist/index.d.ts +6 -3
- package/dist/index.js +35 -105
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,31 +15,136 @@ Map UI is a JavaScript Map Library to create nice and easy to use Maps
|
|
|
15
15
|
|
|
16
16
|
### Getting Started
|
|
17
17
|
|
|
18
|
+
|
|
18
19
|
install via npm
|
|
19
|
-
```
|
|
20
|
+
```bash
|
|
20
21
|
npm install utopia-ui
|
|
21
22
|
```
|
|
22
23
|
|
|
23
|
-
import in your React App
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
import Map from 'utopia-ui'
|
|
24
|
+
then import in your React App
|
|
25
|
+
```jsx
|
|
26
|
+
import UtopiaMap from 'utopia-ui'
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
use the Map UI Component
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
use the [Map UI Component](/docs/utopia-ui/map-components/map)
|
|
30
|
+
```jsx
|
|
31
|
+
<UtopiaMap>
|
|
32
|
+
height='360px'
|
|
33
|
+
width='100vw'
|
|
34
|
+
center={[51.3, 9.6]}
|
|
35
|
+
zoom={6}
|
|
36
|
+
places={places}
|
|
37
|
+
events={events}
|
|
38
|
+
tags = {tags}
|
|
39
|
+
</UtopiaMap>
|
|
33
40
|
```
|
|
41
|
+
You can find some Sample Data (places, events, tags) for test purpose below
|
|
34
42
|
|
|
35
43
|
### Options
|
|
36
44
|
|
|
37
45
|
|
|
38
|
-
Option | Type
|
|
39
|
-
--- | ---
|
|
40
|
-
height
|
|
41
|
-
width
|
|
46
|
+
Option | Type | Default | Required | Description
|
|
47
|
+
--- | --- | --- | --- | ---
|
|
48
|
+
`height` | `string` | - | | height of the map
|
|
49
|
+
`width` | `string` | - | | width of the map
|
|
50
|
+
`center` | `LatLngExpression`| - | | initial map position
|
|
51
|
+
`zoom` | `number` | - | | initial zoom level
|
|
52
|
+
`places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| - | | Array with Items
|
|
53
|
+
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item) | - | | Array with Items
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
### Sample Data
|
|
57
|
+
```jsx
|
|
58
|
+
const places = [{
|
|
59
|
+
"id": 51,
|
|
60
|
+
"name": "Stadtgemüse",
|
|
61
|
+
"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",
|
|
62
|
+
"position": {
|
|
63
|
+
"type": "Point",
|
|
64
|
+
"coordinates": [
|
|
65
|
+
9.632435,
|
|
66
|
+
50.560342
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
"tags": [
|
|
70
|
+
9,
|
|
71
|
+
13
|
|
72
|
+
],
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"id": 166,
|
|
76
|
+
"name": "Weidendom",
|
|
77
|
+
"text": "free camping",
|
|
78
|
+
"position": {
|
|
79
|
+
"type": "Point",
|
|
80
|
+
"coordinates": [
|
|
81
|
+
9.438793,
|
|
82
|
+
50.560112
|
|
83
|
+
]
|
|
84
|
+
},
|
|
85
|
+
"tags": [
|
|
86
|
+
10,
|
|
87
|
+
11
|
|
88
|
+
]
|
|
89
|
+
}];
|
|
90
|
+
|
|
91
|
+
const events = [
|
|
92
|
+
{
|
|
93
|
+
"id": "65bbc003-b6de-4904-b85c-8ab6c92fe0db",
|
|
94
|
+
"date_created": "2022-03-14T10:20:11.534Z",
|
|
95
|
+
"date_updated": "2022-04-05T08:58:38.790Z",
|
|
96
|
+
"name": "Hackathon",
|
|
97
|
+
"text": "still in progress",
|
|
98
|
+
"position": {
|
|
99
|
+
"type": "Point",
|
|
100
|
+
"coordinates": [
|
|
101
|
+
9.5,
|
|
102
|
+
50.62
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
"start": "2022-03-25T12:00:00",
|
|
106
|
+
"end": "2022-05-12T12:00:00",
|
|
107
|
+
"tags": [
|
|
108
|
+
{
|
|
109
|
+
"Tags_id": {
|
|
110
|
+
"color": "#75507B",
|
|
111
|
+
"id": "Docutopia"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"Tags_id": {
|
|
116
|
+
"color": "#3465A4",
|
|
117
|
+
"id": "Coding"
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
|
|
124
|
+
const tags = [
|
|
125
|
+
{
|
|
126
|
+
"id": 9,
|
|
127
|
+
"name": "Gardening",
|
|
128
|
+
"color": "#008e5b"
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"id": 10,
|
|
132
|
+
"name": "Art",
|
|
133
|
+
"color": "#fdc60b"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"id": 11,
|
|
137
|
+
"name": "Nature",
|
|
138
|
+
"color": "#8cbb26"
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"id": 13,
|
|
142
|
+
"name": "Market",
|
|
143
|
+
"color": "#2a71b0"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
42
146
|
|
|
147
|
+
```
|
|
43
148
|
|
|
44
149
|
## Coming Soon
|
|
45
150
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface IMarkerPopupProps {
|
|
3
3
|
item: IMapItem;
|
|
4
|
+
tags: ITag[];
|
|
4
5
|
}
|
|
5
6
|
export interface IMapItem {
|
|
6
7
|
id?: string;
|
|
@@ -11,7 +12,7 @@ export interface IMapItem {
|
|
|
11
12
|
position: IGeometry;
|
|
12
13
|
start?: string;
|
|
13
14
|
end?: string;
|
|
14
|
-
tags
|
|
15
|
+
tags?: string[];
|
|
15
16
|
[key: string]: any;
|
|
16
17
|
}
|
|
17
18
|
export interface IGeometry {
|
|
@@ -19,10 +20,9 @@ export interface IGeometry {
|
|
|
19
20
|
coordinates: number[];
|
|
20
21
|
}
|
|
21
22
|
export interface ITag {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
};
|
|
23
|
+
color: string;
|
|
24
|
+
id: string;
|
|
25
|
+
name: string;
|
|
26
26
|
}
|
|
27
27
|
declare const MarkerPopup: (props: IMarkerPopupProps) => JSX.Element;
|
|
28
28
|
export default MarkerPopup;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const StringFormater: (message: string) => string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import "leaflet/dist/leaflet.css";
|
|
3
|
-
import { IMapItem } from "./Components/Map/MarkerPopup";
|
|
3
|
+
import { IMapItem, ITag } from "./Components/Map/MarkerPopup";
|
|
4
4
|
import "./styles.scss";
|
|
5
5
|
export interface IMapProps {
|
|
6
6
|
height: string;
|
|
7
7
|
width: string;
|
|
8
|
+
center: number[];
|
|
9
|
+
zoom: number;
|
|
8
10
|
places?: IMapItem[];
|
|
9
11
|
events?: IMapItem[];
|
|
12
|
+
tags?: ITag[];
|
|
10
13
|
}
|
|
11
|
-
declare const
|
|
12
|
-
export default
|
|
14
|
+
declare const UtopiaMap: (props: IMapProps) => JSX.Element;
|
|
15
|
+
export default UtopiaMap;
|
package/dist/index.js
CHANGED
|
@@ -78,116 +78,46 @@ var MarkerPopup = function (props) {
|
|
|
78
78
|
" ",
|
|
79
79
|
item.end || ""),
|
|
80
80
|
React__namespace.createElement("p", null, item.text),
|
|
81
|
-
item.tags
|
|
82
|
-
"
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
item.tags &&
|
|
82
|
+
props.tags.map(function (tag) { return (React__namespace.createElement("span", { className: "badge", style: { backgroundColor: tag.color, marginLeft: '.2rem', fontSize: "100%" }, key: tag.id },
|
|
83
|
+
"#",
|
|
84
|
+
tag.name)); })));
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
10.1233030812617,
|
|
98
|
-
50.7884682638985
|
|
99
|
-
]
|
|
100
|
-
},
|
|
101
|
-
"start": "2022-05-17T12:00:00",
|
|
102
|
-
"end": "2022-05-25T12:00:00",
|
|
103
|
-
"tags": [
|
|
104
|
-
{
|
|
105
|
-
"Tags_id": {
|
|
106
|
-
"color": "#75507B",
|
|
107
|
-
"id": "Docutopia"
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
"Tags_id": {
|
|
112
|
-
"color": "#3465A4",
|
|
113
|
-
"id": "Coding"
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
]
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
"id": "65bbc003-b6de-4904-b85c-8ab6c92fe0db",
|
|
120
|
-
"date_created": "2022-03-14T10:20:11.534Z",
|
|
121
|
-
"date_updated": "2022-04-05T08:58:38.790Z",
|
|
122
|
-
"name": "Hackathon",
|
|
123
|
-
"text": "still in progress",
|
|
124
|
-
"position": {
|
|
125
|
-
"type": "Point",
|
|
126
|
-
"coordinates": [
|
|
127
|
-
9.97875748947354,
|
|
128
|
-
51.1204618942726
|
|
129
|
-
]
|
|
130
|
-
},
|
|
131
|
-
"start": "2022-03-25T12:00:00",
|
|
132
|
-
"end": "2022-05-12T12:00:00",
|
|
133
|
-
"tags": [
|
|
134
|
-
{
|
|
135
|
-
"Tags_id": {
|
|
136
|
-
"color": "#75507B",
|
|
137
|
-
"id": "Docutopia"
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
"Tags_id": {
|
|
142
|
-
"color": "#3465A4",
|
|
143
|
-
"id": "Coding"
|
|
144
|
-
}
|
|
87
|
+
___$insertStyle(".leaflet-data-marker {\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}");
|
|
88
|
+
|
|
89
|
+
var UtopiaMap = function (props) {
|
|
90
|
+
var _a;
|
|
91
|
+
var tagMap = new Map((_a = props.tags) === null || _a === void 0 ? void 0 : _a.map(function (key) { return [key.id, key]; }));
|
|
92
|
+
var getTags = function (item) {
|
|
93
|
+
var tags = [];
|
|
94
|
+
item.tags && item.tags.forEach(function (element) {
|
|
95
|
+
if (tagMap.has(element)) {
|
|
96
|
+
tags.push(tagMap.get(element));
|
|
145
97
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
"
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
9.50282340471136,
|
|
159
|
-
51.3348944083875
|
|
160
|
-
]
|
|
161
|
-
},
|
|
162
|
-
"tags": [
|
|
163
|
-
{
|
|
164
|
-
"Tags_id": {
|
|
165
|
-
"color": "#75507B",
|
|
166
|
-
"id": "Docutopia"
|
|
98
|
+
});
|
|
99
|
+
return tags;
|
|
100
|
+
};
|
|
101
|
+
return (React__namespace.createElement(reactLeaflet.MapContainer, { style: { height: props.height, width: props.width }, center: props.center, zoom: props.zoom },
|
|
102
|
+
React__namespace.createElement(reactLeaflet.TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }),
|
|
103
|
+
props.places &&
|
|
104
|
+
props.places.map(function (place) {
|
|
105
|
+
var tags = getTags(place);
|
|
106
|
+
var color1 = "#555";
|
|
107
|
+
var color2 = "RGBA(35, 31, 32, 0.2)";
|
|
108
|
+
if (tags[0]) {
|
|
109
|
+
color1 = tags[0].color;
|
|
167
110
|
}
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
"Tags_id": {
|
|
171
|
-
"color": "#4E9A06",
|
|
172
|
-
"id": "Rainbow"
|
|
111
|
+
if (tags[1]) {
|
|
112
|
+
color2 = tags[1].color;
|
|
173
113
|
}
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
var Map = function (props) {
|
|
181
|
-
return (React__namespace.createElement(reactLeaflet.MapContainer, { style: { height: props.height, width: props.width }, center: [51.3, 9.6], zoom: 8 },
|
|
182
|
-
React__namespace.createElement(reactLeaflet.LayersControl, { position: "topright" },
|
|
183
|
-
React__namespace.createElement(reactLeaflet.TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }),
|
|
184
|
-
React__namespace.createElement(reactLeaflet.LayersControl.Overlay, { checked: true, name: "Places" }, places &&
|
|
185
|
-
(places).map(function (place) { return (React__namespace.createElement(reactLeaflet.Marker, { icon: MarkerIconFactory('circle', '#f18e1c', 'RGBA(35, 31, 32, 0.2)', 'circle-solid'), key: place.id, position: [place.position.coordinates[1], place.position.coordinates[0]] },
|
|
186
|
-
React__namespace.createElement(MarkerPopup, { item: place }))); })),
|
|
187
|
-
React__namespace.createElement(reactLeaflet.LayersControl.Overlay, { checked: true, name: "Events" }, events &&
|
|
188
|
-
(events).map(function (event) { return (React__namespace.createElement(reactLeaflet.Marker, { icon: MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid'), key: event.id, position: [event.position.coordinates[1], event.position.coordinates[0]] },
|
|
189
|
-
React__namespace.createElement(MarkerPopup, { item: event }))); })))));
|
|
114
|
+
return (React__namespace.createElement(reactLeaflet.Marker, { icon: MarkerIconFactory('circle', color1, color2, 'circle-solid'), key: place.id, position: [place.position.coordinates[1], place.position.coordinates[0]] },
|
|
115
|
+
React__namespace.createElement(MarkerPopup, { item: place, tags: tags })));
|
|
116
|
+
}),
|
|
117
|
+
props.events &&
|
|
118
|
+
(props.events).map(function (event) { return (React__namespace.createElement(reactLeaflet.Marker, { icon: MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid'), key: event.id, position: [event.position.coordinates[1], event.position.coordinates[0]] },
|
|
119
|
+
React__namespace.createElement(MarkerPopup, { item: event, tags: getTags(event) }))); })));
|
|
190
120
|
};
|
|
191
121
|
|
|
192
|
-
exports["default"] =
|
|
122
|
+
exports["default"] = UtopiaMap;
|
|
193
123
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/Utils/MarkerIconFactory.ts","../src/Components/Map/MarkerPopup.tsx","../src/sampleData/data.ts","../src/index.tsx"],"sourcesContent":["import * as L from 'leaflet';\n\nconst createSvg = (shape:string, markerColor:string, borderColor:string) => {\n var svgMap = {\n circle: '<svg width=\"32\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307\" fill=\"' + markerColor + '\" /><path d=\"M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237\" fill=\"' + borderColor + '\" opacity=\"1\" /></svg>',\n square: '<svg width=\"33\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179\" fill=\"' + markerColor + '\" /><g opacity=\"1\" transform=\"matrix(1.0714 0 0 -1.0714 -233.22 146.783)\"><path d=\"M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20\" fill=\"'+ borderColor +'\" /></g></svg>',\n star: '<svg width=\"34\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803\" fill=\"' + markerColor + '\" /><g opacity=\".15\" transform=\"matrix(1.0667 0 0 -1.0667 -347.3 97.26)\"><path d=\"M342 89c-.476 0-.951-.181-1.314-.544l-3.305-3.305h-4.673a1.858 1.858 0 01-1.859-1.858v-4.674l-3.305-3.305a1.857 1.857 0 010-2.627l3.305-3.305v-4.674a1.86 1.86 0 011.859-1.859h4.673L341.959 49l4.659 13.849h4.674a1.86 1.86 0 011.859 1.859v4.674l3.305 3.305a1.858 1.858 0 010 2.627l-3.305 3.305v4.674a1.859 1.859 0 01-1.859 1.858h-4.674l-3.304 3.305A1.851 1.851 0 01342 89m0-1a.853.853 0 00.607-.251l3.304-3.305.293-.293h5.088a.86.86 0 00.859-.858v-5.088l3.598-3.598A.852.852 0 00356 74a.85.85 0 00-.251-.606l-3.598-3.598v-5.088a.86.86 0 00-.859-.859h-5.393l-.229-.681-3.702-11.006-3.637 11.001-.227.686h-5.396a.86.86 0 00-.859.859v5.088l-3.598 3.598c-.162.162-.251.377-.251.606s.089.445.251.607l3.598 3.598v5.088a.86.86 0 00.859.858h5.087l3.598 3.598A.853.853 0 00342 88\" fill=\"#231f20\" /></g></svg>',\n penta: '<svg width=\"33\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.872 17.35L9.679 2.993h15.615L33.1 17.35 17.486 44.992z\" fill=\"' + markerColor + '\" /><g opacity=\".15\" transform=\"matrix(1.0769 0 0 -1.0769 -272.731 48.23)\"><path d=\"M276.75 42h-14.5L255 28.668 269.5 3 284 28.668zm-.595-1l6.701-12.323L269.5 5.033l-13.356 23.644L262.845 41z\" fill=\"#231f20\" /></g></svg>'\n };\n return svgMap[shape];\n}\n\nconst addIcon = (icon:string) => {\n switch(icon) {\n case \"circle-solid\":\n return '<svg fill=\"#fff\" style=\"position: relative; top: -38px;left: -1px;\" width=\"13\"xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d=\"M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z\"/></svg>';\n break;\n case \"calendar-days-solid\":\n return '<svg fill=\"#fff\" style=\"position: relative; top: -40px;left: 0px;\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d=\"M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z\"/></svg>';\n break;\n default:\n return \"\";\n } \n}\n\nconst MarkerIconFactory = (shape:string, color1:string, color2:string, icon:string) =>\n{\n return L.divIcon({\n html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`,\n iconAnchor: [17,40],\n popupAnchor: [0,-40],\n iconSize: new L.Point(40, 46),\n className: \"leaflet-data-marker\",\n shadowAnchor: [0, 0]\n });\n}\n\nexport default MarkerIconFactory ;\n","import * as React from 'react'\nimport { Popup } from 'react-leaflet'\n\nexport interface IMarkerPopupProps {\n item: IMapItem;\n}\n\nexport interface IMapItem {\n id?: string,\n date_created?: string,\n date_updated?: string | null,\n name: string,\n text: string,\n position: IGeometry,\n start?: string,\n end?: string,\n tags: ITag[],\n [key: string]:any\n}\n\nexport interface IGeometry {\n type: string;\n coordinates: number[];\n}\n\nexport interface ITag {\n Tags_id :\n {\n color: string;\n id: string;\n }\n}\n\nconst MarkerPopup = (props:IMarkerPopupProps) => {\n const item:IMapItem = props.item;\n return (\n <Popup>\n <b style={{ fontSize: '1.0rem' }}>{item.name}</b>\n\n <p>{item.start || \"\"} {item.end || \"\"}</p>\n\n <p>{item.text}</p>\n {item.tags.map((tag:ITag) => (\n <span key={tag.Tags_id.id}>#{tag.Tags_id.id} </span>\n ))}\n </Popup>\n )\n}\n\nexport default MarkerPopup;\n","import { IMapItem } from \"../Components/Map/MarkerPopup\";\n\nexport const events:IMapItem[] = [\n {\n \"id\": \"1af74f62-9fcc-43c2-b63b-cc320dd4fcda\",\n \"date_created\": \"2022-05-09T21:35:09.250Z\",\n \"date_updated\": null,\n \"name\": \"bla bla\",\n \"text\": \"fsddfsf\",\n \"position\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 10.1233030812617,\n 50.7884682638985\n ]\n },\n \"start\": \"2022-05-17T12:00:00\",\n \"end\": \"2022-05-25T12:00:00\",\n \"tags\": [\n {\n \"Tags_id\": {\n \"color\": \"#75507B\",\n \"id\": \"Docutopia\"\n }\n },\n {\n \"Tags_id\": {\n \"color\": \"#3465A4\",\n \"id\": \"Coding\"\n }\n }\n ]\n },\n {\n \"id\": \"65bbc003-b6de-4904-b85c-8ab6c92fe0db\",\n \"date_created\": \"2022-03-14T10:20:11.534Z\",\n \"date_updated\": \"2022-04-05T08:58:38.790Z\",\n \"name\": \"Hackathon\",\n \"text\": \"still in progress\",\n \"position\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 9.97875748947354,\n 51.1204618942726\n ]\n },\n \"start\": \"2022-03-25T12:00:00\",\n \"end\": \"2022-05-12T12:00:00\",\n \"tags\": [\n {\n \"Tags_id\": {\n \"color\": \"#75507B\",\n \"id\": \"Docutopia\"\n }\n },\n {\n \"Tags_id\": {\n \"color\": \"#3465A4\",\n \"id\": \"Coding\"\n }\n }\n ]\n }\n];\n\nexport const places = [{\n \"id\": \"938529f4-fa0b-4c98-9381-bda13b0c2ac7\",\n \"date_created\": \"2022-04-05T08:20:45.178Z\",\n \"date_updated\": \"2022-04-05T08:57:41.311Z\",\n \"name\": \"Rainbow Crystal Garten\",\n \"text\": \"welcome home\",\n \"position\": {\n \"type\": \"Point\",\n \"coordinates\": [\n 9.50282340471136,\n 51.3348944083875\n ]\n },\n \"tags\": [\n {\n \"Tags_id\": {\n \"color\": \"#75507B\",\n \"id\": \"Docutopia\"\n }\n },\n {\n \"Tags_id\": {\n \"color\": \"#4E9A06\",\n \"id\": \"Rainbow\"\n }\n }\n ]\n}];\n\n","import { TileLayer, MapContainer, Marker, LayersControl } from \"react-leaflet\";\nimport \"leaflet/dist/leaflet.css\";\nimport * as React from \"react\";\nimport MarkerIconFactory from './Utils/MarkerIconFactory';\nimport MarkerPopup, { IMapItem } from \"./Components/Map/MarkerPopup\";\nimport { places, events } from './sampleData/data'\nimport \"./styles.scss\"\n\nexport interface IMapProps {\n height: string,\n width: string,\n places?: IMapItem[],\n events?: IMapItem[]\n}\n\nconst Map = (props: IMapProps) => {\n\n return (\n <MapContainer style={{ height: props.height, width: props.width }} center={[51.3, 9.6]} zoom={8} >\n <LayersControl position=\"topright\">\n <TileLayer\n attribution='© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n />\n <LayersControl.Overlay checked name=\"Places\">\n {places &&\n (places).map((place) => (\n <Marker icon={MarkerIconFactory('circle', '#f18e1c', 'RGBA(35, 31, 32, 0.2)', 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>\n <MarkerPopup item={place} />\n </Marker>\n ))\n }\n </LayersControl.Overlay>\n <LayersControl.Overlay checked name=\"Events\">\n {events &&\n (events).map((event) => (\n <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>\n <MarkerPopup item={event} />\n </Marker>\n ))\n }\n </LayersControl.Overlay>\n </LayersControl>\n </MapContainer>\n\n );\n}\n\nexport default Map;\n"],"names":["L","React","Popup","MapContainer","LayersControl","TileLayer","Marker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Utils/MarkerIconFactory.ts","../src/Components/Map/MarkerPopup.tsx","../src/index.tsx"],"sourcesContent":["import * as L from 'leaflet';\n\nconst createSvg = (shape:string, markerColor:string, borderColor:string) => {\n var svgMap = {\n circle: '<svg width=\"32\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307\" fill=\"' + markerColor + '\" /><path d=\"M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237\" fill=\"' + borderColor + '\" opacity=\"1\" /></svg>',\n square: '<svg width=\"33\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179\" fill=\"' + markerColor + '\" /><g opacity=\"1\" transform=\"matrix(1.0714 0 0 -1.0714 -233.22 146.783)\"><path d=\"M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20\" fill=\"'+ borderColor +'\" /></g></svg>',\n star: '<svg width=\"34\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803\" fill=\"' + markerColor + '\" /><g opacity=\".15\" transform=\"matrix(1.0667 0 0 -1.0667 -347.3 97.26)\"><path d=\"M342 89c-.476 0-.951-.181-1.314-.544l-3.305-3.305h-4.673a1.858 1.858 0 01-1.859-1.858v-4.674l-3.305-3.305a1.857 1.857 0 010-2.627l3.305-3.305v-4.674a1.86 1.86 0 011.859-1.859h4.673L341.959 49l4.659 13.849h4.674a1.86 1.86 0 011.859 1.859v4.674l3.305 3.305a1.858 1.858 0 010 2.627l-3.305 3.305v4.674a1.859 1.859 0 01-1.859 1.858h-4.674l-3.304 3.305A1.851 1.851 0 01342 89m0-1a.853.853 0 00.607-.251l3.304-3.305.293-.293h5.088a.86.86 0 00.859-.858v-5.088l3.598-3.598A.852.852 0 00356 74a.85.85 0 00-.251-.606l-3.598-3.598v-5.088a.86.86 0 00-.859-.859h-5.393l-.229-.681-3.702-11.006-3.637 11.001-.227.686h-5.396a.86.86 0 00-.859.859v5.088l-3.598 3.598c-.162.162-.251.377-.251.606s.089.445.251.607l3.598 3.598v5.088a.86.86 0 00.859.858h5.087l3.598 3.598A.853.853 0 00342 88\" fill=\"#231f20\" /></g></svg>',\n penta: '<svg width=\"33\" height=\"44\" viewBox=\"0 0 35 45\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.872 17.35L9.679 2.993h15.615L33.1 17.35 17.486 44.992z\" fill=\"' + markerColor + '\" /><g opacity=\".15\" transform=\"matrix(1.0769 0 0 -1.0769 -272.731 48.23)\"><path d=\"M276.75 42h-14.5L255 28.668 269.5 3 284 28.668zm-.595-1l6.701-12.323L269.5 5.033l-13.356 23.644L262.845 41z\" fill=\"#231f20\" /></g></svg>'\n };\n return svgMap[shape];\n}\n\nconst addIcon = (icon:string) => {\n switch(icon) {\n case \"circle-solid\":\n return '<svg fill=\"#fff\" style=\"position: relative; top: -38px;left: -1px;\" width=\"13\"xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d=\"M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z\"/></svg>';\n break;\n case \"calendar-days-solid\":\n return '<svg fill=\"#fff\" style=\"position: relative; top: -40px;left: 0px;\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d=\"M160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32zM0 192H448V464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192zM64 304C64 312.8 71.16 320 80 320H112C120.8 320 128 312.8 128 304V272C128 263.2 120.8 256 112 256H80C71.16 256 64 263.2 64 272V304zM192 304C192 312.8 199.2 320 208 320H240C248.8 320 256 312.8 256 304V272C256 263.2 248.8 256 240 256H208C199.2 256 192 263.2 192 272V304zM336 256C327.2 256 320 263.2 320 272V304C320 312.8 327.2 320 336 320H368C376.8 320 384 312.8 384 304V272C384 263.2 376.8 256 368 256H336zM64 432C64 440.8 71.16 448 80 448H112C120.8 448 128 440.8 128 432V400C128 391.2 120.8 384 112 384H80C71.16 384 64 391.2 64 400V432zM208 384C199.2 384 192 391.2 192 400V432C192 440.8 199.2 448 208 448H240C248.8 448 256 440.8 256 432V400C256 391.2 248.8 384 240 384H208zM320 432C320 440.8 327.2 448 336 448H368C376.8 448 384 440.8 384 432V400C384 391.2 376.8 384 368 384H336C327.2 384 320 391.2 320 400V432z\"/></svg>';\n break;\n default:\n return \"\";\n } \n}\n\nconst MarkerIconFactory = (shape:string, color1:string, color2:string, icon:string) =>\n{\n return L.divIcon({\n html: `${createSvg(shape, color1, color2)}${addIcon(icon)}`,\n iconAnchor: [17,40],\n popupAnchor: [0,-40],\n iconSize: new L.Point(40, 46),\n className: \"leaflet-data-marker\",\n shadowAnchor: [0, 0]\n });\n}\n\nexport default MarkerIconFactory ;\n","import * as React from 'react'\nimport { Popup } from 'react-leaflet'\n\nexport interface IMarkerPopupProps {\n item: IMapItem,\n tags: ITag[]\n}\n\nexport interface IMapItem {\n id?: string,\n date_created?: string,\n date_updated?: string | null,\n name: string,\n text: string,\n position: IGeometry,\n start?: string,\n end?: string,\n tags?: string[],\n [key: string]:any\n}\n\nexport interface IGeometry {\n type: string;\n coordinates: number[];\n}\n\nexport interface ITag {\n\n color: string;\n id: string;\n name: string;\n \n}\n\nconst MarkerPopup = (props:IMarkerPopupProps) => {\n const item:IMapItem = props.item;\n\n\n return (\n <Popup>\n <b style={{ fontSize: '1.0rem' }}>{item.name}</b>\n\n <p>{item.start || \"\"} {item.end || \"\"}</p>\n\n <p>{item.text}</p>\n {item.tags&&\n props.tags.map((tag:ITag) => (\n <span className=\"badge\" style={{backgroundColor: tag.color,marginLeft: '.2rem', fontSize: \"100%\"}} key={tag.id}>#{tag.name}</span>\n ))}\n </Popup>\n )\n}\n\nexport default MarkerPopup;\n","import { TileLayer, MapContainer, Marker } from \"react-leaflet\";\nimport \"leaflet/dist/leaflet.css\";\nimport * as React from \"react\";\nimport MarkerIconFactory from './Utils/MarkerIconFactory';\nimport MarkerPopup, { IMapItem, ITag } from \"./Components/Map/MarkerPopup\";\nimport \"./styles.scss\"\n\nexport interface IMapProps {\n height: string,\n width: string,\n center: number[],\n zoom: number,\n places?: IMapItem[],\n events?: IMapItem[],\n tags?: ITag[],\n}\n\nconst UtopiaMap = (props: IMapProps) => {\n let tagMap = new Map(props.tags?.map(key => [key.id, key]));\n\n const getTags = (item: IMapItem) => {\n let tags: ITag[] = [];\n item.tags && item.tags.forEach(element => {\n if (tagMap.has(element)) { tags.push(tagMap.get(element)!) };\n });\n return tags;\n }\n\n\n return (\n <MapContainer style={{ height: props.height, width: props.width }} center={props.center} zoom={props.zoom} >\n <TileLayer\n attribution='© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\" />\n\n {props.places &&\n props.places.map((place: IMapItem) => {\n let tags = getTags(place);\n let color1 = \"#555\";\n let color2 = \"RGBA(35, 31, 32, 0.2)\";\n if (tags[0]) {\n color1 = tags[0].color;\n }\n if (tags[1]) {\n color2 = tags[1].color;\n }\n\n\n return (\n <Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>\n <MarkerPopup item={place} tags={tags} />\n </Marker>\n )\n\n }\n\n )\n }\n\n {props.events &&\n (props.events).map((event: IMapItem) => (\n <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>\n <MarkerPopup item={event} tags={getTags(event)} />\n </Marker>\n ))\n }\n\n </MapContainer>\n\n );\n}\n\nexport default UtopiaMap;\n\n"],"names":["L","React","Popup","MapContainer","TileLayer","Marker"],"mappings":"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"}
|
package/package.json
CHANGED