Map defaults to meaningful center when geolocation is unavailable

A map that renders at coordinates (0,0) — the null island in the Gulf of Guinea — or displays a blank canvas when geolocation is unavailable is broken for every user who declines location permission, uses a browser that blocks geolocation, or accesses the site from a context where the Geolocation API is restricted. ISO 25010:2011 reliability requires graceful degradation to a usable state. For a directory product, a map centered on a relevant geographic area is the minimum functional state — users can always pan to their location manually, but they cannot use a blank or miscentered map at all.

Define a constant default center relevant to your directory's primary geography and use it as the map's initial state, regardless of whether geolocation succeeds.

const DEFAULT_CENTER = { lat: 40.7128, lng: -74.0060 }; // set to your directory's primary city
const DEFAULT_ZOOM = 10;

function MapComponent() {
  const [center, setCenter] = useState(DEFAULT_CENTER);
  const [zoom, setZoom] = useState(DEFAULT_ZOOM);

  const handleNearMe = () => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setCenter({ lat: pos.coords.latitude, lng: pos.coords.longitude });
        setZoom(13);
      },
      () => { /* geolocation failed — map stays at DEFAULT_CENTER */ }
    );
  };

  return <MapLibreGl center={center} zoom={zoom} />;
}

Never initialize the map with null or (0, 0) coordinates. The default center should be a conscious choice — your directory's primary metro, not an arbitrary placeholder.

• ID: directory-map-location.location-search.map-default-center

• Severity: medium

• What to look for: Test the map view when geolocation is denied or unavailable. Check whether the map centers on a meaningful location (e.g., a predefined city, national center, or user-selected region) or shows a blank/frozen state. Look for fallback logic in the map initialization.

• Pass criteria: When geolocation fails or is unavailable, the map displays a reasonable default center with at least 1 predefined fallback coordinate pair. Quote the actual default center coordinates from code. The map is interactive and users can navigate to other areas. List all fallback paths and confirm each renders a usable map.

• Fail criteria: Map fails to render, displays (0,0), or shows a blank canvas when geolocation is unavailable. Users cannot interact with the map. A default center of (0,0) does not count as pass.

• Skip (N/A) when: No map view or location feature exists, or geolocation is not used as the primary location input.

• Detail on fail: "Map shows blank canvas and coordinates (0,0) when geolocation is denied" or "Map fails to load when location permission is unavailable; no fallback center defined"

• Remediation: Define a sensible default map center and ensure the map renders even without user location:

  const DEFAULT_CENTER = { lat: 40.7128, lng: -74.0060 }; // New York
  const DEFAULT_ZOOM = 10;
  
  function MapComponent() {
    const [center, setCenter] = useState(DEFAULT_CENTER);
    const [zoom, setZoom] = useState(DEFAULT_ZOOM);
  
    useEffect(() => {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          setCenter({ lat: pos.coords.latitude, lng: pos.coords.longitude });
          setZoom(13); // Zoom in when user location available
        },
        (err) => {
          // Geolocation failed — center defaults to DEFAULT_CENTER
          console.log('Using default map center');
        }
      );
    }, []);
  
    return <MapLibreGl center={center} zoom={zoom} />;
  }