Merge pull request #3 from Vizzuality/feature/markers-interactivity

Markers: interactivity
Vizzuality · Aug 24, 2023 · 28d2c27 · 28d2c27
2 parents da00012 + afe7976
commit 28d2c27
Show file tree

Hide file tree

Showing 22 changed files with 89 additions and 39 deletions.
diff --git a/client/geojson-generator.py b/client/geojson-generator.py
@@ -6,7 +6,7 @@
 # Load land geometries from Natural Earth dataset (1:10m scale)
 world = gpd.read_file(gpd.datasets.get_path('naturalearth_lowres'))
 
-# Define latitude range to avoid poles (approximately ±70 degrees)
+# Define latitude range to avoid poles (approximately ±80 degrees)
 min_latitude = -50
 max_latitude = 70
 
@@ -29,14 +29,27 @@ def generate_random_coordinates_within_land_and_range():
 features = []
 for idx in range(100):
     coordinates = generate_random_coordinates_within_land_and_range()
+    longitude, latitude = coordinates
+
     properties = {
         "category": random.choice(categories),
         "ifi": random.choice(ifis),
         "status": random.choice(statuses),
         "tags": random.sample(tags, random.randint(1, 3))
     }
+
     point = geojson.Point(coordinates)
-    feature = geojson.Feature(geometry=point, properties=properties, id=idx + 1)
+
+    # Calculate bounding box with offsets
+    bbox_offset = 0.1  # Adjust this offset as needed
+    bbox = [
+        longitude - bbox_offset,
+        latitude - bbox_offset,
+        longitude + bbox_offset,
+        latitude + bbox_offset
+    ]
+
+    feature = geojson.Feature(geometry=point, properties=properties, id=idx + 1, bbox=bbox)
     features.append(feature)
 
 # Create FeatureCollection

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -3,7 +3,7 @@ import '@/styles/mapbox.css';
 
 import Providers from '@/app/layout-providers';
 
-import Map from '@/containers/home/map';
+import Map from '@/containers/map';
 
 export const metadata = {
   title: 'Create Next App',
@@ -17,6 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <body className="font-notes h-screen w-screen">
           <main>
             <Map />
+
             {children}
           </main>
         </body>

diff --git a/client/src/components/map/layers/marker/index.tsx b/client/src/components/map/layers/marker/index.tsx
@@ -11,7 +11,7 @@ const Marker = (props: RMarkerProps) => {
     <RMarker {...props}>
       <div
         className={cn({
-          'flex h-3 w-3 rotate-45 items-center justify-center border border-[#FFE094] transition-all':
+          'flex h-3 w-3 rotate-45 cursor-pointer items-center justify-center border border-[#FFE094] transition-all':
             true,
           'scale-[2] bg-[#FFE094]': hover,
         })}

diff --git a/client/src/constants/markers.json b/client/src/constants/markers.json
diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -12,10 +12,10 @@ import Datasets from '@/containers/home/datasets';
 import Sidebar from '@/containers/home/sidebar';
 
 export default function Home() {
-  const bbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
   const setBbox = useSetRecoilState(tmpBboxAtom);
 
   useEffect(() => {
+    const bbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
     setBbox(bbox);
   }, [setBbox]);
 

diff --git a/client/src/containers/home/map/markers/index.tsx b/client/src/containers/home/map/markers/index.tsx
diff --git a/client/src/containers/home/map/index.tsx → client/src/containers/map/index.tsx b/client/src/containers/home/map/index.tsx → client/src/containers/map/index.tsx
@@ -22,21 +22,21 @@ import { Bbox } from '@/types/map';
 
 import { MAPBOX_STYLES } from '@/constants/mapbox';
 
-import Popup from '@/containers/home/map/popup';
-import MapSettings from '@/containers/home/map/settings';
-import MapSettingsManager from '@/containers/home/map/settings/manager';
+import Popup from '@/containers/map/popup';
+import MapSettings from '@/containers/map/settings';
+import MapSettingsManager from '@/containers/map/settings/manager';
 
 import Map from '@/components/map';
 import Controls from '@/components/map/controls';
 import SettingsControl from '@/components/map/controls/settings';
 import ZoomControl from '@/components/map/controls/zoom';
 import { CustomMapProps } from '@/components/map/types';
 
-const LayerManager = dynamic(() => import('@/containers/home/map/layer-manager'), {
+const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), {
   ssr: false,
 });
 
-const Legend = dynamic(() => import('@/containers/home/map/legend'), {
+const Legend = dynamic(() => import('@/containers/map/legend'), {
   ssr: false,
 });
 

diff --git a/...ntainers/home/map/layer-manager/index.tsx → ...rc/containers/map/layer-manager/index.tsx b/...ntainers/home/map/layer-manager/index.tsx → ...rc/containers/map/layer-manager/index.tsx
@@ -6,8 +6,8 @@ import { useRecoilValue } from 'recoil';
 
 import { layersAtom, layersSettingsAtom } from '@/store';
 
-import LayerManagerItem from '@/containers/home/map/layer-manager/item';
-import Markers from '@/containers/home/map/markers';
+import LayerManagerItem from '@/containers/map/layer-manager/item';
+import Markers from '@/containers/map/markers';
 
 import { DeckMapboxOverlayProvider } from '@/components/map/provider';
 

diff --git a/...ontainers/home/map/layer-manager/item.tsx → ...src/containers/map/layer-manager/item.tsx b/...ontainers/home/map/layer-manager/item.tsx → ...src/containers/map/layer-manager/item.tsx
diff --git a/.../src/containers/home/map/legend/index.tsx → client/src/containers/map/legend/index.tsx b/.../src/containers/home/map/legend/index.tsx → client/src/containers/map/legend/index.tsx
@@ -6,7 +6,7 @@ import { cn } from '@/lib/classnames';
 
 import { layersSettingsAtom, layersAtom, DEFAULT_SETTINGS } from '@/store';
 
-import MapLegendItem from '@/containers/home/map/legend/item';
+import MapLegendItem from '@/containers/map/legend/item';
 
 import Legend from '@/components/map/legend';
 

diff --git a/...t/src/containers/home/map/legend/item.tsx → client/src/containers/map/legend/item.tsx b/...t/src/containers/home/map/legend/item.tsx → client/src/containers/map/legend/item.tsx
diff --git a/client/src/containers/map/markers/index.tsx b/client/src/containers/map/markers/index.tsx
@@ -0,0 +1,24 @@
+import GEOSJON from '@/constants/markers.json';
+
+import MarkerItem from './item';
+
+const Markers = () => {
+  const FeatureCollection = GEOSJON as unknown as GeoJSON.FeatureCollection<
+    GeoJSON.Point,
+    {
+      category: string;
+    }
+  >;
+
+  return (
+    <>
+      {FeatureCollection.features.map((f) => {
+        const { id } = f;
+
+        return <MarkerItem key={id} {...f} />;
+      })}
+    </>
+  );
+};
+
+export default Markers;
diff --git a/client/src/containers/map/markers/item.tsx b/client/src/containers/map/markers/item.tsx
@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import Marker from '@/components/map/layers/marker';
+
+export type MarkerItemProps = GeoJSON.Feature<
+  GeoJSON.Point,
+  {
+    category: string;
+  }
+>;
+
+const MarkerItem = ({ id, geometry, properties }: MarkerItemProps) => {
+  const { push } = useRouter();
+  const { category } = properties;
+
+  const handleClick = useCallback(() => {
+    push(`/stories/${id}`);
+  }, [push, id]);
+
+  return (
+    <Marker
+      key={id}
+      longitude={geometry.coordinates[0]}
+      latitude={geometry.coordinates[1]}
+      onClick={handleClick}
+    >
+      <div className="flex flex-col">
+        <div className="text-xs font-bold">{category}</div>
+      </div>
+    </Marker>
+  );
+};
+
+export default MarkerItem;
diff --git a/...t/src/containers/home/map/popup/index.tsx → client/src/containers/map/popup/index.tsx b/...t/src/containers/home/map/popup/index.tsx → client/src/containers/map/popup/index.tsx
@@ -4,7 +4,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { layersInteractiveAtom, popupAtom } from '@/store/index';
 
-import PopupItem from '@/containers/home/map/popup/item';
+import PopupItem from '@/containers/map/popup/item';
 
 const PopupContainer = () => {
   const popup = useRecoilValue(popupAtom);

diff --git a/...nt/src/containers/home/map/popup/item.tsx → client/src/containers/map/popup/item.tsx b/...nt/src/containers/home/map/popup/item.tsx → client/src/containers/map/popup/item.tsx
diff --git a/...ners/home/map/settings/basemaps/index.tsx → ...ontainers/map/settings/basemaps/index.tsx b/...ners/home/map/settings/basemaps/index.tsx → ...ontainers/map/settings/basemaps/index.tsx
diff --git a/...home/map/settings/basemaps/item/index.tsx → ...ners/map/settings/basemaps/item/index.tsx b/...home/map/settings/basemaps/item/index.tsx → ...ners/map/settings/basemaps/item/index.tsx
diff --git a/...rs/home/map/settings/boundaries/index.tsx → ...tainers/map/settings/boundaries/index.tsx b/...rs/home/map/settings/boundaries/index.tsx → ...tainers/map/settings/boundaries/index.tsx
diff --git a/...rc/containers/home/map/settings/index.tsx → client/src/containers/map/settings/index.tsx b/...rc/containers/home/map/settings/index.tsx → client/src/containers/map/settings/index.tsx
diff --git a/...ainers/home/map/settings/labels/index.tsx → .../containers/map/settings/labels/index.tsx b/...ainers/home/map/settings/labels/index.tsx → .../containers/map/settings/labels/index.tsx
diff --git a/...iners/home/map/settings/manager/index.tsx → ...containers/map/settings/manager/index.tsx b/...iners/home/map/settings/manager/index.tsx → ...containers/map/settings/manager/index.tsx
diff --git a/...tainers/home/map/settings/roads/index.tsx → ...c/containers/map/settings/roads/index.tsx b/...tainers/home/map/settings/roads/index.tsx → ...c/containers/map/settings/roads/index.tsx