Markers tooltip

Vizzuality · Dec 11, 2023 · 3a0689f · 3a0689f
1 parent 1e1ebfa
commit 3a0689f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 34 deletions.
diff --git a/client/src/components/map/layers/marker/index.tsx b/client/src/components/map/layers/marker/index.tsx
@@ -1,26 +1,63 @@
+import { MouseEventHandler } from 'react';
+
 import { Marker as RMarker, MarkerProps as RMarkerProps } from 'react-map-gl';
 
 import { cn } from '@/lib/classnames';
 
-const Marker = (props: RMarkerProps) => {
+import { Button } from '@/components/ui/button';
+import CategoryIcon from '@/components/ui/category-icon';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+type MarkerProps = RMarkerProps & {
+  properties: GeoJSON.GeoJsonProperties;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
+const Marker = (props: MarkerProps) => {
+  const { properties, onClick } = props;
   return (
     <RMarker {...props}>
-      <div
-        className={cn({
-          'animate-in zoom-in relative flex h-6 w-6 cursor-pointer items-center justify-center duration-150':
-            true,
-        })}
-      >
-        <div
-          className={cn({
-            'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border border-[#FFE094] transition-all':
-              true,
-            'scale-[2] bg-[#FFE094]': true,
-          })}
-        >
-          <div className="h-1.5 w-1.5 bg-[#FFE094]"></div>
-        </div>
-      </div>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <div
+            className={cn({
+              'animate-in zoom-in relative flex h-6 w-6 cursor-pointer items-center justify-center duration-150':
+                true,
+            })}
+          >
+            <div
+              className={cn({
+                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border border-[#FFE094] transition-all':
+                  true,
+                'scale-[2] bg-[#FFE094]': true,
+              })}
+            >
+              <div className="h-1.5 w-1.5 bg-[#FFE094]"></div>
+            </div>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent asChild>
+          <div onMouseMove={(e) => e.stopPropagation()}>
+            <div className="mb-2 flex  items-center space-x-4">
+              <CategoryIcon
+                slug={properties?.category}
+                className="fill-secondary h-10 w-10 opacity-80"
+              />
+              <p className="text-xs">{properties?.categoryName}</p>
+            </div>
+            <p className="text-sm">{properties?.title}</p>
+            <p className="mb-4 text-xs italic text-gray-300">{properties?.location}</p>
+
+            <Button
+              variant="secondary"
+              className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white"
+              onClick={onClick}
+            >
+              Discover story
+            </Button>
+          </div>
+        </TooltipContent>
+      </Tooltip>
     </RMarker>
   );
 };

diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
@@ -19,7 +19,6 @@ import {
   layersInteractiveIdsAtom,
   // popupAtom,
   tmpBboxAtom,
-  isFlyingBackAtom,
 } from '@/store';
 
 // import { useGetLayers } from '@/types/generated/layer';
@@ -40,10 +39,9 @@ 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 Marker from '@/components/map/layers/marker';
 import { CustomMapProps } from '@/components/map/types';
 
-import HomeTooltip from './tooltips/home-tooltip';
-
 const LayerManager = dynamic(() => import('@/containers/map/layer-manager'), {
   ssr: false,
 });
@@ -155,7 +153,6 @@ export default function MapContainer() {
       const f = e.features[0];
 
       if (f.source === 'story-markers') {
-        console.log('f', f);
         setMarker({
           ...f,
           geometry: f.geometry as GeoJSON.Point,
@@ -234,7 +231,7 @@ export default function MapContainer() {
         {isHomePage && <HomeMarkers />}
 
         {marker && isHomePage && (
-          <HomeTooltip
+          <Marker
             key={marker.id}
             longitude={marker.geometry.coordinates[0]}
             latitude={marker.geometry.coordinates[1]}

diff --git a/client/src/containers/map/tooltips/home-tooltip/index.tsx b/client/src/containers/map/tooltips/home-tooltip/index.tsx
@@ -12,8 +12,6 @@ interface HomeTooltipProps extends RMarkerProps {
 const HomeTooltip = (props: HomeTooltipProps) => {
   const { properties, onClick } = props;
 
-  console.log({ props });
-
   return (
     <RPopup
       {...props}

diff --git a/client/src/styles/mapbox.css b/client/src/styles/mapbox.css
@@ -634,14 +634,15 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact {
 }
 
 
-.home-tooltip {
-  .mapboxgl-popup-close-button {
-   display: none;
-  }
-  .mapboxgl-popup-content {
-    background: transparent;
-  }
-  .mapboxgl-popup-tip {
-   display: none;
-  }
+
+.home-tooltip .mapboxgl-popup-close-button {
+  display: none;
+}
+
+.home-tooltip .mapboxgl-popup-content {
+  background: transparent;
+}
+
+.home-tooltip .mapboxgl-popup-tip {
+  display: none;
 }