search

codeforkansascity / I-Got-Mine

Connecting KCMO residents with free sexual health resources offered by the City
http://igotmineinkc.org
MIT License
6 stars 8 forks source link

Map. Add search by ZIP code (zooms in on specified ZIP code area) #78

Open tangospring opened 8 years ago

tangospring commented 8 years ago

The suggested UI is:

[Zip ][Search]

[Zip ] is five character "number" input, inputmode=numeric, max and min=5, and Zip is placeholder. [Search] is search button.

Layout:

Placement: Desktop - to the right of the tabs with 20px left margin, mobile - underneath the tabs, no left margin. No space between input and button.

Behavior:

"Oops, no such Zip code in Kansas City."

Placement and closing the error message:

Two possible approaches (the first one is better): 1) displayed as a tooltip attached to the input field below the field, to close the message, touch/click anywhere on the screen; or 2) displayed to the right of the (Search) button (desktop), and underneath the input (mobile), closed if a) user touches/clicks anywhere within the message (however do display the word "close" and the usual "close" icon [x] in the top right corner) and b) user searches for correct Zip code..

Visual formatting:

If needed, I will add CSS once functionality is in place.

QuestofIranon commented 8 years ago

I could do this if it still needs to be completed.

tangospring commented 8 years ago

Yes, this needs to be done. Thanks for offering your help, Josh. I added description of layout and behavior above.

tangospring commented 8 years ago

If this is implemented, we might skip doing issue #81 (dumb/functional map).

QuestofIranon commented 8 years ago

I'll work on it over the next few days.

What was the purpose of the dumb/functional map?

On Tuesday, August 16, 2016, Oleh Kovalchuke notifications@github.com wrote:

If this is implemented, we might skip doing issue #81 (dumb/functional map).

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.< https://ci3.googleusercontent.com/proxy/xk2H0arQIMU0u8mVByxoVag_ZtwqrI9IxMTFKom3Lf-UxMo127g5skvFsm_T4EilvnQGj1Aqaon0OLm2ovBB2PlnLWlkIaL6Agn20ILgJFfHkR05EJ7GFpxmlyJP_4OfAFPz8rQvZTCVoKnipcTjTronDUrKbQ=s0-d-e1-ft#https://github.com/notifications/beacon/ACVfxzAzYYLjUv9D4Ipghhqm-JHlEIENks5qgh_kgaJpZM4JM0FD.gif>

tangospring commented 8 years ago

On the purpose of the two maps. We encountered a problem at usability evaluation, where users would scroll the map itself on the phone, losing Kansas City context with all the icons in one swipe, getting confused about the map and unable to scroll down beyond the map. Hence the dual map approach.

QuestofIranon commented 8 years ago

I just tried it out and see what you mean I think. I wonder if it could be fixed by adding a div that overlays the map with a listener that requires holding down a few seconds before it lets a touch event be propagated on the map?

tangospring commented 8 years ago

Yes, that would fix it. However, press-and-hold is not a common or obvious interaction with the map. On top of that the audience is not technically savvy.

Also we are not the first people to encounter this problem. I have seen the dual map approach in several apps. For example, Meetup and The Weather Channel apps.

tangospring commented 8 years ago

Do you still plan to work on this, Questoflranon?

QuestofIranon commented 8 years ago

I do, sorry for the delay.

On Wed, Aug 24, 2016 at 5:20 PM, Oleh Kovalchuke notifications@github.com wrote:

Do you still plan to work on this, Questoflranon?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/codeforkansascity/I-Got-Mine/issues/78#issuecomment-242226652, or mute the thread https://github.com/notifications/unsubscribe-auth/ACVfx0yYFyJcsDlabO3opw1zPFlMJqRuks5qjMO0gaJpZM4JM0FD .

manaflow commented 7 years ago

I just got a basic version of this function working. Takes 5 digits and if valid pans to zip code on the map.

manaflow commented 7 years ago

Finished the zip code search function. Zoom value is set to 12. Can be found in somemap.js near the top. Valid KC zip codes are in a big array in somemap.js. I added a tooltip for the error message. Clicking anywhere will hide it.