fix(map): restore IP-based initial centre; assorted review tweaks

- MapView: restore the hasInitialPosition gate. MapLibre's initialViewState
  is consumed once at mount, so mounting before the IP lookup resolves
  locks the map to DEFAULT_COORDINATES (Brisbane) even after IP data
  arrives. The gate waits for either a selected listing or the IP
  fallback to resolve before mounting.
- useIpInitialLocation: on timeout or error, fall back to
  DEFAULT_COORDINATES so the gate always eventually lifts (addresses the
  earlier concern about the map never rendering on IP failure).
- mapUtils: drop the unused DEFAULT_COORDINATES.zoom; ZOOM_LEVEL_DEFAULT
  is already the canonical default zoom.
- useMapListingUrl: memoize the Supabase client so fetchBySlug /
  selectListingById don't churn on every render.
- MapPin: tighten isListingPinType with hasOwnProperty.call so inherited
  prototype keys like "toString" can't incorrectly narrow to ListingType.

Made-with: Cursor

Author: dnywh

src/components/MapPin/MapPin.tsx

@@ -154,7 +154,11 @@ const iconMap: Record<ListingType, React.ComponentType<{ size?: string }>> = {
 };
 
 function isListingPinType(value: string | undefined): value is ListingType {
-  return value !== undefined && value in iconMap;
+  // Guard against inherited Object.prototype keys like `"toString"` that a
+  // plain `value in iconMap` check would accept.
+  return (
+    value !== undefined && Object.prototype.hasOwnProperty.call(iconMap, value)
+  );
 }
 
 function MapPin({ selected = false, type }: MapPinProps) {

src/features/map/components/MapView.tsx

@@ -178,6 +178,14 @@ export default function MapView({
     selectedListing,
   });
 
+  // MapLibre's `initialViewState` is only consumed once at mount, so we wait
+  // for either a selected listing or the IP-based (or fallback) initial
+  // centre to resolve before mounting the Map. `useIpInitialLocation`
+  // always resolves (to DEFAULT_COORDINATES on failure), so this cannot
+  // stall indefinitely.
+  const hasInitialPosition =
+    hasValidCoordinates(selectedListing) || Boolean(initialCoordinates);
+
   useEffect(() => {
     const protocol = new Protocol();
     maplibregl.addProtocol("pmtiles", protocol.tile);
@@ -242,59 +250,61 @@ export default function MapView({
 
   return (
     <MapContainer>
-      <>
-        <Map
-          ref={mapRef}
-          attributionControl={false}
-          mapStyle={MAP_STYLE}
-          renderWorldCopies={true}
-          initialViewState={resolveInitialViewState(
-            selectedListing,
-            initialCoordinates
-          )}
-          onMoveEnd={handleMoveEnd}
-          onLoad={handleLoad}
-          onClick={handleMapClickInternal}
-        >
-          <GeolocateControl showUserLocation={true} />
-          <NavigationControl showZoom={true} showCompass={false} />
-
-          <AttributionControl
-            compact={true}
-            style={
-              !isDesktop
-                ? attributionControlMobileStyle
-                : attributionControlDesktopStyle
-            }
+      {hasInitialPosition && (
+        <>
+          <Map
+            ref={mapRef}
+            attributionControl={false}
+            mapStyle={MAP_STYLE}
+            renderWorldCopies={true}
+            initialViewState={resolveInitialViewState(
+              selectedListing,
+              initialCoordinates
+            )}
+            onMoveEnd={handleMoveEnd}
+            onLoad={handleLoad}
+            onClick={handleMapClickInternal}
+          >
+            <GeolocateControl showUserLocation={true} />
+            <NavigationControl showZoom={true} showCompass={false} />
+
+            <AttributionControl
+              compact={true}
+              style={
+                !isDesktop
+                  ? attributionControlMobileStyle
+                  : attributionControlDesktopStyle
+              }
+            />
+
+            <MapPinLayer
+              listings={listings}
+              selectedListingId={selectedListingId}
+              DrawerTrigger={DrawerTrigger}
+              onMarkerClick={onMarkerClick}
+            />
+          </Map>
+
+          <MapSearch
+            onPick={handleSearchPick}
+            countryCode={countryCode}
+            style={searchStyle}
           />
 
-          <MapPinLayer
-            listings={listings}
-            selectedListingId={selectedListingId}
-            DrawerTrigger={DrawerTrigger}
-            onMarkerClick={onMarkerClick}
-          />
-        </Map>
-
-        <MapSearch
-          onPick={handleSearchPick}
-          countryCode={countryCode}
-          style={searchStyle}
-        />
-
-        {isFetching && <LoadingChip>{t("loadingPins")}</LoadingChip>}
-
-        {showReturnButton && (
-          <ReturnToListingButton
-            onClick={flyToSelected}
-            variant="secondary"
-            size="small"
-            width="contained"
-          >
-            {t("returnToListing")}
-          </ReturnToListingButton>
-        )}
-      </>
+          {isFetching && <LoadingChip>{t("loadingPins")}</LoadingChip>}
+
+          {showReturnButton && (
+            <ReturnToListingButton
+              onClick={flyToSelected}
+              variant="secondary"
+              size="small"
+              width="contained"
+            >
+              {t("returnToListing")}
+            </ReturnToListingButton>
+          )}
+        </>
+      )}
     </MapContainer>
   );
 }

src/features/map/hooks/useIpInitialLocation.ts

@@ -5,7 +5,7 @@ import { config, geolocation } from "@maptiler/client";
 
 import type { ListingCoordinates } from "@/types/listing";
 
-import { ZOOM_LEVEL_DEFAULT } from "../lib/mapUtils";
+import { DEFAULT_COORDINATES, ZOOM_LEVEL_DEFAULT } from "../lib/mapUtils";
 
 type UseIpInitialLocationArgs = {
   // Skip when the page already has a listing slug (deep-linked selections
@@ -30,8 +30,9 @@ function ensureMapTilerConfig() {
   hasConfiguredMapTiler = true;
 }
 
-// One-time IP-based initial centre. MapView falls back to
-// DEFAULT_COORDINATES if this fails or is skipped.
+// One-time IP-based initial centre. On timeout or error we still resolve to
+// `DEFAULT_COORDINATES` so MapView, which gates on `initialCoordinates`
+// being set, always eventually mounts.
 export function useIpInitialLocation({
   skip = false,
 }: UseIpInitialLocationArgs = {}): UseIpInitialLocationResult {
@@ -48,6 +49,14 @@ export function useIpInitialLocation({
     let cancelled = false;
     let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
+    const applyFallback = () => {
+      if (cancelled) return;
+      setInitialCoordinates({
+        ...DEFAULT_COORDINATES,
+        zoom: ZOOM_LEVEL_DEFAULT,
+      });
+    };
+
     async function initializeLocation() {
       // Race the network call against a 3s timeout. We track the timeout id
       // so we can clear it once the race settles — otherwise the losing
@@ -85,13 +94,16 @@ export function useIpInitialLocation({
             longitude: lng,
             zoom: ZOOM_LEVEL_DEFAULT,
           });
+        } else {
+          applyFallback();
         }
       } catch (error) {
         if (cancelled) return;
         console.warn(
           "Could not determine location from MapTiler:",
           (error as Error).message
         );
+        applyFallback();
       } finally {
         if (timeoutId !== null) {
           clearTimeout(timeoutId);

src/features/map/hooks/useMapListingUrl.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 
@@ -49,7 +49,10 @@ export function useMapListingUrl({
   const t = useTranslations();
   const router = useRouter();
   const searchParams = useSearchParams();
-  const supabase = createClient();
+  // `createClient()` builds a new Supabase browser client each call, so
+  // memoize to keep the reference stable — otherwise `fetchBySlug` /
+  // `selectListingById` churn on every render.
+  const supabase = useMemo(() => createClient(), []);
 
   const listingSlug = searchParams.get("listing");
 

src/features/map/lib/mapUtils.ts

@@ -15,11 +15,12 @@ export type BoundingBox = {
   east: number;
 };
 
-// Default coordinates for Brisbane, Australia
-export const DEFAULT_COORDINATES: ListingCoordinates & { zoom: number } = {
+// Default coordinates for Brisbane, Australia — the absolute fallback when
+// IP-based geolocation is unavailable. Pair with `ZOOM_LEVEL_DEFAULT` for
+// the zoom level.
+export const DEFAULT_COORDINATES: ListingCoordinates = {
   latitude: -27.4683,
   longitude: 153.0322,
-  zoom: 9,
 };
 
 export const ZOOM_LEVEL_DEFAULT = 11;