diff --git a/README.md b/README.md index dd276d86..f67f8b0d 100644 --- a/README.md +++ b/README.md @@ -61,15 +61,9 @@ const places = [{ "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 - ] + "coordinates": [9.632435, 50.560342] }, - "tags": [ - 9, - 13 - ], + "tags": [9,13], }, { "id": 166, @@ -77,47 +71,23 @@ const places = [{ "text": "free camping", "position": { "type": "Point", - "coordinates": [ - 9.438793, - 50.560112 - ] + "coordinates": [9.438793, 50.560112] }, - "tags": [ - 10, - 11 - ] + "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 - ] + "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" - } - } - ] + "tags": [10] } ] diff --git a/package-lock.json b/package-lock.json index e77d3449..3cb6984c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,24 +1,23 @@ { "name": "utopia-ui", - "version": "1.0.5", + "version": "1.0.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "1.0.5", + "version": "1.0.6", "license": "ISC", "dependencies": { "leaflet": "^1.8.0", "react-leaflet": "^4.0.0", - "react-leaflet-markercluster": "^3.0.0-rc1" + "react-leaflet-cluster": "^2.0.0" }, "devDependencies": { "@types/leaflet": "^1.7.11", "@types/react": "^18.0.14", "@types/react-dom": "^18.0.5", "@types/react-leaflet": "^2.8.2", - "@types/react-leaflet-markercluster": "^3.0.0", "babel-core": "^6.26.3", "babel-runtime": "^6.26.0", "react": "^17.0.2", @@ -71,15 +70,6 @@ "@types/geojson": "*" } }, - "node_modules/@types/leaflet.markercluster": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz", - "integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==", - "dev": true, - "dependencies": { - "@types/leaflet": "*" - } - }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -116,17 +106,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-leaflet-markercluster": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz", - "integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==", - "dev": true, - "dependencies": { - "@types/leaflet": "*", - "@types/leaflet.markercluster": "*", - "@types/react": "*" - } - }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -994,43 +973,18 @@ "react-dom": "^18.0.0" } }, - "node_modules/react-leaflet-markercluster": { - "version": "3.0.0-rc1", - "resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz", - "integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==", + "node_modules/react-leaflet-cluster": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz", + "integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==", "dependencies": { - "@react-leaflet/core": "^1.0.2", - "leaflet": "^1.6.0", - "leaflet.markercluster": "^1.4.1", - "react-leaflet": "^3.0.0" + "leaflet.markercluster": "^1.5.3" }, "peerDependencies": { - "leaflet": "^1.6.0", - "leaflet.markercluster": "^1.4.1", - "react-leaflet": "^3.0.0" - } - }, - "node_modules/react-leaflet-markercluster/node_modules/@react-leaflet/core": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz", - "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==", - "peerDependencies": { - "leaflet": "^1.7.1", - "react": "^17.0.1", - "react-dom": "^17.0.1" - } - }, - "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", - "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==", - "dependencies": { - "@react-leaflet/core": "^1.1.1" - }, - "peerDependencies": { - "leaflet": "^1.7.1", - "react": "^17.0.1", - "react-dom": "^17.0.1" + "leaflet": "^1.8.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "react-leaflet": "^4.0.0" } }, "node_modules/react-leaflet/node_modules/@react-leaflet/core": { @@ -1357,15 +1311,6 @@ "@types/geojson": "*" } }, - "@types/leaflet.markercluster": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.0.tgz", - "integrity": "sha512-2Qje1CGibdaCZaeCtEycQ/TpX4fsiK81NTmkdHotn0dL/4M1QvmeXiiLAHLnv1GrZBn7DY6mzedBsHmq5REKHA==", - "dev": true, - "requires": { - "@types/leaflet": "*" - } - }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1402,17 +1347,6 @@ "@types/react": "*" } }, - "@types/react-leaflet-markercluster": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0.tgz", - "integrity": "sha512-yJpaoo7sOexrnniD6McdOOJF8FXEzA5G6s+bBk8Ed7XzhqcLVb84MXCbY/3ed81xY2DYQG4PHTOaXhIEHOxXqg==", - "dev": true, - "requires": { - "@types/leaflet": "*", - "@types/leaflet.markercluster": "*", - "@types/react": "*" - } - }, "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -2108,31 +2042,12 @@ } } }, - "react-leaflet-markercluster": { - "version": "3.0.0-rc1", - "resolved": "https://registry.npmjs.org/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz", - "integrity": "sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ==", + "react-leaflet-cluster": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-leaflet-cluster/-/react-leaflet-cluster-2.0.0.tgz", + "integrity": "sha512-tREjHM3mlNwj7sJdV+i0QSYbrOeju3RtPThfe7ik0T2oH56OffgMCC+mAjLOR+OrQXLIPktJpFYHpNNZOEtyUA==", "requires": { - "@react-leaflet/core": "^1.0.2", - "leaflet": "^1.6.0", - "leaflet.markercluster": "^1.4.1", - "react-leaflet": "^3.0.0" - }, - "dependencies": { - "@react-leaflet/core": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz", - "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==", - "requires": {} - }, - "react-leaflet": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.5.tgz", - "integrity": "sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg==", - "requires": { - "@react-leaflet/core": "^1.1.1" - } - } + "leaflet.markercluster": "^1.5.3" } }, "readdirp": { diff --git a/package.json b/package.json index a2665264..b7c75111 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@types/react": "^18.0.14", "@types/react-dom": "^18.0.5", "@types/react-leaflet": "^2.8.2", - "@types/react-leaflet-markercluster": "^3.0.0", "babel-core": "^6.26.3", "babel-runtime": "^6.26.0", "react": "^17.0.2", @@ -37,6 +36,6 @@ "dependencies": { "leaflet": "^1.8.0", "react-leaflet": "^4.0.0", - "react-leaflet-markercluster": "^3.0.0-rc1" + "react-leaflet-cluster": "^2.0.0" } } diff --git a/src/Components/Map/MarkerPopup.tsx b/src/Components/Map/MarkerPopup.tsx index 1f142c8a..0e8b9ff2 100644 --- a/src/Components/Map/MarkerPopup.tsx +++ b/src/Components/Map/MarkerPopup.tsx @@ -1,39 +1,16 @@ import * as React from 'react' import { Popup } from 'react-leaflet' +import { Item, Tag } from '../../types' -export interface IMarkerPopupProps { - item: IMapItem, - tags: ITag[] +export interface MarkerPopupProps { + item: Item, + tags: Tag[] } -export interface IMapItem { - id?: string, - date_created?: string, - date_updated?: string | null, - name: string, - text: string, - position: IGeometry, - start?: string, - end?: string, - tags?: string[], - [key: string]:any -} +const MarkerPopup = (props:MarkerPopupProps) => { + const item:Item = props.item; + const tags:Tag[] = props.tags; -export interface IGeometry { - type: string; - coordinates: number[]; -} - -export interface ITag { - - color: string; - id: string; - name: string; - -} - -const MarkerPopup = (props:IMarkerPopupProps) => { - const item:IMapItem = props.item; return ( @@ -44,8 +21,8 @@ const MarkerPopup = (props:IMarkerPopupProps) => {

{item.text}

{item.tags&& - props.tags.map((tag:ITag) => ( - #{tag.name} + tags.map((tag:Tag) => ( + #{tag.name} ))} ) diff --git a/src/Utils/StringFormater.ts b/src/Utils/StringFormater.ts deleted file mode 100644 index 5b65b012..00000000 --- a/src/Utils/StringFormater.ts +++ /dev/null @@ -1,19 +0,0 @@ -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 13b20f61..c76def23 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,25 +2,26 @@ 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 MarkerPopup from "./Components/Map/MarkerPopup"; +import { Item, Tag } from "./types" import "./styles.scss" -export interface IMapProps { +export interface MapProps { height: string, width: string, center: number[], zoom: number, - places?: IMapItem[], - events?: IMapItem[], - tags?: ITag[], + places?: Item[], + events?: Item[], + tags?: Tag[], } -const UtopiaMap = (props: IMapProps) => { + +const UtopiaMap = (props: MapProps) => { let tagMap = new Map(props.tags?.map(key => [key.id, key])); - const getTags = (item: IMapItem) => { - let tags: ITag[] = []; + const getTags = (item: Item) => { + let tags: Tag[] = []; item.tags && item.tags.forEach(element => { if (tagMap.has(element)) { tags.push(tagMap.get(element)!) }; }); @@ -33,11 +34,10 @@ const UtopiaMap = (props: IMapProps) => { - {props.places && - props.places.map((place: IMapItem) => { + props.places.map((place: Item) => { let tags = getTags(place); - let color1 = "#555"; + let color1 = "#666"; let color2 = "RGBA(35, 31, 32, 0.2)"; if (tags[0]) { color1 = tags[0].color; @@ -45,30 +45,36 @@ const UtopiaMap = (props: IMapProps) => { if (tags[1]) { color2 = tags[1].color; } - - return ( ) - - } - - ) + }) } {props.events && - (props.events).map((event: IMapItem) => ( - - - - )) + props.events.map((event: Item) => { + let tags = getTags(event); + let color1 = "#666"; + let color2 = "RGBA(35, 31, 32, 0.2)"; + if (tags[0]) { + color1 = tags[0].color; + } + if (tags[1]) { + color2 = tags[1].color; + } + return ( + + + + ) + }) } ); } -export default UtopiaMap; +export { UtopiaMap, Item, Tag }; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..94244dd2 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,28 @@ +import { Component } from 'react' // Switch to 'react' if you use it +import { MarkerClusterGroupOptions } from 'leaflet' + + export interface Item { + id: number, + date_created?: string, + date_updated?: string | null, + name: string, + text: string, + position: Geometry, + start?: string, + end?: string, + tags?: number[], + [key: string]:any + } + + export interface Geometry { + type: string; + coordinates: number[]; + } + + export interface Tag { + + color: string; + id: number; + name: string; + + }