Implement search when panning in Map View

[brampitoyo]

When the user pans around the Map View:

• A button labelled “Search Here” should appear underneath the map

When tapped, a search is performed around the selected radius:

• The button changes label to “Searching…” and greys out
• User can no longer pan or zoom around the map
• If any card is currently selected, it should animate out and be deselected

When search has been performed:

• The button disappears
• Map pins/place indicators animate in (bounce) from the top
• Seen on animation, but don’t do it: the closest place on the map is selected

[mcomella]

For Chicago, we likely won't have time to update the Details card view screen with the new list of places. I've mentioned this to Anthony on Slack and he seemed okay with it. Chenxia mentioned that, when we close the map view, we can pan back to the user's current location so it isn't jarring that the place list doesn't represent the new location.

[mcomella]

Thought: search in other places won't find anything because we only have hand-curated Discover places for downtown. Solutions:

• Enable non-curated Discovery data outside the circle
• Add other categories (e.g. Food/Drink) outside the circle

[brampitoyo]

when we close the map view, we can pan back to the user's current location so it isn't jarring that the place list doesn't represent the new location.

Good idea. The animation should be identical to the one that happens when you tap “Return to my location”. Except at the end of it, we animate out the map view, revealing the home view underneath.

[mcomella]

@antlam What should the dialog text be, the one that says, "We don't yet support searching in this area"?

Note to self: just do this when place count is 0.

[antlam]

@mcomella for Chicago, let's go with "No results for this area yet"

Instead of just "Dismiss" as the action. Can we also offer a "Reset" action? That way, the user can re-center from the dialog screen. But only if it's easy!

[brampitoyo]

Button specs:

• Position:
  • 316px from top of the inner map circle
  • Center horizontally
• Style – replicate the style of our filters:
  • Active state:
  • background-color: #007AFF
  • Inactive state:
  • background-color: #999999
  • color: #FFFFFF
  • font-size: 16px
  • Side padding: 20px
• Shadow – replicate the style of our card shadow:
  • box-shadow: 0 2px 5px 0 rgba(0,0,0,0.40);

[mcomella]

316px from top of the inner map circle

The of the circle width is variable by device width and we set the height to equal the width so this won't work. I'm setting the buttons center Y to the bottom-most point in the circle, atm.

[brampitoyo]

I'm setting the buttons center Y to the bottom-most point in the circle, atm.

This is a more correct and elegant approach to positioning. I didn’t realise that we can do it dynamically!