diff --git a/README.md b/README.md index 9ee6f1b2..6db5e922 100644 --- a/README.md +++ b/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} ``` +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 diff --git a/package-lock.json b/package-lock.json index e080ff38..e77d3449 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/src/Components/Map/MarkerPopup.tsx b/src/Components/Map/MarkerPopup.tsx index 9af7463c..1f142c8a 100644 --- a/src/Components/Map/MarkerPopup.tsx +++ b/src/Components/Map/MarkerPopup.tsx @@ -34,6 +34,8 @@ export interface ITag { const MarkerPopup = (props:IMarkerPopupProps) => { const item:IMapItem = props.item; + + return ( {item.name} @@ -43,7 +45,7 @@ const MarkerPopup = (props:IMarkerPopupProps) => {

{item.text}

{item.tags&& props.tags.map((tag:ITag) => ( - #{tag.name} + #{tag.name} ))} ) diff --git a/src/Utils/StringFormater.ts b/src/Utils/StringFormater.ts new file mode 100644 index 00000000..5b65b012 --- /dev/null +++ b/src/Utils/StringFormater.ts @@ -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 '' + url + '' + }); + + var mailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi; + message = message.replace(mailRegex, function (mail) { + return '' + mail + '' + }); + + return message; + } \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index f18ec65d..13b20f61 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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='© OpenStreetMap 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 ( - - - + return ( + + + + ) + + } + ) - } - ) - } - - {props.events && - (props.events).map((event: IMapItem) => ( - - - - )) - } - + {props.events && + (props.events).map((event: IMapItem) => ( + + + + )) + } );