UXD - Clarify regions that are not part of LA city on Map

[nichhk]

Overview

We need to clarify when a user is hovering over an area that is NOT a neighborhood council because users are getting confused about what they are selecting, leading to a bad and confusing experience with our app.

Releases

• DEV - Darken parts of the map that you can't interact with #1585

Action Items

• Address the problem overview with possible design solution(s) in a comment
• Complete Design Iterations section below
• Document user interaction in Figma

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

REPLACE WITH SCREENSHOT UPLOAD

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."

[melissahermes99]

@elizabeth-ux , @EchoProject , and I discussed this during the meeting tonight and we thought a good way to work around this issue could be muting the areas that are not a part of LA. For example, lightening the names of surrounding cities or removing the names altogether, and removing geographical features such as mountains and roads. I am not sure how feasible this solution is but I can work on some mockups of how that might look in the coming days.

[EchoProject]

@melissahermes99 Nich thinks we should be able to put an overlay over parts of the map. He's going to look into it further, and I think we can start mocking up designs for what this might look like. He mentioned we should consider cases like Beverly Hills and Culver City that are not a part of LA and look like they are within the city boundary.

[melissahermes99]

I created some concepts of what the map could look like. Since I'm not sure if we'll be able to remove geographical features, I figured these maps would be a good place to start as far as ideas go. @nichhk @elizabeth-ux @EchoProject

[mc759]

@edwinjue see list below for areas not included in LA City (I can point to each place on the last map that @melissahermes99 posted in August

Incorporated Cities:

• West Hollywood
• Beverly Hills
• Culver City
• Santa Monica
• Universal City
• San Fernando
• Inglewood

Unincorporated

• Marina Del Ray
• Unincorporated LA Southwest of Culver City (this includes View Park-Windsor Hills, Ladera Heights, and oil fields)
• Federal Land (VA Campus)
• Franklin Canyon (weird square above Beverly Hills)

Let me know if you have any questions or need visual assistants

[ryanfchase]

Archiving the previous version of this ticket as of 2025-02-08

Title

Clarify regions that are not part of LA city on Map #1305

Body

### Overview
On the map, there are certain regions that are not part of the City of LA--e.g., West Hollywood, Beverly Hills, Culver City--but are entirely contained within the city. The only indication that they are not part of the city is that they have no request pins there and that hovering over them doesn't highlight them.

### Action Items
- [ ] Determine if there is a way to more clearly demonstrate that these regions are not part of the city. If there's not, the current design is fine.

### Resources
- #1396 
See dev.311-data.org to see an example of the current state.

### Dependency

- [x] Per @wmb1232: we would need the geoJson coordinates for the places we are trying to differentiate
- [x] I have a list of questions (WIP) for dev and design, adding to agenda for upcoming product planning meeting

[cottonchristopher]

Create ticket to research the listed city boundaries. (Dev ticket) #1305 (comment)

[ryanfchase]

Passing this off to design lead. Please add the following labels:

• size
• complexity

If this ticket looks OK, please add

• ready for prioritization

[ryanfchase]

Prioritized. This ticket is ready to be picked up 👍