574 display images on map

projects/bp-gallery/cypress/e2e/discover.cy.ts

@@ -83,14 +83,15 @@ describe('Discover View', () => {
   });
 
   it('shows "Orte" tag overview', () => {
+    cy.get('.overview-selection-container:eq(1)').contains('Orte').click();
     // check for basic components (title, show more button)
-    cy.get('.overview-container:eq(3)')
+    cy.get('.overview-selection-container:eq(1)')
       .children()
       .should('contain.text', 'Orte')
       .and('contain.text', 'Mehr anzeigen');
 
     // check if it contains first 6 verified locations
-    cy.get('.overview-container:eq(3) .overview-collection-grid-container .items')
+    cy.get('.overview-selection-container:eq(1) .overview-collection-grid-container .items')
       .should('contain.text', 'VERIFIZIERTER TESTORT 1')
       .and('contain.text', 'VERIFIZIERTER TESTORT 2')
       .and('contain.text', 'VERIFIZIERTER TESTORT 3')

projects/bp-gallery/cypress/e2e/show-more.cy.ts

@@ -33,18 +33,20 @@ describe('Navigation to Show More View from Discover View', () => {
   });
 
   it('works for "Orte"', () => {
-    cy.get('.overview-container:contains(Orte)').contains('Mehr anzeigen').click();
+    cy.get('.overview-selection-container:eq(1)').contains('Orte').click();
+    cy.get('.overview-selection-container:contains(Orte)').contains('Mehr anzeigen').click();
     urlIs('/show-more/location');
   });
 
   it('works for single locations', () => {
+    cy.get('.overview-selection-container:eq(1)').contains('Orte').click();
     // IDs of the six locations shown in tag overview
     const targetIDs = [7, 8, 9, 10, 11, 13];
     // iterate over the six locations shown in tag overview
     //for (const targetID of targetIDs) {
     targetIDs.forEach((targetID, index) => {
       cy.get(
-        `.overview-container:contains(Orte) .overview-collection-grid-container .items .item:eq(${index})`
+        `.overview-selection-container:contains(Orte) .overview-collection-grid-container .items .item:eq(${index})`
       ).click();
       urlIs(`/show-more/location/${targetID}`);
       cy.go(-1); // is a bit faster using cy.go(-1) instead of cy.visit('/discover)
@@ -57,6 +59,7 @@ describe('Navigation to Show More View from Discover View', () => {
   });
 
   it('works for single keywords', () => {
+    cy.scrollTo('bottom');
     // IDs of the six keywords shown in tag overview
     const targetIDs = [9, 10, 11, 13, 14, 15];
     // iterate over the six keywords shown in tag overview

projects/bp-gallery/package.json

@@ -17,6 +17,7 @@
     "@sentry/react": "^7.24.2",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@types/apollo-upload-client": "^17.0.2",
+    "@types/leaflet.markercluster": "^1.5.1",
     "apollo-upload-client": "^17.0.0",
     "bp-graphql": "../bp-graphql",
     "dayjs": "^1.11.7",
@@ -32,6 +33,7 @@
     "isomorphic-dompurify": "^0.24.0",
     "jodit-react": "^1.3.31",
     "leaflet": "^1.9.3",
+    "leaflet.markercluster": "^1.5.3",
     "lodash": "^4.17.21",
     "meilisearch": "^0.33.0",
     "nanoid": "^4.0.2",
@@ -46,6 +48,7 @@
     "react-html-parser": "^2.0.2",
     "react-i18next": "^11.13.0",
     "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router-config": "^5.1.1",
     "react-router-dom": "^5.3.0",

projects/bp-gallery/src/components/common/OverviewContainer.tsx

@@ -6,7 +6,6 @@ import { MobileContext } from '../provider/MobileProvider';
 export interface OverviewContainerTab {
   title: string;
   icon: ReactElement<IconProps>;
-  desktopText?: string;
   content: ReactElement;
 }
 
@@ -18,20 +17,20 @@ export enum OverviewContainerPosition {
 
 type SelectedTabsData = {
   start?: number;
-  discover?: number;
+  discover?: { [tabID: string]: number | undefined };
   archives?: { [archiveID: string]: number | undefined };
 };
 
 const OverviewContainer = ({
   tabs,
   defaultTabIndex = 0,
   overviewPosition,
-  archiveID,
+  tabID,
 }: {
   tabs: OverviewContainerTab[];
   defaultTabIndex?: number;
   overviewPosition: OverviewContainerPosition;
-  archiveID?: string;
+  tabID?: string;
 }) => {
   const { isMobile } = useContext(MobileContext);
   const [selectedTabs, setSelectedTabs] = useStorageState<SelectedTabsData>(
@@ -40,34 +39,36 @@ const OverviewContainer = ({
     localStorage
   );
 
-  const tabIndex = useMemo(
-    () =>
-      overviewPosition === OverviewContainerPosition.ARCHIVE_VIEW
-        ? archiveID
-          ? (selectedTabs[overviewPosition] ?? { [archiveID]: defaultTabIndex })[archiveID] ??
+  const tabIndex = useMemo(() => {
+    const temporaryTabIndex =
+      overviewPosition !== OverviewContainerPosition.START_VIEW
+        ? tabID
+          ? (selectedTabs[overviewPosition] ?? { [tabID]: defaultTabIndex })[tabID] ??
             defaultTabIndex
           : defaultTabIndex
-        : selectedTabs[overviewPosition] ?? defaultTabIndex,
-    [overviewPosition, archiveID, selectedTabs, defaultTabIndex]
-  );
+        : selectedTabs[overviewPosition] ?? defaultTabIndex;
+    return 0 <= temporaryTabIndex && temporaryTabIndex < tabs.length
+      ? temporaryTabIndex
+      : defaultTabIndex;
+  }, [overviewPosition, tabID, selectedTabs, defaultTabIndex, tabs.length]);
 
   const setTabIndex = useCallback(
     (tabIndex: number) => {
-      if (overviewPosition !== OverviewContainerPosition.ARCHIVE_VIEW) {
+      if (overviewPosition === OverviewContainerPosition.START_VIEW) {
         setSelectedTabs(selectedTabs => ({ ...selectedTabs, [overviewPosition]: tabIndex }));
         return;
       }
-      if (archiveID) {
+      if (tabID) {
         setSelectedTabs(selectedTabs => ({
           ...selectedTabs,
           [overviewPosition]: {
             ...selectedTabs[overviewPosition],
-            [archiveID]: tabIndex,
+            [tabID]: tabIndex,
           },
         }));
       }
     },
-    [overviewPosition, archiveID, setSelectedTabs]
+    [overviewPosition, tabID, setSelectedTabs]
   );
   const clampedTabIndex = Math.min(tabIndex, tabs.length - 1);
   return (
@@ -83,7 +84,7 @@ const OverviewContainer = ({
         >
           {tabs.map((tab, index) => (
             <Tooltip key={index} title={tab.title}>
-              <Tab icon={isMobile ? tab.icon : tab.desktopText ?? tab.title} />
+              {isMobile ? <Tab icon={tab.icon} /> : <Tab label={tab.title} />}
             </Tooltip>
           ))}
         </Tabs>

projects/bp-gallery/src/components/common/PictureMap.tsx

@@ -0,0 +1,74 @@
+import { LatLng, Map } from 'leaflet';
+import { useMemo, useRef, useState } from 'react';
+import { useSimplifiedQueryResponseData } from '../../graphql/queryUtils';
+import { useVisit } from '../../helpers/history';
+import useGetTagsWithThumbnail from '../../hooks/get-tags-with-thumbnail.hook';
+import { FlatPicture, FlatTag, TagType, Thumbnail } from '../../types/additionalFlatTypes';
+import Loading from './Loading';
+import PictureMapView from './PictureMapView';
+
+export const BAD_HARZBURG_COORDINATES = new LatLng(51.8392573, 10.5279953);
+
+const PictureMap = () => {
+  const { location } = useVisit();
+
+  const initialMapValues = useMemo(() => {
+    return location.state?.mapState ?? { center: BAD_HARZBURG_COORDINATES, zoom: 10 };
+  }, [location.state?.mapState]);
+
+  const [isMaximized, setIsMaximized] = useState<boolean>(location.state?.open ?? false);
+  const map = useRef<Map>(null);
+
+  const { data, loading } = useGetTagsWithThumbnail(
+    {},
+    {},
+    TagType.LOCATION,
+    ['name:asc'],
+    undefined,
+    'cache-first',
+    true
+  );
+
+  const flattened = useSimplifiedQueryResponseData(data);
+  const flattenedTags:
+    | (FlatTag & {
+        thumbnail: Thumbnail[];
+        pictures: FlatPicture[];
+        verified_pictures: FlatPicture[];
+      })[]
+    | undefined = flattened ? Object.values(flattened)[0] : undefined;
+
+  const localMap = useMemo(
+    () => (
+      <PictureMapView
+        isMaximized={isMaximized}
+        setIsMaximized={setIsMaximized}
+        initialMapValues={{
+          center: map.current?.getCenter() ?? initialMapValues.center,
+          zoom: map.current?.getZoom() ?? initialMapValues.zoom,
+        }}
+        locations={flattenedTags}
+        widthStyle='w-full'
+        heightStyle={isMaximized ? 'h-full' : 'h-[500px]'}
+        map={map}
+      />
+    ),
+    [flattenedTags, initialMapValues.center, initialMapValues.zoom, isMaximized]
+  );
+
+  if (loading) {
+    return <Loading />;
+  } else {
+    return (
+      <>
+        {isMaximized ? (
+          <div className='w-full h-full overflow-hidden fixed left-0 top-0 z-[999]'>{localMap}</div>
+        ) : (
+          localMap
+        )}
+      </>
+    );
+  }
+};
+
+export default PictureMap;