diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 1b8660e5..dd5eb66c 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -1,89 +1,76 @@
-import { TileLayer, MapContainer, Marker } from "react-leaflet";
+import { TileLayer, MapContainer } 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'
+import AddButton from "./AddButton";
+import { Layer, LayerProps } from "./Layer";
export interface MapProps {
- height: string,
- width: string,
- center: LatLng,
- zoom: number,
+ height?: string,
+ width?: string,
+ center?: LatLng,
+ zoom?: number,
places?: Item[],
events?: Item[],
tags?: Tag[],
+ children?: React.ReactNode
}
-const UtopiaMap = (props: MapProps) => {
+function UtopiaMap(this: any, props: MapProps) {
+ // init / set default values
let center: LatLng = new LatLng(50.6, 9.5);
- if (props.center) center = props.center;
+ if (props.center)
+ center = props.center;
let zoom: number = 10;
- if (props.zoom) zoom = props.zoom;
+ if (props.zoom)
+ zoom = props.zoom;
let height: string = "400px";
- if (props.height) height = props.height;
+ 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;
- }
+ if (props.width)
+ width = props.width;
+ const layers: LayerProps[] = [];
+ // all the layers
+
+ if(props.events) layers.push({ name: 'event', menuIcon: 'CalendarIcon', menuText: 'add new event', menuColor: '#f9a825', markerIcon: 'calendar-days-solid', markerShape: 'square', markerDefaultColor: '#777', data: props.events });
+ if(props.places) layers.push({ name: 'place', menuIcon: 'LocationMarkerIcon', menuText: 'add new place', menuColor: '#2E7D32', markerIcon: 'circle-solid', markerShape: 'circle', markerDefaultColor: '#777', data: props.places });
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 (
-
-
-
- )
- })
- }
+ <>
+
+ <>
+
+
+ {layers &&
+ layers.map(layer => (
+
+ ))
+
+ }
+ {console.log(props.children)}
+
+
+
+
+
- {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 (
-
-
-
- )
- })
- }
-
-
);
}
diff --git a/src/Utils/DynamicHeroIcon.tsx b/src/Utils/DynamicHeroIcon.tsx
new file mode 100644
index 00000000..e5aa9111
--- /dev/null
+++ b/src/Utils/DynamicHeroIcon.tsx
@@ -0,0 +1,22 @@
+// DynamicHeroIcon.tsx
+// Simple Dynamic HeroIcons Component for React (typescript / tsx)
+// by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)
+
+import { FC } from 'react'
+import * as HIcons from '@heroicons/react/solid'
+import * as React from 'react'
+
+const DynamicHeroIcon: FC<{icon: string}> = (props) => {
+ const {...icons} = HIcons
+ // @ts-ignore
+ const TheIcon: JSX.Element = icons[props.icon]
+
+ return (
+ <>
+ {/* @ts-ignore */}
+
+
+ )
+}
+
+export default DynamicHeroIcon
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 16a5b475..e950216d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,4 +7,4 @@
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 85bbdd4a..bae84799 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,2 +1,3 @@
import { UtopiaMap, Item, Tag } from './Components/Map/UtopiaMap'
-export { UtopiaMap, Item, Tag };
\ No newline at end of file
+import { Layer } from './Components/Map/Layer';
+export { UtopiaMap, Item, Tag, Layer };
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 31471085..2e2f6638 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -23,3 +23,13 @@ export interface Tag {
name: string;
}
+
+
+export interface Layer {
+ name : string,
+ menuIcon: string,
+ menuColor: string,
+ menuText: string,
+ markerIcon: string,
+ markerShape: string
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 071fe9fe..6dc8fee3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,9 +4,15 @@ module.exports = {
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
- extend: {},
+ extend: {
+ zIndex: {
+ '500': '500',
+ }
+ },
},
- plugins: [],
+ plugins: [
+ require("daisyui")
+ ],
content: ['./src/**/*.{js,jsx,ts,tsx}'],