design of the map component functional

traque-front/components/team/loginForm.jsx

@@ -1,5 +1,5 @@
-import Button from "./utill/button";
-import TextInput from "./utill/textInput";
+import Button from "../util/button";
+import TextInput from "../util/textInput";
 
 export default function LoginForm() {
     return (

traque-front/components/team/map.jsx

@@ -1,23 +1,56 @@
 'use client';
-import React from 'react'
-import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+import React, { useEffect, useState } from 'react'
+import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 
-export default function LiveMap({...props}) {
-    const position = [51.505, -0.09]
+const DEFAULT_ZOOM = 17;
+
+function MapPan(props) {
+  const map = useMap();
+  const [initialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    if(!initialized && JSON.stringify(props.center) != "[0,0]") {
+        map.flyTo(props.center, DEFAULT_ZOOM);
+        setInitialized(true)
+    }
+  },[props.center]);
+
+  return null;
+}
+
+export default function LiveMap({enemyPosition, currentPosition, ...props}) {
     return (
-        <MapContainer {...props} center={position} zoom={13} scrollWheelZoom={true}>
+        <MapContainer  {...props} center={[0,0]} zoom={0} scrollWheelZoom={true}>
             <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}>
+            <Marker position={currentPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}>
                 <Popup>
-                    A pretty CSS3 popup. <br /> Easily customizable.
+                    Votre position
                 </Popup>
             </Marker>
+            <Marker  position={enemyPosition} icon={new L.Icon({
+                iconUrl: '/icons/target.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}>
+                <Popup>
+                    Position de l'ennemi
+                </Popup>
+            </Marker>
+            <MapPan center={currentPosition}/>
         </MapContainer>
     )
 }