fixed the points look

Author: Adrit-3001

frontend/src/components/MapComponent.jsx

@@ -125,11 +125,7 @@ export default function MapComponent() {
 
   useEffect(() => {
     const initMap = async () => {
-      // Don't initialize if map already exists
-      if (mapInstanceRef.current) {
-        return;
-      }
-
+      if (mapInstanceRef.current) return;
       const L = (await import('leaflet')).default;
 
       // Add Leaflet CSS dynamically

frontend/src/styles/MapView.css

@@ -20,14 +20,23 @@
   border: none !important;
   box-shadow: none !important;
 }
-
+/* frontend/src/styles/MapView.css */
+.custom-temp-marker .temp-label {
+  background-color: #ff0000; /* Change to your desired color */
+  color: #ffffff; /* Text color */
+  border-radius: 50%;
+  padding: 5px;
+  text-align: center;
+}
 .temp-label {
   display: flex;
-  
+  justify-content: center;
+  align-items: center;
+
   transform: translateX(-10%) translateY(0.5rem);
-  background-color: rgba(255, 255, 255, 0.85);
-  padding: 0rem 0.3rem 0rem 0.3rem;
-  color: rgb(0, 0, 0);
+  background-color: rgba(255, 255, 255, 0.85); /* will be overridden inline */
+  padding: 0.3rem 0.6rem;
+  color: white;
   border-radius: 10rem;
   font-size: 1rem;
   font-weight: bold;
@@ -167,4 +176,4 @@
 
 .temp-label[data-temp-category="hot"] {
   border-left: 4px solid #ff3b30 !important;
-}
+}