Adicionar mapa de geolocalização na tela de cadastro #7

Fronted/package.json

@@ -6,10 +6,13 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -35,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.12"
   }
 }

Fronted/src/componentes/FormularioCadastro.css

@@ -1,3 +1,5 @@
+@import '~leaflet/dist/leaflet.css';
+
 /* src/componentes/FormularioCadastro.css */
 form {
   display: flex;
@@ -38,3 +40,7 @@ button {
 button:hover {
   background-color: #0056b3;
 }
+
+h3 {
+  color: #668
+}

Fronted/src/componentes/FormularioCadastro.js

@@ -1,31 +1,50 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import { useNavigate } from 'react-router-dom'; // Importa useNavigate
+import styled from 'styled-components';
+import L from 'leaflet';
+import 'leaflet/dist/images/marker-icon.png';
+import 'leaflet/dist/images/marker-icon-2x.png';
+import 'leaflet/dist/images/marker-shadow.png';
 import './FormularioCadastro.css';
 
+const StyledMapContainer = styled(MapContainer)`
+  min-height: 400px; // Define o height mínimo como 400 pixels
+`;
+
 const FormularioCadastro = () => {
   const [formData, setFormData] = useState({
     fullName: '',
     username: '',
     email: '',
     password: '',
-    latitude: null,
-    longitude: null,
+    latitude: 5,
+    longitude: 1,
   });
 
+  const mapRef = useRef(null);
+  const [position, setPosition] = useState([5, 1]);
+
   const navigate = useNavigate(); // Inicializa o useNavigate
 
-  useEffect(() => {
+  const updateLocation = () => {
     if ("geolocation" in navigator) {
       navigator.geolocation.getCurrentPosition((position) => {
         setFormData((prevFormData) => ({
           ...prevFormData,
           latitude: position.coords.latitude,
           longitude: position.coords.longitude,
         }));
+        setPosition([position.coords.latitude, position.coords.longitude]);
+        mapRef.current.setView([position.coords.latitude, position.coords.longitude], 13);
       });
     } else {
       console.log("Geolocalização não é suportada neste navegador.");
     }
+  }
+
+  useEffect(() => {
+    updateLocation(); 
   }, []);
 
   const handleChange = (e) => {
@@ -45,6 +64,12 @@ const FormularioCadastro = () => {
     navigate('/meu-perfil');
   };
 
+  const handleRefreshLocation = (e) => {
+    e.preventDefault();
+    updateLocation();
+  };
+
+
   return (
     <form onSubmit={handleSubmit}>
       <div>
@@ -87,6 +112,21 @@ const FormularioCadastro = () => {
           onChange={handleChange}
         />
       </div>
+      <div>
+        <h3>Localização</h3>
+        <button onClick={handleRefreshLocation}>Atualizar</button>
+        <StyledMapContainer center={position} zoom={13} scrollWheelZoom={false} ref={mapRef}>
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+          <Marker position={position}>
+            <Popup>
+              A sua localização estimada.
+            </Popup>
+          </Marker>
+        </StyledMapContainer>
+      </div>
       <button type="submit">Cadastre-se</button>
     </form>
   );