Show pin legends on map

[lucascumsille]

Fixes: https://github.com/mysociety/societyworks/issues/5466

TODOs

• Desktop version needs to be hidden on mobile.
• Needs a mobile solution. For now, I think I'll try adding a drawer inside the sidebar. It shouldn't use much space.
• For the around page, because we have more space I have included another map item into the .map_links
• Make it work on (landscape) tablet devices, where there’s no hover and no keyboard
• Once the backend development is ready. We need some testing specially on tablet, where some cobrands might have less available space for the panel.

TODOs Developer
The only that comes to mind is:

• Needs back-end work so the legend panel uses the pins and legends from their respective cobrands.

Notes:

• At the beginning I put the drawer on the right side with the other controllers on desktop, but it seemed a bit spaced limited considering the list of pins can get quite long.
• Happy to change the pin-legend-wrapper--preview for something else, for now it seem like a good approach for now. Considering that we have cobrands that use other pins, those previews could be problematic to implement.

Desktop

Screen.Recording.2026-06-16.at.06.48.09.mov

Keyboard navigation

Screen.Recording.2026-06-16.at.06.51.46.mov

Mobile

Reports page

Screen.Recording.2026-05-18.at.09.28.23.mov

Around page

Screen.Recording.2026-05-18.at.10.11.05.mov

[codecov]

Codecov Report

❌ Patch coverage is 14.28571% with 18 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.38%. Comparing base (ad53015) to head (12fd8be).

Files with missing lines	Patch %	Lines
web/cobrands/fixmystreet/fixmystreet.js	14.28%	18 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5977      +/-   ##
==========================================
- Coverage   83.41%   83.38%   -0.03%     
==========================================
  Files         500      500              
  Lines       37341    37358      +17     
  Branches     6167     6167              
==========================================
+ Hits        31147    31150       +3     
- Misses       4386     4400      +14     
  Partials     1808     1808              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[lucascumsille]

@dracos and @davea let me know if you have any thoughts about this approach, happy to make any changes. I'll try to have something for mobile before the user group.

[lucascumsille]

@dracos I just added some version for mobile(/around and /reports pages)

[davea]

The design of this supersedes #5586, but that PR's approach to configuring pin colours per-cobrand might be worth using.

[lucascumsille]

For tablet I need to add a click for the desktop version.

[lucascumsille]

@davea I left this PR ready for review, but it's not really ready for merge. It needs all the back-end changes so we use the pins and legends from each cobrand.

[davea]

This looks great! Dev work to add per-cobrand colours being tracked here: https://github.com/mysociety/societyworks/issues/5595.