Skip to content

Make map state deep-linkable so a place can be shared by URL #118

Description

@AnayDhawan

Problem

There is no way to link someone to a specific place. Opening /map always lands on the default view, so if you find your exam centre you cannot send it to anyone. Reloading the page also loses whatever you had selected.

Where to start

  • src/app/map/ - the map page and its client component
  • Place records already carry a stable id, so no data changes are needed

What to build

Read and write four URL params: place, lat, lng, zoom.

On load, if place is present, select that place and open its card. If the coordinates are present, restore that viewport. If place does not match any known id, fall back to the default view rather than erroring.

While the user pans or zooms, update the URL with history.replaceState rather than pushState, so the back button is not flooded with one entry per map movement.

Add a "Copy link" button to the place card that copies the resulting URL and shows a brief confirmation.

Acceptance criteria

  • /map?place=<valid-id> opens with that place selected and centred
  • /map?place=nonsense loads the default view without a crash or error toast
  • Panning updates the URL but adds no browser history entries
  • "Copy link" copies a URL that reproduces the current view in a fresh tab
  • Back button still leaves the map in one press

Verifying

npm install
npm run dev

Open http://localhost:3000/map, select a place, copy the link, paste it into a new tab, confirm you land in the same place.

Scope: medium, roughly 3 hours. Some familiarity with Next.js App Router search params helps.

New to the repo? Start with CONTRIBUTING.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestgrowthDistribution and tractionhelp wantedExtra attention is welcome

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions