$${Math.round(hotel.desiredNightPrice / 10)}

`,\n iconSize: [30, 30],\n iconAnchor: [15, 15]\n });\n \n marker.setIcon(icon);\n \n // If selected, center map on this hotel\n if (isSelected) {\n leafletMapRef.current.setView([hotel.latitude, hotel.longitude], 13);\n }\n }\n });\n }\n }, [selectedHotelId, hotels]);\n\n // Function to update markers on the map\n const updateMarkers = () => {\n const { L } = window;\n \n // Clear existing markers\n Object.values(markersRef.current).forEach(marker => {\n leafletMapRef.current.removeLayer(marker);\n });\n markersRef.current = {};\n \n // Add new markers\n const bounds = L.latLngBounds();\n \n hotels.forEach(hotel => {\n const isSelected = hotel.id === selectedHotelId;\n \n // Create a custom icon with the price\n const icon = L.divIcon({\n className: 'custom-div-icon',\n html: `

$${Math.round(hotel.desiredNightPrice / 10)}

`,\n iconSize: [30, 30],\n iconAnchor: [15, 15]\n });\n \n // Create marker\n const marker = L.marker([hotel.latitude, hotel.longitude], { icon })\n .addTo(leafletMapRef.current);\n \n // Add popup with hotel info\n marker.bindPopup(`\n

${hotel.name}

${hotel.address}

\n ${formatPrice(hotel.desiredNightPrice)} per night\n

\n Save ${formatPrice(hotel.differential)}\n

\n `);\n \n // Add click handler\n marker.on('click', () => {\n onHotelSelect(hotel.id);\n });\n \n // Store marker reference\n markersRef.current[hotel.id] = marker;\n \n // Extend bounds to include this marker\n bounds.extend([hotel.latitude, hotel.longitude]);\n });\n \n // Fit map to bounds if we have hotels\n if (hotels.length > 0) {\n leafletMapRef.current.fitBounds(bounds, {\n padding: [50, 50],\n maxZoom: 13\n });\n }\n };\n\n return (\n

Hotel Locations

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/mattwd7/bestHotelPriceDifferential/code/frontend/components/HotelMap.tsx","extension","actionData","errors"]