make controls visibility customizable

src/Components/Map/Layer.tsx

@@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
 import { useAllItemsLoaded, useItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
 import { useEffect, useState } from 'react'
 import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
-import { useFilterTags, useIsLayerVisible } from './hooks/useFilter'
+import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible } from './hooks/useFilter'
 import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
 import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
 import { Popup } from 'leaflet'
@@ -78,6 +78,9 @@ export const Layer = ({
 
     const isLayerVisible = useIsLayerVisible();
 
+    const isGroupTypeVisible = useIsGroupTypeVisible();
+
+
 
     useEffect(() => {
         data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, public_edit_items, setItemFormPopup, itemFormPopup, clusterRef });
@@ -145,6 +148,7 @@ export const Layer = ({
                     filter(item =>
                         filterTags.length == 0 ? item : filterTags.every(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
                     filter(item => item.layer && isLayerVisible(item.layer)).
+                    filter(item => item.group_type && isGroupTypeVisible(item.group_type)).
                     map((item: Item) => {
                         if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) {
 

src/Components/Map/UtopiaMap.tsx

@@ -17,8 +17,10 @@ import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hook
 import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
 import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
 import {useAuth} from "../Auth";
-import FilterControl from "./Subcomponents/Controls/FilterControl";
+import {FilterControl} from "./Subcomponents/Controls/FilterControl";
 import {LayerControl} from "./Subcomponents/Controls/LayerControl";
+import { useLayers } from "./hooks/useLayers";
+import { useAddVisibleLayer } from "./hooks/useFilter";
 
 // for refreshing map on resize (needs to be implemented)
 const mapDivRef = React.createRef();
@@ -29,7 +31,10 @@ function UtopiaMap({
     center = [50.6, 9.5],
     zoom = 10,
     children,
-    geo }
+    geo,
+    showFilterControl=false,
+    showLayerControl = true
+ }
     : UtopiaMapProps) {
 
     function MapEventListener() {
@@ -62,8 +67,6 @@ function UtopiaMap({
     const clusterRef = useClusterRef();
     const setMapClicked = useSetMapClicked();
 
-    const [activeFilter, setActiveFilter] = useState(null);
-
     const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
 
     const [embedded, setEmbedded] = useState<boolean>(true)
@@ -75,6 +78,16 @@ function UtopiaMap({
         embedded != "true" && setEmbedded(false)
     }, [location]);
 
+
+    const layers = useLayers();
+    const addVisibleLayer = useAddVisibleLayer();
+
+    useEffect(() => {
+        layers.map(l => addVisibleLayer(l))
+        
+    }, [layers])
+    
+
     const { isAuthenticated } = useAuth();
 
 
@@ -98,9 +111,9 @@ function UtopiaMap({
                         {/*{!embedded && (*/}
                         {/*    <QuestControl></QuestControl>*/}
                         {/*)}*/}
-                        <FilterControl activeFilter={activeFilter} setActiveFilter={setActiveFilter} />
+                        {showFilterControl && <FilterControl/>}
                         {/*todo: needed layer handling is located LayerControl*/}
-                        <LayerControl></LayerControl>
+                        {showLayerControl && <LayerControl></LayerControl>}
                     </Control>
                     <TileLayer
                         maxZoom={19}