Search radius reflected in URL parameters for shareability

When search radius, center coordinates, and filters live only in component state, users cannot bookmark a result set, share a link to nearby listings, or reload without losing context — a direct hit to organic sharing, paid-ad landing pages, and SEO for location pages. Back-button navigation also breaks because the browser has no URL delta to restore. Encoding search state in the query string is the canonical fix and aligns with W3C URI design guidance on addressable resources.

Push the active latitude, longitude, radius, and any filters into the URL query string on every search mutation, and hydrate the search form and results from router.query on mount so a pasted URL reproduces the same result set. Implement this inside the search page (e.g. src/app/listings/page.tsx) using shallow navigation to avoid a full reload:

router.push(
  { pathname: '/listings', query: { lat, lng, radius, ...filters } },
  undefined,
  { shallow: true },
);

• ID: directory-map-location.location-search.radius-in-url

• Severity: high

• What to look for: Perform a radius search and check the URL. Verify that search parameters (latitude, longitude, radius, filters) are reflected in the URL query string. Copy the URL and paste it in a new tab or share it — verify the search is recreated correctly.

• Pass criteria: Search parameters (center coordinates, radius, filters) are encoded in the URL. Count all search parameters and confirm at least 3 (lat, lng, radius) appear in the URL. Sharing the URL recreates the same search state. On pass, report the ratio of URL-reflected parameters to total search parameters.

• Fail criteria: URL does not reflect search parameters. Shared URLs do not preserve the search state. A URL that only includes the search query but not coordinates or radius does not count as pass.

• Skip (N/A) when: No radius-based search or URL state management exists.

• Detail on fail: "URL is /listings after a search; no parameters reflect the search criteria or radius" or "Sharing a search URL loads a blank search instead of the original results"

• Remediation: Encode search state in the URL query string:

  function SearchListings() {
    const router = useRouter();
    const { lat, lng, radius } = router.query;
  
    const handleSearch = (lat, lng, radius) => {
      router.push(`/listings?lat=${lat}&lng=${lng}&radius=${radius}`);
    };
  
    useEffect(() => {
      if (lat && lng && radius) {
        loadSearchResults(lat, lng, radius);
      }
    }, [lat, lng, radius]);
  
    return (
      // Search form and results
    );
  }