Feature/make map prettier (#781)

* Map uses CARTO now, looks better

* Add map marker popups and click-to-center

Markers now open a popup with course details and both marker and list clicks re-center the Leaflet map for easier navigation.

* Refine map marker helpers

Clean up marker default color handling and list click parsing, and simplify the map flyTo effect.
---------

Co-authored-by: ronitkapoor0106 <ronitkapoor0106@gmail.com>

Author: el-agua

frontend/plan/components/map/Map.tsx

@@ -6,6 +6,8 @@ import { Location } from "../../types";
 interface MapProps {
     locations: Location[];
     zoom: number;
+    focusedLocation?: { lat: number; lng: number } | null;
+    onMarkerClick?: (loc: { lat: number; lng: number }) => void;
 }
 
 function toRadians(degrees: number): number {
@@ -82,32 +84,47 @@ function separateOverlappingPoints(points: Location[], offset = 0.0001) {
 interface InnerMapProps {
     locations: Location[];
     center: [number, number]
+    focusedLocation?: { lat: number; lng: number } | null;
+    onMarkerClick?: (loc: { lat: number; lng: number }) => void;
 }
 
 // need inner child component to use useMap hook to run on client 
-function InnerMap({ locations, center } :InnerMapProps) {
+function InnerMap({ locations, center, focusedLocation, onMarkerClick } :InnerMapProps) {
     const map = useMap();
 
     useEffect(() => {
-        map.flyTo({ lat: center[0], lng: center[1]})
-    }, [center[0], center[1]])     
+        if (!map) return;
+        const target = focusedLocation ?? { lat: center[0], lng: center[1] };
+        map.flyTo(target);
+    }, [center[0], center[1], focusedLocation?.lat, focusedLocation?.lng]);     
 
     return (
         <>
             <TileLayer
                 // @ts-ignore
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
+                url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
+                maxZoom={19}
             />
-            {separateOverlappingPoints(locations).map(({ lat, lng, color }, i) => (
-                <Marker key={i} lat={lat} lng={lng} color={color}/>
+            {separateOverlappingPoints(locations).map(({ lat, lng, color, id, start, end, room }, i) => (
+                <Marker
+                    key={i}
+                    lat={lat}
+                    lng={lng}
+                    color={color}
+                    id={id}
+                    start={start}
+                    end={end}
+                    room={room}
+                    onClick={onMarkerClick ? () => onMarkerClick({ lat, lng }) : undefined}
+                />
             ))}    
         </>
     )
 
 }
 
-function Map({ locations, zoom }: MapProps) {
+function Map({ locations, zoom, focusedLocation, onMarkerClick }: MapProps) {
     const center = getGeographicCenter(locations);
 
     return (
@@ -119,7 +136,12 @@ function Map({ locations, zoom }: MapProps) {
             scrollWheelZoom={true}
             style={{ height: "100%", width: "100%" }}
         >
-            <InnerMap locations={locations} center={center}/>
+            <InnerMap
+                locations={locations}
+                center={center}
+                focusedLocation={focusedLocation}
+                onMarkerClick={onMarkerClick}
+            />
         </MapContainer>
     );
 };

frontend/plan/components/map/MapCourseItem.tsx

@@ -100,7 +100,10 @@ interface CartSectionProps {
     end: number;
     room: string;
     hasLocationData: boolean;
+    lat?: number | null;
+    lng?: number | null;
     focusSection: (id: string) => void;
+    focusLocation?: (loc: { lat: number; lng: number }) => void;
 }
 
 function MapCourseItem({
@@ -110,7 +113,10 @@ function MapCourseItem({
     end,
     room,
     hasLocationData,
+    lat,
+    lng,
     focusSection,
+    focusLocation,
 }: CartSectionProps) {
     return (
         <CourseCartItem
@@ -120,8 +126,11 @@ function MapCourseItem({
             $isMobile={isMobile}
             $hasLocationData={hasLocationData}
             onClick={() => {
-                const split = id.split("-");
-                focusSection(`${split[0]}-${split[1]}`);
+                const [courseDepartment, courseCode] = id.split("-");
+                focusSection(`${courseDepartment}-${courseCode}`);
+                if (focusLocation && lat != null && lng != null) {
+                    focusLocation({ lat, lng });
+                }
             }}
         >
             <Dot $color={color} />

frontend/plan/components/map/MapTab.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import dynamic from "next/dynamic";
 import styled from "styled-components";
@@ -49,9 +49,16 @@ const Box = styled.section<{ $length: number }>`
 
 const MapContainer = styled.div`
     height: 40%;
-    margin-right: 8px;
-    margin-left: 8px;
-    margin-top: 5px;
+    margin: 8px 8px 12px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+    .leaflet-control-attribution {
+        font-size: 9px;
+        opacity: 0.6;
+        padding: 1px 4px;
+    }
 `;
 
 const MapCourseItemcontainer = styled.div`
@@ -106,8 +113,13 @@ function MapTab({
     focusSection,
 }: MabTapProps) {
     const [selectedDay, setSelectedDay] = useState<Day>(Weekdays.M);
+    const [focusedLocation, setFocusedLocation] = useState<{ lat: number; lng: number } | null>(null);
     const meeetingsForDay = meetingsByDay[selectedDay];
 
+    useEffect(() => {
+        setFocusedLocation(null);
+    }, [selectedDay]);
+
     return (
         <Box $length={meeetingsForDay.length} id="cart">
             <MapRadio
@@ -128,13 +140,19 @@ function MapTab({
                                     lat: meeting.latitude,
                                     lng: meeting.longitude,
                                     color: meeting.color,
+                                    id: meeting.id,
+                                    start: meeting.start,
+                                    end: meeting.end,
+                                    room: meeting.room,
                                 }))
                                 .filter(
                                     (locData) =>
                                         locData.lat != null &&
                                         locData.lng != null
                                 )}
                             zoom={14}
+                            focusedLocation={focusedLocation}
+                            onMarkerClick={setFocusedLocation}
                         />
                     </MapContainer>
                     <MapCourseItemcontainer>
@@ -163,7 +181,10 @@ function MapTab({
                                             latitude != null &&
                                             longitude != null
                                         }
+                                        lat={latitude}
+                                        lng={longitude}
                                         focusSection={focusSection}
+                                        focusLocation={setFocusedLocation}
                                     />
                                 );
                             }

frontend/plan/components/map/Marker.jsx

@@ -1,13 +1,24 @@
 import React from "react";
-import { Marker as MarkerLeaflet } from "react-leaflet";
+import { Marker as MarkerLeaflet, Popup } from "react-leaflet";
 import { divIcon } from "leaflet";
 
-const Marker = ({ color = "#878ED8", lat, lng }) => {
+const DEFAULT_MARKER_COLOR = "#878ED8";
+
+const formatTime = (t) => {
+    if (t == null) return "";
+    let hour = Math.floor(t % 12);
+    const min = Math.round((t % 1) * 100);
+    if (hour === 0) hour = 12;
+    const minStr = min === 0 ? "00" : min.toString().padStart(2, "0");
+    return `${hour}:${minStr}`;
+};
+
+const Marker = ({ color = DEFAULT_MARKER_COLOR, lat, lng, id, start, end, room, onClick }) => {
     const icon = divIcon({
         html: `
                 <svg
-                  width="20"
-                  height="28"
+                  width="14"
+                  height="20"
                   viewBox="0 0 20 28"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
@@ -19,11 +30,40 @@ const Marker = ({ color = "#878ED8", lat, lng }) => {
                 </svg>
               `,
         className: "svg-icon",
-        iconSize: [24, 40],
-        iconAnchor: [12, 40],
+        iconSize: [18, 30],
+        iconAnchor: [9, 30],
     });
 
-    return <MarkerLeaflet position={[lat, lng]} icon={icon} />;
+    return (
+        <MarkerLeaflet
+            position={[lat, lng]}
+            icon={icon}
+            eventHandlers={
+                onClick
+                    ? {
+                          click: onClick,
+                      }
+                    : undefined
+            }
+        >
+            <Popup>
+                <div style={{ fontSize: "0.85rem", lineHeight: 1.25 }}>
+                    {id && (
+                        <div style={{ fontWeight: 700, marginBottom: 4 }}>
+                            {id.replace(/-/g, " ")}
+                        </div>
+                    )}
+                    {(start != null || end != null) && (
+                        <div style={{ marginBottom: 2 }}>
+                            {formatTime(start)}
+                            {end != null ? `-${formatTime(end)}` : ""}
+                        </div>
+                    )}
+                    {room && <div>{room}</div>}
+                </div>
+            </Popup>
+        </MarkerLeaflet>
+    );
 };
 
 export default React.memo(Marker);

frontend/plan/components/modals/MapModal.tsx

@@ -20,6 +20,15 @@ const MapModal = ({ lat, lng, room, title }: MapModalProps) => {
         height: 100%;
         width: 70%;
         margin-right: 10px;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+        .leaflet-control-attribution {
+            font-size: 9px;
+            opacity: 0.6;
+            padding: 1px 4px;
+        }
     `;
 
     const MapInfoContainer = styled.ul`

frontend/plan/types.ts

@@ -262,5 +262,9 @@ export type FilterType =
         lat: number;
         lng: number;
         color?: string;
+        id?: string;
+        start?: number;
+        end?: number;
+        room?: string;
     }