search

hackforla / lucky-parking

Visualization of parking data to assist in understanding of the effects of parking policies on a neighborhood by neighborhood basis in the City of Los Angeles
https://www.hackforla.org/projects/lucky-parking.html
34 stars 60 forks source link

UI Single Type: Place Radius UI #538

Closed dannycpham closed 11 months ago

dannycpham commented 1 year ago

User Story

As a user, I want to be able to select a place on the map and expand or decrease the radius of the area to compare parking citations.

Description

As a user, I want to be able to properly increase or decrease radius of places that I select.

If I select an area that is "Place (Radius)" tagged, I want a new UI to appear in the top middle of the map that would give me control to expand or decrease the radius.

This new UI would have 3 main components:

  1. Distance Type This will be a dropdown with either "Miles", "Feet", "KM", and "M" I want "Miles" to be selected as default.

  2. Numerical Entry This will be a numerical only entry (please ensure no alpha characters can be entered in). I want users to be able to add numbers with a decimal point after to the tenth place. "2.x"

I want this to be defaulted to 1.

I want this numerical text box to dynamically adjust when the user changes distance type.

If the user changes from "Miles" to "Feet", I want whatever the number is to be automatically converted to Feet.

  1. Apply Button I want this button to be defaulted to Gray and unclickable until the user has appropriate filled out the radius information. If the numerical entry component is empty, the Apply Button will be empty. If both are filled out correctly, the Apply button will become Blue, per the Figma, and become clickable.

When the Apply button is clicked, I want the data in the graphs on the UI Single Type to be updated with the appropriately selected Radius surrounding the point of interest.

There will be 2 components within the map itself.

  1. Point When a user has selected a place that is "Place (Radius)" tagged, I want a red location point to land at the specific location. This will serve to act as the exact location and the center point of the radius circle. Please follow the Figma for the icon.

  2. Radius Circle I want this light blue radius circle to dynamically expand and decrease as the user changes the inputs on Distance Type and Numerical Entries.

Acceptance Criteria

  1. If I click on a place and select the radius to be Miles -> 3, then, I expect the map to adjust accordingly to this new radius and show me the data of that specifically radius.

Design References

Figma

Technical References

No response

Additional Information

No response

glenflorendo commented 1 year ago

@gibsonliketheguitar You should ignore the map stuff (point and radius circle).

glenflorendo commented 1 year ago

@gibsonliketheguitar Estimate the points when you can. Thanks!