CodeForPhilly / CodeForPhilly/clean-and-green-philly

A11y: Outline and apply texture to property polygons in the map

Open
#474 8 comments 0 reactions 0 assignees View on GitHub
A11y
Dominant language
Python
Stars
50
Forks
92
PR merge metrics
No merged PRs in 30d

Description

## Description
The properties shown in the map are hard to distinguish and differentiate; boundaries are unclear and the priority is only conveyed through color alone. To make it visually accessible, we should outline and apply texture on the property polygons.

## Potential Solutions
- Apply 1.5-2px outline on property polygon (black or near black color #313537)
- Apply texture fill as an additional indicator for priority

Sample screenshot when properties are outlined

![Screenshot 2024-03-24 at 22 40 35](https://github.com/CodeForPhilly/vacant-lots-proj/assets/102739972/be2e06f5-ee0f-4165-9e12-8baba3ade766)

## For Considerations
At high zoom (out) levels, the outline and the pattern applied to the polygons can drastically diminish the color coding, making the experience more ambiguous and counter-intuitive. We should explore:

- Only outline polygons at lower zoom levels
- Identify the minimum zoom level when we start to show the outlined polygons
- Only fill the polygons with texture at lower zoom levels
- Identify the minimum zoom level when we start to show the texture

We should explore, test & iterate on this idea.

Contributor guide

Open the contributing guide

Research direction

Start by locating the map property-polygon rendering entry point and checking how polygon colors and zoom levels are currently handled. Explore outline and texture treatments at different zoom levels, then validate that property boundaries and priority remain distinguishable without making the color coding ambiguous.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.