diff --git a/README.md b/README.md index e5e6a72f..bfa64b09 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # Utopia UI [![npm version](https://img.shields.io/npm/v/utopia-ui.svg)](https://www.npmjs.com/package/utopia-ui) -Reuseable React Components to build mapping apps for all kinds of communities with focus of real life action, local connection and positiv impact. +Reuseable React Components to build mapping apps with focus of real life action, local connection and positiv impact. Check [utopia-os.org](https://utopia-os.org) for more information -*This Library is in early alpha stage. You are very welcome to participate in the development* +*In early 2021, we developed a Django-based Proof of Concept, which can be found @ [new.docutopia.de](https://new.docutopia.de). This map can be edited freely you can register to create an account and place them on the map.* -*A Django-based Proof of Concept can be found @ [new.docutopia.de](https://new.docutopia.de). This map can be edited freely you can register to create an account and place them on the map.* - -Utopia UI is the approach to create a Open Source Library of JavaScript Components which should useful maps and apps to all kind of projects and communities. +Utopia UI is the approach to create a Open Source Library of JavaScript Components which should bring useful maps and apps to all kind of projects and communities. ## Map UI Component @@ -91,9 +89,9 @@ const tags = [ `width` | `string` |`'100vw'` | No | width of the map `center` | `LatLng` |`[50.6, 9.5]` | No | initial map position `zoom` | `number` |`10` | No | initial zoom level - `places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items - `events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items - `tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | `[]` | No | Array with Tags + `places` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items + `events` | [`Item[]`](https://utopia-os.org/docs/utopia-ui/map-components/item)| `[]` | No | Array with Items + `tags` | [`Tag[]`](https://utopia-os.org/docs/utopia-ui/map-components/tag) | `[]` | No | Array with Tags ## Coming Soon @@ -107,6 +105,8 @@ const tags = [ ## Join the community - *We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.* +*This Library is in early alpha stage. You are very welcome to participate in the development* + +*We are looking for Web Developer, UX Designer, Community Manager, Visionaries, Artists, etc. who like to support this Vision.* [https://t.me/utopiaOS](https://t.me/utopiaOS) \ No newline at end of file diff --git a/src/Components/Map/MarkerPopup.tsx b/src/Components/Map/MarkerPopup.tsx deleted file mode 100644 index 22d3b200..00000000 --- a/src/Components/Map/MarkerPopup.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import * as React from 'react' -import { Popup } from 'react-leaflet' -import { Item, Tag } from '../../types' - -export interface MarkerPopupProps { - item: Item, - tags: Tag[] -} - -const MarkerPopup = (props: MarkerPopupProps) => { - const item: Item = props.item; - const tags: Tag[] = props.tags; - - return ( - - {item.name} - {item.start && item.end && -
-
- - - - {new Date(item.start).toISOString().substring(0, 10) || ""} -
-
- - -
-
- - - - {new Date(item.end).toISOString().substring(0, 10) || ""} -
-
- } - -

-

- - {item.tags && - tags.map((tag: Tag) => ( - #{tag.name} - )) - } -

- - ) -} - -export default MarkerPopup; - - -function replaceURLs(message: string): 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.css b/src/index.css index e4c1748e..16a5b475 100644 --- a/src/index.css +++ b/src/index.css @@ -2,8 +2,9 @@ @tailwind components; @tailwind utilities; + .leaflet-data-marker { - 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; - background-position: 6px 32px; - } \ No newline at end of file + 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; + background-position: 6px 32px; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 9051f1aa..85bbdd4a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,92 +1,2 @@ -import { TileLayer, MapContainer, Marker } from "react-leaflet"; -import "leaflet/dist/leaflet.css"; -import * as React from "react"; -import MarkerIconFactory from './Utils/MarkerIconFactory'; -import MarkerPopup from "./Components/Map/MarkerPopup"; -import { Item, Tag } from "./types" -import "./index.css" -import { LatLng } from "leaflet"; -import MarkerClusterGroup from 'react-leaflet-cluster' - -export interface MapProps { - height: string, - width: string, - center: LatLng, - zoom: number, - places?: Item[], - events?: Item[], - tags?: Tag[], -} - -const UtopiaMap = (props: MapProps) => { - let center: LatLng = new LatLng(50.6, 9.5); - if (props.center) center = props.center; - let zoom: number = 10; - if (props.zoom) zoom = props.zoom; - let height: string = "400px"; - if (props.height) height = props.height; - let width: string = "100vw"; - if (props.width) width = props.width; - - let tagMap = new Map(props.tags?.map(key => [key.id, key])); - - const getTags = (item: Item) => { - let tags: Tag[] = []; - item.tags && item.tags.forEach(element => { - if (tagMap.has(element)) { tags.push(tagMap.get(element)!) }; - }); - return tags; - } - - - return ( - - - - {props.places && - props.places.map((place: Item) => { - let tags = getTags(place); - 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 ( - - - - ) - }) - } - - {props.events && - 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 { UtopiaMap, Item, Tag }; - +import { UtopiaMap, Item, Tag } from './Components/Map/UtopiaMap' +export { UtopiaMap, Item, Tag }; \ No newline at end of file