antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

colorful popups

Browse Source
This commit is contained in:
AT 2022-07-10 16:39:08 +02:00
parent f48920cc03
commit edf82f4d76
3 changed files with 57 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Components/Map/MarkerPopup.tsx
View File

@ -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) => (
<span key={tag.Tags_id.id}>#{tag.Tags_id.id} </span>
{item.tags&&
props.tags.map((tag:ITag) => (
<span className="badge" style={{backgroundColor: tag.color,marginLeft: '.2rem'}} key={tag.id}>#{tag.name}</span>
))}
</Popup>
)

72
src/index.tsx
View File

@ -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,
data?: any,
tags?: ITag[],
}
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).map((place: IMapItem) => (
<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]]}>
<MarkerPopup item={place} />
</Marker>
))
{props.places &&
props.places.map((place: IMapItem) => {
let tags = getTags(place);
let color1 = "#555";
let color2 = "RGBA(35, 31, 32, 0.2)";
if (tags[0]) {
color1 = tags[0].color;
}
</LayersControl.Overlay>
<LayersControl.Overlay checked name="Events">
{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>
))
if (tags[1]) {
color2 = tags[1].color;
}
</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;

94
src/sampleData/data.ts
View File

@ -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"
}
}
]
}];