Auto deploy: 2025-12-09 05:31:58

src/components/Map/MapView.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import maplibregl from "maplibre-gl";
 import "../../styles/maplibre.css"; // CSS locale copiée depuis maplibre-gl
-
+import "../../styles/mapMarkers.css";
 import { fetchPosts, fetchIpLocation, createPost } from "../../api/client";
 
 import {
@@ -87,7 +87,6 @@ export default function MapView() {
         layers: [
           {
             id: "carto-dark-layer",
-            type: "raster",
             source: "carto-dark",
           },
         ],
@@ -673,7 +672,6 @@ export default function MapView() {
               disabled={isSaving}
             >
               {isSaving ? "Posting..." : "Post as tommy"}
-            </button>
           </div>
         </div>
       )}

src/styles/mapMarkers.css

@@ -0,0 +1,85 @@
+/* Le conteneur du marker. MapLibre place le BOTTOM-CENTER de cet élément
+   exactement sur la coordonnée (lat/lon) qu'on lui donne. */
+.post-marker {
+  position: relative;
+  transform: none !important;  /* ⚠️ important : pas de translate() foireux */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+/* Version compacte (petit post) */
+.post-marker-compact {
+  padding: 2px 4px;
+}
+
+/* Version étendue (gros post) */
+.post-marker-expanded {
+  padding: 0;
+}
+
+/* Petit contenu compact */
+.marker-inner {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(6, 40, 80, 0.9);
+  border: 1px solid rgba(80, 180, 255, 0.9);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  max-width: 220px;
+}
+
+/* Rond de couleur à gauche */
+.marker-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #3ec6ff;
+  margin-right: 6px;
+}
+
+/* Texte court dans la bulle compacte */
+.marker-text {
+  color: #e8f5ff;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Bulle étendue (gros post) */
+.marker-expanded-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(8, 20, 40, 0.95);
+  border: 1px solid rgba(90, 190, 255, 0.9);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
+  max-width: 260px;
+}
+
+/* Header du gros post : rond + titre */
+.marker-expanded-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.marker-expanded-title {
+  color: #f5fbff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* Corps / texte du gros post */
+.marker-expanded-body {
+  color: #c7e3ff;
+  font-size: 11px;
+  line-height: 1.35;
+  max-height: 120px;
+  overflow: hidden;
+}