add transparency gps

src/components/ebike/EbikeGPSMap.tsx

@@ -58,7 +58,7 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   height = 1,
 }) => {
   const [waypoints, setWaypoints] = useState<Waypoint[]>([]);
-  const [mapImage, setMapImage] = useState<HTMLImageElement | null>(null);
+  const [mapImage, setMapImage] = useState<HTMLImageElement | HTMLCanvasElement | null>(null);
 
   // Offscreen high-res canvas for crystal clear rendering
   const [offscreenCanvas] = useState(() => {
@@ -102,7 +102,8 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
       });
   }, []);
 
-  // Pre-load background map image if provided
+  // Pre-load background map image (standard HTML5 Image loader)
+  // Since the user's PNG is already transparent, we don't need fetch or pixel manipulation!
   useEffect(() => {
     if (!mapImageUrl) {
       setMapImage(null);
@@ -110,7 +111,9 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
     }
 
     const img = new Image();
-    img.onload = () => setMapImage(img);
+    img.onload = () => {
+      setMapImage(img);
+    };
     img.onerror = () => {
       console.warn(`[GPS Component] Failed to load map background image from ${mapImageUrl}. Falling back to dynamic vector map.`);
       setMapImage(null);
@@ -170,11 +173,12 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
     return { x: px, y: py };
   };
 
+
+
   // Draw loop
   const draw = () => {
     const canvas = offscreenCanvas;
-    const ctx = canvas.getContext('2d');
-    ctx.globalAlpha = 0.5;
+    const ctx = canvas.getContext('2d', { willReadFrequently: true, alpha: true });
     if (!ctx) return;
 
     const size = canvas.width;
@@ -184,10 +188,9 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
     // 1. Draw Map Background (Image or premium blueprint vectors)
     if (mapImage) {
       ctx.drawImage(mapImage, 0, 0, size, size);
+      ctx.globalAlpha = 1.0;
     } else {
-      // Dynamic Sci-fi background grid
-      ctx.fillStyle = '#0a0d16'; // Deep space black
-      ctx.fillRect(0, 0, size, size);
+      // Dynamic Sci-fi background grid (Background is transparent!)
 
       // Sci-fi subgrid
       ctx.strokeStyle = 'rgba(30, 41, 59, 0.4)';
@@ -377,11 +380,12 @@ export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
   return (
     <mesh castShadow receiveShadow>
       <planeGeometry args={[width, height]} />
-      <meshBasicMaterial toneMapped={false} transparent opacity={0.95}>
+      <meshBasicMaterial toneMapped={false} transparent={true} opacity={1} depthWrite={false}>
         <canvasTexture
           ref={textureRef}
           attach="map"
           image={offscreenCanvas}
+          format={THREE.RGBAFormat}
           minFilter={THREE.LinearFilter}
           magFilter={THREE.LinearFilter}
         />

src/pages/backgroundmap/page.tsx

@@ -147,7 +147,7 @@ export function BackgroundMapPage() {
     const width = maxX - minX;
     const height = maxZ - minZ;
     const maxDim = Math.max(width, height);
-    
+
     const centerX = (minX + maxX) / 2;
     const centerZ = (minZ + maxZ) / 2;
 

src/world/debug/TestMap.tsx

@@ -238,16 +238,20 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
 
       {/* Dynamic Futuristic 3D GPS Dashboard Preview */}
       <group position={[0, 2.8, -4.8]} rotation={[0, 0, 0]}>
-        {/* Futuristic glowing screen frame */}
+        {/* Futuristic glowing screen frame (commented out to show true 3D transparency!) */}
+        {/*
         <mesh>
           <boxGeometry args={[4.2, 4.2, 0.1]} />
-          <meshStandardMaterial color="#0f172a" roughness={0.2} metalness={0.8} />
+          <meshStandardMaterial color="#0f172a" roughness={0.2} metalness={0.8} transparent opacity={0.4} />
         </mesh>
-        {/* Glow accent border */}
+        */}
+        {/* Glow accent border (commented out to remove any orange transparency tint!) */}
+        {/*
         <mesh position={[0, 0, 0.01]}>
           <boxGeometry args={[4.05, 4.05, 0.02]} />
-          <meshBasicMaterial color="#f97316" transparent opacity={0.2} />
+          <meshBasicMaterial color="#f97316" transparent opacity={0.1} />
         </mesh>
+        */}
         {/* GPS Map screen plane */}
         <group position={[0, 0, 0.06]}>
           <EbikeGPSMap
@@ -257,10 +261,10 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
             destPos={{ x: -40, y: 0, z: 30 }}
             mapImageUrl="/map_background.png"
             worldBounds={{
-              minX: -146, // Les valeurs exactes
-              maxX: 131,  // que l'outil t'aura 
-              minZ: -139, // affiché en temps réel !
-              maxZ: 138
+              "minX": -166,
+              "maxX": 163,
+              "minZ": -142,
+              "maxZ": 138
             }}
           />
         </group>