mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
added sample data
This commit is contained in:
parent
edf82f4d76
commit
03eff7f57f
95
README.md
95
README.md
@ -35,8 +35,10 @@ use the [Map UI Component](/docs/utopia-ui/map-components/map)
|
||||
zoom={6}
|
||||
places={places}
|
||||
events={events}
|
||||
tags = {tags}
|
||||
</UtopiaMap>
|
||||
```
|
||||
You can find some Sample Data for test purpose below
|
||||
|
||||
### Options
|
||||
|
||||
@ -51,6 +53,99 @@ use the [Map UI Component](/docs/utopia-ui/map-components/map)
|
||||
`events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item) | - | | Array with Items
|
||||
|
||||
|
||||
### Sample Data
|
||||
```jsx
|
||||
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
|
||||
]
|
||||
},
|
||||
"tags": [
|
||||
9,
|
||||
13
|
||||
],
|
||||
},
|
||||
{
|
||||
"id": 166,
|
||||
"name": "Weidendom",
|
||||
"text": "free camping",
|
||||
"position": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
9.438793,
|
||||
50.560112
|
||||
]
|
||||
},
|
||||
"tags": [
|
||||
10,
|
||||
11
|
||||
]
|
||||
}];
|
||||
|
||||
const events = [
|
||||
{
|
||||
"id": "65bbc003-b6de-4904-b85c-8ab6c92fe0db",
|
||||
"date_created": "2022-03-14T10:20:11.534Z",
|
||||
"date_updated": "2022-04-05T08:58:38.790Z",
|
||||
"name": "Hackathon",
|
||||
"text": "still in progress",
|
||||
"position": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
9.5,
|
||||
50.62
|
||||
]
|
||||
},
|
||||
"start": "2022-03-25T12:00:00",
|
||||
"end": "2022-05-12T12:00:00",
|
||||
"tags": [
|
||||
{
|
||||
"Tags_id": {
|
||||
"color": "#75507B",
|
||||
"id": "Docutopia"
|
||||
}
|
||||
},
|
||||
{
|
||||
"Tags_id": {
|
||||
"color": "#3465A4",
|
||||
"id": "Coding"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const tags = [
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Gardening",
|
||||
"color": "#008e5b"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "Art",
|
||||
"color": "#fdc60b"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"name": "Nature",
|
||||
"color": "#8cbb26"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"name": "Market",
|
||||
"color": "#2a71b0"
|
||||
}
|
||||
]
|
||||
|
||||
```
|
||||
|
||||
## Coming Soon
|
||||
|
||||
* Profile UI Component
|
||||
|
||||
170
package-lock.json
generated
170
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.5",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "utopia-ui",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.5",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"leaflet": "^1.8.0",
|
||||
@ -21,26 +21,16 @@
|
||||
"@types/react-leaflet-markercluster": "^3.0.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"rollup": "^2.75.7",
|
||||
"rollup-plugin-sass": "^1.2.12",
|
||||
"rollup-plugin-typescript2": "^0.32.1",
|
||||
"typescript": "^4.7.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0.tgz",
|
||||
"integrity": "sha512-SQQ5DCQIaLzvslN6wCXs5OWqtlvk1Ubv2n5d7zTM8SDl9hM5Rr2wVy7/nOCIY958D75/ovhq6ZoSvT7GLCX6sg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.8.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/pluginutils": {
|
||||
@ -851,7 +841,6 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -968,26 +957,28 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
|
||||
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
"object-assign": "^4.1.1",
|
||||
"scheduler": "^0.20.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
@ -1029,33 +1020,6 @@
|
||||
"react-dom": "^17.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/react": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
|
||||
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"scheduler": "^0.20.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "17.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/react-leaflet": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
|
||||
@ -1069,14 +1033,14 @@
|
||||
"react-dom": "^17.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet-markercluster/node_modules/scheduler": {
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
|
||||
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
"node_modules/react-leaflet/node_modules/@react-leaflet/core": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0.tgz",
|
||||
"integrity": "sha512-SQQ5DCQIaLzvslN6wCXs5OWqtlvk1Ubv2n5d7zTM8SDl9hM5Rr2wVy7/nOCIY958D75/ovhq6ZoSvT7GLCX6sg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.8.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
@ -1215,11 +1179,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
|
||||
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
@ -1360,12 +1325,6 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0.tgz",
|
||||
"integrity": "sha512-SQQ5DCQIaLzvslN6wCXs5OWqtlvk1Ubv2n5d7zTM8SDl9hM5Rr2wVy7/nOCIY958D75/ovhq6ZoSvT7GLCX6sg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@rollup/pluginutils": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
|
||||
@ -2037,8 +1996,7 @@
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"peer": true
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
|
||||
},
|
||||
"os-homedir": {
|
||||
"version": "1.0.2",
|
||||
@ -2116,20 +2074,22 @@
|
||||
"dev": true
|
||||
},
|
||||
"react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
|
||||
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0"
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
"object-assign": "^4.1.1",
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-leaflet": {
|
||||
@ -2138,6 +2098,14 @@
|
||||
"integrity": "sha512-qJJvoCNe12XHSWVUwhXYmMObPoSYy8h/hn0aDNvcBuq3O8zmVI5S2RdabhaDg/iWMCJ2jbCWZWtIU5VtztO9sg==",
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.0.tgz",
|
||||
"integrity": "sha512-SQQ5DCQIaLzvslN6wCXs5OWqtlvk1Ubv2n5d7zTM8SDl9hM5Rr2wVy7/nOCIY958D75/ovhq6ZoSvT7GLCX6sg==",
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-leaflet-markercluster": {
|
||||
@ -2157,27 +2125,6 @@
|
||||
"integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==",
|
||||
"requires": {}
|
||||
},
|
||||
"react": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
|
||||
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "17.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
|
||||
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-leaflet": {
|
||||
"version": "3.2.5",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz",
|
||||
@ -2185,16 +2132,6 @@
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
|
||||
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2302,11 +2239,12 @@
|
||||
}
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"version": "0.20.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
|
||||
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0"
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
|
||||
@ -34,6 +34,8 @@ export interface ITag {
|
||||
|
||||
const MarkerPopup = (props:IMarkerPopupProps) => {
|
||||
const item:IMapItem = props.item;
|
||||
|
||||
|
||||
return (
|
||||
<Popup>
|
||||
<b style={{ fontSize: '1.0rem' }}>{item.name}</b>
|
||||
@ -43,7 +45,7 @@ const MarkerPopup = (props:IMarkerPopupProps) => {
|
||||
<p>{item.text}</p>
|
||||
{item.tags&&
|
||||
props.tags.map((tag:ITag) => (
|
||||
<span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem'}} key={tag.id}>#{tag.name}</span>
|
||||
<span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem', fontSize: "100%"}} key={tag.id}>#{tag.name}</span>
|
||||
))}
|
||||
</Popup>
|
||||
)
|
||||
|
||||
19
src/Utils/StringFormater.ts
Normal file
19
src/Utils/StringFormater.ts
Normal file
@ -0,0 +1,19 @@
|
||||
export const StringFormater = (message:string) => {
|
||||
if(!message) return "";
|
||||
|
||||
var urlRegex = /(^| )(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,10}(:[0-9]{1,10})?(\/.*)?$/gm;
|
||||
message = message.replace(urlRegex, function (url) {
|
||||
var hyperlink = url.replace(' ','');
|
||||
if (!hyperlink.match('^https?:\/\/')) {
|
||||
hyperlink = 'http://' + hyperlink;
|
||||
}
|
||||
return '<a href="' + hyperlink + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
|
||||
});
|
||||
|
||||
var mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi;
|
||||
message = message.replace(mailRegex, function (mail) {
|
||||
return '<a href="mailto:' + mail + '">' + mail + '</a>'
|
||||
});
|
||||
|
||||
return message;
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { TileLayer, MapContainer, Marker } from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import * as React from "react";
|
||||
import MarkerIconFactory from './Utils/MarkerIconFactory';
|
||||
import MarkerClusterGroup from 'react-leaflet-markercluster';
|
||||
import MarkerPopup, { IMapItem, ITag } from "./Components/Map/MarkerPopup";
|
||||
import "./styles.scss"
|
||||
|
||||
@ -33,38 +34,37 @@ const UtopiaMap = (props: IMapProps) => {
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
|
||||
{props.places &&
|
||||
props.places.map((place: IMapItem) => {
|
||||
let tags = getTags(place);
|
||||
let color1 = "#555";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
}
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
{props.places &&
|
||||
props.places.map((place: IMapItem) => {
|
||||
let tags = getTags(place);
|
||||
let color1 = "#555";
|
||||
let color2 = "RGBA(35, 31, 32, 0.2)";
|
||||
if (tags[0]) {
|
||||
color1 = tags[0].color;
|
||||
}
|
||||
if (tags[1]) {
|
||||
color2 = tags[1].color;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
|
||||
<MarkerPopup item={place} tags={tags} />
|
||||
</Marker>
|
||||
return (
|
||||
<Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
|
||||
<MarkerPopup item={place} tags={tags} />
|
||||
</Marker>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
{props.events &&
|
||||
(props.events).map((event: IMapItem) => (
|
||||
<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]]}>
|
||||
<MarkerPopup item={event} tags={getTags(event)} />
|
||||
</Marker>
|
||||
))
|
||||
}
|
||||
|
||||
{props.events &&
|
||||
(props.events).map((event: IMapItem) => (
|
||||
<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]]}>
|
||||
<MarkerPopup item={event} tags={getTags(event)} />
|
||||
</Marker>
|
||||
))
|
||||
}
|
||||
</MapContainer>
|
||||
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user