diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index acf91324..cecfd051 100644 --- a/src/Components/Map/Layer.tsx +++ b/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)) { diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index fd9a1a7b..33300904 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/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(null); const [embedded, setEmbedded] = useState(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 && (*/} {/* */} {/*)}*/} - + {showFilterControl && } {/*todo: needed layer handling is located LayerControl*/} - + {showLayerControl && }