diff --git a/src/Components/Map/Popup.tsx b/src/Components/Map/Popup.tsx
new file mode 100644
index 00000000..ef815f40
--- /dev/null
+++ b/src/Components/Map/Popup.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { Popup as LeafletPopup} from 'react-leaflet'
+import { Item, Tag } from '../../types'
+import { replaceURLs } from '../../Utils/ReplaceURLs'
+
+export interface UtopiaPopupProps {
+ item: Item,
+ tags: Tag[]
+}
+
+const Popup = (props: UtopiaPopupProps) => {
+ 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 {Popup};
+
+
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
new file mode 100644
index 00000000..1b8660e5
--- /dev/null
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -0,0 +1,92 @@
+import { TileLayer, MapContainer, Marker } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+import * as React from "react";
+import MarkerIconFactory from '../../Utils/MarkerIconFactory';
+import {Popup} from "./Popup";
+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 };
+
diff --git a/src/Utils/ReplaceURLs.ts b/src/Utils/ReplaceURLs.ts
new file mode 100644
index 00000000..73401b42
--- /dev/null
+++ b/src/Utils/ReplaceURLs.ts
@@ -0,0 +1,19 @@
+export 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