colorful popups

src/Components/Map/MarkerPopup.tsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { Popup } from 'react-leaflet'
 
 export interface IMarkerPopupProps {
-  item: IMapItem;
+  item: IMapItem,
+  tags: ITag[]
 }
 
 export interface IMapItem {
@@ -14,7 +15,7 @@ export interface IMapItem {
   position: IGeometry,
   start?: string,
   end?: string,
-  tags: ITag[],
+  tags?: string[],
   [key: string]:any
 }
 
@@ -24,11 +25,11 @@ export interface IGeometry {
 }
 
 export interface ITag {
-  Tags_id :
+
-  {
     color: string;
     id: string;
-  }
+    name: string;
+  
 }
 
 const MarkerPopup = (props:IMarkerPopupProps) => {
@@ -40,8 +41,9 @@ const MarkerPopup = (props:IMarkerPopupProps) => {
       <p>{item.start || ""} {item.end || ""}</p>
 
       <p>{item.text}</p>
-        {item.tags.map((tag:ITag) => (
+        {item.tags&&
-          <span key={tag.Tags_id.id}>#{tag.Tags_id.id} </span>
+        props.tags.map((tag:ITag) => (
+          <span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem'}} key={tag.id}>#{tag.name}</span>
         ))}
     </Popup>
   )

src/index.tsx

@@ -1,8 +1,8 @@
-import { TileLayer, MapContainer, Marker, LayersControl } from "react-leaflet";
+import { TileLayer, MapContainer, Marker } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
 import MarkerIconFactory from './Utils/MarkerIconFactory';
-import MarkerPopup, { IMapItem } from "./Components/Map/MarkerPopup";
+import MarkerPopup, { IMapItem, ITag } from "./Components/Map/MarkerPopup";
 import "./styles.scss"
 
 export interface IMapProps {
@@ -12,39 +12,63 @@ export interface IMapProps {
     zoom: number,
     places?: IMapItem[],
     events?: IMapItem[],
-    children?: any,
+    tags?: ITag[],
-    data?: any,
 }
 
-const Map = (props: IMapProps) => {
+const UtopiaMap = (props: IMapProps) => {
+    let tagMap = new Map(props.tags?.map(key => [key.id, key]));
+
+    const getTags = (item: IMapItem) => {
+        let tags: ITag[] = [];
+        item.tags && item.tags.forEach(element => {
+            if (tagMap.has(element)) { tags.push(tagMap.get(element)!) };
+        });
+        return tags;
+    }
+
+
     return (
         <MapContainer style={{ height: props.height, width: props.width }} center={props.center} zoom={props.zoom} >
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-            <LayersControl position="topright">
+
-                <LayersControl.Overlay checked name="Places">
+            {props.places &&
-                    {props.places &&
+                props.places.map((place: IMapItem) => {
-                        (props.places).map((place: IMapItem) => (
+                    let tags = getTags(place);
-                            <Marker icon={MarkerIconFactory('circle', '#f18e1c', 'RGBA(35, 31, 32, 0.2)', 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
+                    let color1 = "#555";
-                                <MarkerPopup item={place} />
+                    let color2 = "RGBA(35, 31, 32, 0.2)";
-                            </Marker>
+                    if (tags[0]) {
-                        ))
+                        color1 = tags[0].color;
                     }
-                </LayersControl.Overlay>
+                    if (tags[1]) {
-                <LayersControl.Overlay checked name="Events">
+                        color2 = tags[1].color;
-                    {props.events &&
-                        (props.events).map((event: IMapItem) => (
-                            <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
-                                <MarkerPopup item={event} />
-                            </Marker>
-                        ))
                     }
-                </LayersControl.Overlay>
+
-            </LayersControl>
+
+                    return (
+                        <Marker icon={MarkerIconFactory('circle', color1, color2, 'circle-solid')} key={place.id} position={[place.position.coordinates[1], place.position.coordinates[0]]}>
+                            <MarkerPopup item={place} tags={tags} />
+                        </Marker>
+                    )
+
+                }
+
+                )
+            }
+
+            {props.events &&
+                (props.events).map((event: IMapItem) => (
+                    <Marker icon={MarkerIconFactory('square', '#6d398b', 'RGBA(35, 31, 32, 0.2)', 'calendar-days-solid')} key={event.id} position={[event.position.coordinates[1], event.position.coordinates[0]]}>
+                        <MarkerPopup item={event} tags={getTags(event)} />
+                    </Marker>
+                ))
+            }
+
         </MapContainer>
 
     );
 }
 
-export default Map;
+export default UtopiaMap;
+

src/sampleData/data.ts

@@ -1,94 +0,0 @@
-import { IMapItem } from "../Components/Map/MarkerPopup";
-
-export const events:IMapItem[] = [
-    {
-        "id": "1af74f62-9fcc-43c2-b63b-cc320dd4fcda",
-        "date_created": "2022-05-09T21:35:09.250Z",
-        "date_updated": null,
-        "name": "bla bla",
-        "text": "fsddfsf",
-        "position": {
-            "type": "Point",
-            "coordinates": [
-                10.1233030812617,
-                50.7884682638985
-            ]
-        },
-        "start": "2022-05-17T12:00:00",
-        "end": "2022-05-25T12:00:00",
-        "tags": [
-            {
-                "Tags_id": {
-                    "color": "#75507B",
-                    "id": "Docutopia"
-                }
-            },
-            {
-                "Tags_id": {
-                    "color": "#3465A4",
-                    "id": "Coding"
-                }
-            }
-        ]
-    },
-    {
-        "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.97875748947354,
-                51.1204618942726
-            ]
-        },
-        "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"
-                }
-            }
-        ]
-    }
-];
-
-export const places = [{
-    "id": "938529f4-fa0b-4c98-9381-bda13b0c2ac7",
-    "date_created": "2022-04-05T08:20:45.178Z",
-    "date_updated": "2022-04-05T08:57:41.311Z",
-    "name": "Rainbow Crystal Garten",
-    "text": "welcome home",
-    "position": {
-        "type": "Point",
-        "coordinates": [
-            9.50282340471136,
-            51.3348944083875
-        ]
-    },
-    "tags": [
-        {
-            "Tags_id": {
-                "color": "#75507B",
-                "id": "Docutopia"
-            }
-        },
-        {
-            "Tags_id": {
-                "color": "#4E9A06",
-                "id": "Rainbow"
-            }
-        }
-    ]
-}];
-