placement phase front end

traque-front/components/team/map.jsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { useEffect, useState } from 'react'
-import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import { Circle, 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";
@@ -24,7 +24,7 @@ function MapPan(props) {
   return null;
 }
 
-export default function LiveMap({ ...props}) {
+export function LiveMap({ ...props}) {
     const {currentPosition, enemyPosition} = useGame();
     useEffect(() => {
         console.log('Current position', currentPosition);
@@ -65,12 +65,24 @@ export default function LiveMap({ ...props}) {
 export function PlacementMap({ ...props}) {
     const {currentPosition, startingArea} = useGame();
     return (
-        <MapContainer  {...props} className='min-h-full w-full' scrollWheelZoom={true}>
+        <MapContainer  {...props} className='min-h-full w-full z-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"
             />
+            {currentPosition && <Marker position={currentPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}>
+                <Popup>
+                    Votre position
+                </Popup>
+            </Marker>}
             <MapPan center={currentPosition}/>
+            <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />
         </MapContainer>
     )
 }