diff --git a/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx b/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
index 955842a2..0c03da15 100644
--- a/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
+++ b/web/frontend/app/features/breweries/components/NearbyBreweriesSection.tsx
@@ -13,7 +13,7 @@ const NearbyBreweryMap = lazy(() => import('./NearbyBreweryMap'));
const MAP_PLACEHOLDER_CLASS = 'skeleton min-h-[30rem] h-full w-full rounded-box';
const DEFAULT_RADIUS_KM = 120;
const MIN_RADIUS_KM = 10;
-const MAX_RADIUS_KM = 150;
+const MAX_RADIUS_KM = 300;
const RADIUS_STEP_KM = 10;
const RADIUS_DEBOUNCE_MS = 300;
diff --git a/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx b/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
index 8302ebdf..1bd16fb8 100644
--- a/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
+++ b/web/frontend/app/features/breweries/components/NearbyBreweryMap.tsx
@@ -3,6 +3,9 @@ import { MapContainer, TileLayer, Marker, Popup, CircleMarker, useMap } from 're
import L, { type LatLngTuple } from 'leaflet';
import 'leaflet/dist/leaflet.css';
+const DEFAULT_ZOOM = 11;
+const MIN_ZOOM = 8;
+
export interface NearbyMapPin {
id: string;
name: string;
@@ -51,10 +54,10 @@ const FitAndFocus = ({
useEffect(() => {
if (didInitialFit.current) return;
- const points: LatLngTuple[] = pins.map((pin) => [pin.latitude, pin.longitude]);
- if (userLocation) points.push(userLocation);
- if (points.length > 0) {
- map.fitBounds(points, { padding: [40, 40], animate: false });
+ const focus: LatLngTuple | null =
+ userLocation ?? (pins[0] ? [pins[0].latitude, pins[0].longitude] : null);
+ if (focus) {
+ map.setView(focus, DEFAULT_ZOOM, { animate: false });
didInitialFit.current = true;
}
const timeout = setTimeout(() => map.invalidateSize(), 200);
@@ -71,6 +74,33 @@ const FitAndFocus = ({
return null;
};
+const RecenterButton = ({ userLocation }: { userLocation: LatLngTuple | null }) => {
+ const map = useMap();
+ if (!userLocation) return null;
+ return (
+
+ );
+};
+
const NearbyBreweryMap = ({
pins,
selectedId,
@@ -80,7 +110,8 @@ const NearbyBreweryMap = ({
}: NearbyBreweryMapProps) => (
@@ -89,6 +120,7 @@ const NearbyBreweryMap = ({
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
+
{userLocation && (