\n {/* Map Header */}\n

Map View

\n Showing {apartments.length} apartments in the area\n

\n\n {/* Map Container */}\n

\n {/* Simulated Map Background */}\n

\n {/* Grid lines to simulate map */}\n \n \n {/* Simulated streets */}\n

\n\n {/* Apartment Markers */}\n {apartments.map((apartment, index) => {\n const position = getApartmentPosition(apartment, index);\n return (\n handleMarkerClick(apartment)}\n >\n {/* Marker */}\n

\n ${Math.floor(apartment.price / 100)}\n

\n \n {/* Tooltip on hover */}\n

\n {apartment.title}\n

\n );\n })}\n\n {/* Map Controls */}\n

\n \n \n

\n\n {/* Legend */}\n

Price Range

\n Apartments\n

\n\n {/* Selected Apartment Info */}\n {selectedApartment && (\n

{selectedApartment.title}

{selectedApartment.location}

${selectedApartment.price}/month

\n {selectedApartment.bedrooms} bed\n {selectedApartment.bathrooms} bath\n {selectedApartment.sqft} sq ft\n

\n \n

\n onSelectApartment(selectedApartment)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n View Details\n \n setSelectedApartment(null)}\n className=\"bg-gray-300 text-gray-700 px-3 py-2 rounded-lg hover:bg-gray-400 transition-colors\"\n >\n ×\n \n

\n )}\n\n {/* No apartments message */}\n {apartments.length === 0 && (\n

No apartments to display on map

Try adjusting your search filters

\n )}\n \n );\n}","deleted","label",[170,171,172,153],"frontend","components","Map","permalink","https://www.val.town/x/Mac4/untitled-5794/code/frontend/components/Map/MapView.tsx","extension","actionData","errors"]