MapModal

MapModal Component

Description

The MapModal component provides an expanded, full-screen map view of an apartment's location with detailed travel time information to key Cornell University landmarks. It includes both walking and driving times, interactive map controls, and responsive design for mobile/desktop.

Props Interface

export type BaseProps = {
  readonly address: string | null;
  readonly latitude?: number;
  readonly longitude?: number;
  readonly travelTimes?: LocationTravelTimes;
  isMobile: boolean;
};

interface MapModalProps extends BaseProps {
  aptName: string;
  open: boolean;
  onClose: () => void;
}

• [aptName]: String representing the apartment complex name
• [open]: Boolean controlling modal visibility
• [onClose]: Callback function to close the modal
• [address]: String representing the apartment's address (inherited from BaseProps)
• [latitude]: Number for apartment's latitude coordinate (inherited from BaseProps)
• [longitude]: Number for apartment's longitude coordinate (inherited from BaseProps)
• [travelTimes]: Object containing walking/driving times to campus locations (inherited from BaseProps):
  • engQuadWalking/Driving: Time to Engineering Quad
  • hoPlazaWalking/Driving: Time to Ho Plaza
  • agQuadWalking/Driving: Time to Ag Quad
• [isMobile]: Boolean indicating mobile device view (inherited from BaseProps)

Example Usage

function ApartmentPage() {
  const [isMapOpen, setIsMapOpen] = useState(false);
  
  return (
    <MapModal
      aptName="College Town Terrace"
      open={isMapOpen}
      onClose={() => setIsMapOpen(false)}
      address="123 College Ave"
      latitude={42.4445}
      longitude={-76.4836}
      travelTimes={{
        engQuadWalking: 10,
        engQuadDriving: 3,
        hoPlazaWalking: 15,
        hoPlazaDriving: 4,
        agQuadWalking: 20,
        agQuadDriving: 5
      }}
      isMobile={false}
    />
  );
}

Expected Behavior

• Opens a modal dialog with a full-screen/large map view
• Displays apartment location and campus landmarks with custom markers
• Shows both walking and driving times to key campus locations
• Provides zoom controls and recenter functionality
• Adapts layout for mobile/desktop views

Edge Cases

• Missing coordinates default to (0,0)
• Missing travel times display as 0 minutes
• Zoom limits enforced between 11-20

Implementation Strategy

• Uses Material-UI Dialog for modal functionality
• Maintains map instance reference using useRef for control operations
• Implements responsive design using Material-UI's useMediaQuery
• Custom styling applied through makeStyles with mobile/desktop variants

Runtime Analysis

• Component initialization: O(1)
• Map operations (zoom, recenter): O(1)
• Marker rendering: O(1) - fixed number of markers
• Travel time calculations: O(1) - pre-calculated values passed as props