Merge pull request #19 from italoh623/develop

Develop
italoh623 · Mar 4, 2024 · 8f32380 · 8f32380
2 parents 9120fd2 + c7c9bf5
commit 8f32380
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 42 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -110,3 +110,13 @@ a {
     color-scheme: dark;
   }
 }
+
+.leaflet-popup-content-wrapper {
+  background-color: transparent !important;
+  box-shadow: 0 0 0 transparent !important;
+}
+
+.leaflet-popup-tip {
+  background-color: #FFFBF3 !important;
+  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) !important;
+}
diff --git a/src/components/Map/PopupMarker/index.tsx b/src/components/Map/PopupMarker/index.tsx
@@ -4,9 +4,7 @@ import { LatLngTuple, Icon } from "leaflet";
 import {
   Marker,
   Popup,
-  MarkerProps,
-  Pane,
-  Circle
+  MarkerProps
 } from 'react-leaflet';
 
 import "leaflet/dist/leaflet.css";
@@ -16,6 +14,7 @@ export interface PopupMarkerProps extends MarkerProps {
   type: "TEMPORARIAMENTE FECHADO" | "SEM FUNCIONAMENTO" | "EM FUNCIONAMENTO";
   title: string;
   description: string;
+  onClose?: () => void;
 }
 
 function selectIcon(type: PopupMarkerProps['type']): string {
@@ -61,7 +60,8 @@ export default function PopupMarker({
   position, 
   type, 
   title,
-  description, 
+  description,
+  onClose,
   ...rest 
 }: PopupMarkerProps) {
   const customIcon = new Icon({
@@ -70,11 +70,16 @@ export default function PopupMarker({
   })
 
   return (
-    <Marker position={position} icon={customIcon} {...rest} >
+    <Marker 
+      eventHandlers={{ popupclose: onClose }} 
+      position={position} 
+      icon={customIcon} 
+      {...rest} 
+    >
       <Popup className={styles.popup} closeButton={false} pane="tooltipPane">
         <section >
           <div className={`${styles.popupType} ${selectTypeClass(type)}`}>
-            <text>{type}</text>
+            <p>{type}</p>
           </div>
 
           <main className={styles.popupText}>

diff --git a/src/components/Map/PopupMarker/styles.module.css b/src/components/Map/PopupMarker/styles.module.css
@@ -2,12 +2,18 @@
   background-color: transparent;
 }
 
+.leaflet-popup-content-wrapper {
+  background-color: transparent;
+}
+
 .popupType {
+  position: relative;
+  top: 0.5rem;
+
   display: flex;
   width: fit-content;
 
-  padding: 16px 8px;
-  padding-bottom: 6px;
+  padding: 0 8px;
   margin-left: 30px;
 
   border-top-left-radius: 22px;
@@ -16,8 +22,7 @@
   font-family: var(--sometypeMono-font);
   font-weight: 700;
   font-size: 1rem;
-  line-height: 0.75rem;
-  color: #F3E8D5;
+  line-height: 0.5rem;
 }
 
 .popupTitle {
@@ -49,6 +54,31 @@
   filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25)); /* ambientColor = Color(0x40000000) */
 }
 
+.popupText p {
+  height: 100%;
+  max-height: 300px;
+  overflow-y: scroll;
+}
+
+.popupText p::-webkit-scrollbar {
+  width: 15px;
+}
+
+.popupText p::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.popupText p::-webkit-scrollbar-thumb {
+  background-color: #fff1d6;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+.popupText p::-webkit-scrollbar-thumb:hover {
+  background-color: #faefd9;
+}
+
 .leaflet-popup-content-wrapper {
   padding: 0px;
 }

diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
@@ -1,11 +1,13 @@
 'use client';
 
-import { LatLngTuple } from "leaflet";
+import { useRef } from "react";
+
+import { LatLngTuple, Map as LeafletMap} from "leaflet";
 import { 
   MapContainer, 
   TileLayer, 
-  GeoJSON,
-} from 'react-leaflet';
+  GeoJSON
+} from "react-leaflet";
 
 import { GeoJsonObject } from 'geojson';
 
@@ -14,43 +16,61 @@ import styles from "./styles.module.css";
 
 import pernambucoData from '@/data/pernambuco.json';
 import { markers } from "@/data/markerList";
-import PopupMarker, { PopupMarkerProps } from "./PopupMarker";
+import PopupMarker from "./PopupMarker";
 
 const position: LatLngTuple = [-8.38, -38]
 // @ts-ignore
 const pernambucoGeoJson: GeoJsonObject = pernambucoData;
 
 export default function Map() {
+
+  const mapRef = useRef<LeafletMap>(null);
+
+  const handleClosePopup = (position: LatLngTuple) => {
+      const map = mapRef.current;
+
+      if (map) {
+        setTimeout(() => {
+          map.panTo(position);
+        }, 300); 
+
+        map.setZoom(8, { animate: true });
+      }
+    };
+
   return(
     <div className={styles.container}>
-    <MapContainer 
-      center={position} 
-      zoom={8} 
-      scrollWheelZoom={false}
-      dragging={false}
-      doubleClickZoom={false}
-      style={{ height: '100%', width: '100%' }}
-    >
-      <TileLayer
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
-        subdomains='abcd'
-        url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
-      />
-      <GeoJSON data={pernambucoGeoJson} style={() => ({
-        color: '#2F2012',
-        weight: 3,
-        fillOpacity: 0
-      })} />
-
-      {markers.map(marker => (
-        <PopupMarker 
-          position={marker.position} 
-          type={marker.type} 
-          title={marker.title} 
-          description={marker.description}
+      <MapContainer 
+        ref={mapRef}
+        center={position} 
+        zoom={8} 
+        // scrollWheelZoom={false}
+        // dragging={false}
+        // doubleClickZoom={false}
+        style={{ height: '100%', width: '100%' }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+          subdomains='abcd'
+          url="https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
         />
-      ))}
-    </MapContainer>
+        <GeoJSON data={pernambucoGeoJson} style={() => ({
+          color: '#2F2012',
+          weight: 3,
+          fillOpacity: 0
+        })} />
+
+        {markers.map(marker => (
+          <PopupMarker 
+            key={marker.title}
+            onClose={() => handleClosePopup(position)}
+            position={marker.position} 
+            type={marker.type} 
+            title={marker.title} 
+            description={marker.description}
+          />
+        ))}
+      </MapContainer>
     </div>
   )
 }
diff --git a/src/components/Map/styles.module.css b/src/components/Map/styles.module.css
@@ -1,5 +1,5 @@
 .container { 
-  height: 500px;
+  height: 550px;
   width: 100%; 
   border: 2px solid black; 
 }