Skip to content

Commit bb58f83

Browse files
author
jannik brack
committed
New Description off Application; Map ToolBar; SideBar can be closed
1 parent d710dc2 commit bb58f83

File tree

8 files changed

+114
-46
lines changed

8 files changed

+114
-46
lines changed

‎mc_meta.json‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -73,26 +73,29 @@
7373
"url": "https://mapcomponents.github.io/react-map-components-apps/powerplants/"
7474
}
7575
]
76-
},"MultiTab": {
77-
"name": "MultiTab",
78-
"title": "Multi-Tab Demo",
79-
"description": "This application is one way to split visual and information. You can open a table which contains all the information you can see on the map. Looking for an object but can't find it in one of the pages? Just click on it the programm will find it for you!",
80-
"i18n": {
81-
"de": {
82-
"title": "Multi-Tab Demo",
83-
"description": "Diese Anwendung ist eine Möglichkeit, visuelle Objekte und Informationen aufzuteilen. Sie können eine Tabelle öffnen, die alle Informationen, von den Objekten, die Sie auf der Karte sehen können, enthält. Suchen Sie ein Objekt, können es aber auf einer der Seiten nicht finden? Klicken Sie einfach auf das Objekt, das sie suchen. Das Programm findet es für Sie!"
84-
}
8576
},
86-
"tags": [],
87-
"category": "",
88-
"type": "application",
89-
"components": ["MlGeoJsonLayer"],
90-
"thumbnail": "https://mapcomponents.github.io/react-map-components-apps/assets/thumbnails/MultiTab.png",
91-
"demos": [
92-
{
93-
"name": "Demo",
94-
"url": "https://mapcomponents.github.io/react-map-components-apps/multi_tab/"
95-
}
96-
]
97-
}
77+
"MultiTab": {
78+
"name": "MultiTab",
79+
"title": "Multi-Tab Demo",
80+
"description": "This application combines graphical and text-based information of objects that are represented in a table and map: Open a table with all the information visible on the map. Looking for an object and can't find it? Just click on it - the program will show it to you!",
81+
"i18n": {
82+
"de": {
83+
"title": "Multi-Tab Demo",
84+
"description": "Diese Anwendung kombiniert grafische und textbasierte Informationen von Objekten, die in einer Tabelle und einer Karte dargestellt werden: Öffnen Sie eine Tabelle mit allen Informationen, die auf der Karte sichtbar sind. Sie suchen ein Objekt und können es nicht finden? Klicken Sie es einfach an - das Programm zeigt es Ihnen an!"
85+
}
86+
},
87+
"tags": [],
88+
"category": "",
89+
"type": "application",
90+
"components": [
91+
"MlGeoJsonLayer"
92+
],
93+
"thumbnail": "https://mapcomponents.github.io/react-map-components-apps/assets/thumbnails/MultiTab.png",
94+
"demos": [
95+
{
96+
"name": "Demo",
97+
"url": "https://mapcomponents.github.io/react-map-components-apps/multi_tab/"
98+
}
99+
]
100+
}
98101
}

‎multi_tab/src/App.tsx‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,71 @@ import "./App.css";
22
import {MapLibreMap} from "@mapcomponents/react-maplibre";
33
import LayerManager from "./components/LayerManager.jsx";
44
import {Button} from "@mui/material";
5+
import Toolbar from "@mui/material/Toolbar";
6+
import AppBar from "@mui/material/AppBar";
7+
import Box from "@mui/material/Box";
8+
import {useState} from "react";
59

610
function App() {
11+
const [openSidebar, setOpenSidebar] = useState(false);
12+
const ghPagesUrl = 'https://mapcomponents.github.io/react-map-components-maplibre/';
13+
const logoUrl = ghPagesUrl + 'assets/WG-MapComponents-Logo_rgb.svg';
14+
715

816
const openTable = () => {
917
const newUrl = `${window.location.href}#/table`;
1018
window.open(newUrl, "_blank", "popup");
1119
}
1220
return (
1321
<>
22+
<AppBar
23+
sx={{
24+
minHeight: '62px',
25+
width: '100vw',
26+
position: 'absolute',
27+
backgroundColor: 'white',
28+
zIndex: 1300,
29+
top: 0,
30+
}}
31+
>
32+
<Toolbar disableGutters>
33+
<Box
34+
sx={{
35+
marginLeft: '25px',
36+
display: {xs: 'none', md: 'flex'},
37+
flexGrow: {md: '30'},
38+
}}
39+
>
40+
<img
41+
src={logoUrl}
42+
style={{width: '100%', maxWidth: '250px'}}
43+
alt={"MapComponentsLogo"}
44+
/>
45+
<Button
46+
sx={{
47+
left: 'calc(100% - 520px)',
48+
color: '#238ee5'
49+
}}
50+
disabled={openSidebar}
51+
variant='outlined'
52+
onClick={() => {
53+
setOpenSidebar(!openSidebar);
54+
}}
55+
>
56+
Open Sidebar
57+
</Button>
58+
59+
<Button
60+
sx={{
61+
left: 'calc(100% - 510px)',
62+
color: '#238ee5'
63+
}}
64+
variant='outlined'
65+
onClick={() => openTable()}
66+
>show table</Button>
67+
</Box>
68+
</Toolbar>
69+
</AppBar>
1470
<MapLibreMap
1571
options={{
1672
style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
@@ -19,15 +75,7 @@ function App() {
1975
}}
2076
style={{position: "absolute", top: 0, bottom: 0, left: 0, right: 0}}
2177
/>
22-
<LayerManager/>
23-
<Button
24-
sx={{
25-
left: '93%'
26-
}}
27-
variant='contained'
28-
color="primary"
29-
onClick={() => openTable()}
30-
>show table</Button>
78+
<LayerManager setOpenSidebar={setOpenSidebar} openSidebar={openSidebar} />
3179
</>
3280
);
3381
}

‎multi_tab/src/components/DataTableManager.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export default function DataTableManager() {
88
const data = useContext(DataContext);
99

1010
const [visibleIDs, setVisibleIDs] = useState([]);
11-
const [selected, setSelected] = useState(null);
11+
const [selected, setSelected] = useState();
1212
const [selectedLayer, setSelectedLayer] = useState("all");
13-
const [tableSplit, setTableSplit] = useState(false);
13+
const [tableSplit, setTableSplit] = useState(true);
1414
/*const [showOnlyVisibleObjects, setShowOnlyVisibleObjects] = useState(true);*/
1515

1616
useEffect(() => {
@@ -38,10 +38,6 @@ export default function DataTableManager() {
3838
}, []);
3939

4040

41-
//sorts all Objects which is Layer codependent
42-
useEffect(() => {
43-
}, [visibleIDs, selectedLayer, data]);
44-
4541
if (!data) {
4642
return <div>Loading data...</div>;
4743
}

‎multi_tab/src/components/LayerManager.jsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const getSelectedFeature = (data, id) => {
4848
};
4949

5050

51-
export default function LayerManager() {
51+
export default function LayerManager(props) {
5252
const mapHook = useMap();
5353

5454
const [selected, setSelected] = useState();
@@ -57,6 +57,7 @@ export default function LayerManager() {
5757

5858
const data = useContext(DataContext);
5959

60+
6061
useEffect(() => {
6162
if ('serviceWorker' in navigator) {
6263
const handleMessage = (event) => {
@@ -122,11 +123,26 @@ export default function LayerManager() {
122123
};
123124
}, [mapHook.map]);
124125

126+
useEffect(() => {
127+
console.log("test")
128+
if (!mapHook.map) return;
129+
130+
console.log({
131+
parksShown: mapHook.map.getLayer('parks').visibility === "visible",
132+
restaurantsShown: mapHook.map.getLayer('restaurants').visibility === "visible",
133+
})
134+
sendMessageToServiceWorker({
135+
type: "visibleLayers",
136+
message: {
137+
parksShown: mapHook.map.getLayer('parks').visibility === "visible",
138+
restaurantsShown: mapHook.map.getLayer('restaurants').visibility === "visible",
139+
}
140+
})
141+
}, [mapHook.map.style._layers.parks.visibility === "visible"]);
125142
return (
126143
<>
127-
<Sidebar open={true} name={"Layers"}>
144+
<Sidebar open={props.openSidebar} setOpen={props.setOpenSidebar} name={"Layers"} >
128145
<LayerList>
129-
{/* <RestaurantLayer /> */}
130146
<ParkLayer
131147
selected={selected}
132148
setSelected={setSelected}
@@ -138,8 +154,8 @@ export default function LayerManager() {
138154
setSrc={setSrc}
139155
/>
140156
</LayerList>
141-
{selectedFeature && <MlHighlightFeature features={[selectedFeature]} variant={"hell"} offset={1}/>}
142157
</Sidebar>
158+
{selectedFeature && <MlHighlightFeature features={[selectedFeature]} variant={"hell"} offset={1}/>}
143159
</>
144160
);
145161
}

‎multi_tab/src/components/Layers/ParkLayer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface ParkLayerProps {
88
setSrc: React.Dispatch<React.SetStateAction<string>>
99
}
1010

11-
// Function to initialize all parks to the map
11+
// Function to initialize all parks to the map if the data is fetched successfully
1212
export default function ParkLayer({
1313
setSelected,
1414
setSrc

‎multi_tab/src/components/Layers/RestaurantLayer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface RestaurantLayerProps {
88
setSrc: React.Dispatch<React.SetStateAction<string>>
99
}
1010

11-
// Function to initialize all restaurants to the map
11+
// Function to initialize all restaurants to the map if the data is fetched successfully
1212
export default function RestaurantLayer({
1313
setSelected,
1414
setSrc

‎multi_tab/src/components/UI_Components/DataTable.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import React, {useMemo} from "react";
22
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
33
import {sendMessageToServiceWorker} from "../../js/sendMessageToSW.js";
44

5+
//Returns an Array of all objects which are visible on the map
56
const createObjectList = (data, visibleIDs, selectedLayer) => {
6-
console.log(data);
7-
console.log(visibleIDs);
8-
console.log(selectedLayer);
97
if (!data) return [];
108

119
return Object.values(data).flatMap(value =>
@@ -17,6 +15,7 @@ const createObjectList = (data, visibleIDs, selectedLayer) => {
1715
);
1816
};
1917

18+
//Returns an array containing the properties as objects of the parameter list
2019
const createPropertiesList = (objectList) => {
2120
if (!objectList) return [];
2221
const propertiesList = [];
@@ -26,6 +25,7 @@ const createPropertiesList = (objectList) => {
2625
return propertiesList;
2726
};
2827

28+
//Returns an array containing all the keys from the properties (used in table to
2929
const createKeyList = (propertiesList) => {
3030
const keyFrequency = {};
3131
const minUsage = propertiesList.length < 4 ? 0 : 4;
@@ -53,7 +53,6 @@ const selecting = (id, src) => {
5353

5454
const DataTable = (props) => {
5555
const objectList = useMemo(() => createObjectList(props.data, props.visibleIDs, props.selectedLayer), [props.data, props.visibleIDs, props.selectedLayer]);
56-
console.log(objectList);
5756
const propertiesList = useMemo(() => createPropertiesList(objectList), [objectList]);
5857
const keyList = useMemo(() => createKeyList(propertiesList), [propertiesList]);
5958

‎multi_tab/src/components/UI_Components/TopToolbar.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ function TopToolbar(props: TopToolbarProps) {
6767
variant={'outlined'}
6868
value={props.selectedLayer}
6969
onChange={handleLayerSelect}
70+
sx={{
71+
width: '122px',
72+
}}
7073
>
7174
<MenuItem value={"all"}>all</MenuItem>
7275
{layers.map(layerName => (
@@ -83,6 +86,9 @@ function TopToolbar(props: TopToolbarProps) {
8386
<Button
8487
variant={'outlined'}
8588
onClick={handleTableSplit}
89+
sx={{
90+
color: '#238ee5'
91+
}}
8692
>
8793
{props.tableSplit ? ("merge table") : ("split table")}
8894
</Button>

0 commit comments

Comments
 (0)