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.