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

[tangospring]

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:

• The input accepts numeric values only.
• If valid Kansas City zip code is entered, on click:
  1. display the zip code in the input,
  2. (optional) scroll zip code input to the top of the screen,
  3. zoom in map on the zip code area,
  4. (optional) show outline of the zip code area.
• If invalid zip code entered, on click:
  1. preserve input,
  2. display error message.

The error message.

Content:

"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]

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

[tangospring]

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

[tangospring]

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

[QuestofIranon]

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 [email protected]
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]

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]

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]

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]

Do you still plan to work on this, Questoflranon?

[QuestofIranon]

I do, sorry for the delay.

On Wed, Aug 24, 2016 at 5:20 PM, Oleh Kovalchuke [email protected]
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
#78 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACVfx0yYFyJcsDlabO3opw1zPFlMJqRuks5qjMO0gaJpZM4JM0FD
.

[manaflow]

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

[manaflow]

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.