Building off of @RHo's work, here are two preliminary prototypes of the transitions, states and interactions on the nearby tab:

• Map interactions on the nearby tab
• Pin, search and list interactions on Nearby tab

Separate Map and List
Default map view which toggles to show a full list view of nearby articles
https://wikimedia.invisionapp.com/share/HF9QNBNJ3
This prototype is an updated version of the prototype that the videos above are based on, with distinct map and list views. In this prototype I’ve updated the pin designs to make them smaller and not much else has changed. Pros and cons are outlined in the first screen of the prototype.

Integrated Map and List
Map view with sliding list overlay featuring expanding article cells
https://wikimedia.invisionapp.com/share/6E9RB7XVY
This prototype is built around a single screen experience. There is a list view which slides up from the bottom of the screen when the hint is tapped or when a pin is selected. Pros and cons are outlined in the first screen of the prototype.

Bottom toggle map and list
Default map view with a rounded toggle between map and list view at bottom
https://wikimedia.invisionapp.com/share/G99SNTIRY
This prototype is built around a single screen experience. There is a floating search box and a bottom toggle between the default map view and a list view overlay. Pros and cons are outlined in the first screen of the prototype.

Bottom toggle map and list
Default map view with static search header and visual toggle between map and list view.
https://wikimedia.invisionapp.com/share/E69SNZX78
This prototype has a toggle between two separate screens (map and list). The toggle is located on a static search bar at the top of the screen. Pros and cons are outlined in the first screen of the prototype.

Search bar toggle
Default list view with static search box and visual toggle between map and list view.
https://wikimedia.invisionapp.com/share/XY9SOH7TD
This prototype is built around a single screen experience. There is a floating search box with a toggle between the default map view and a list view overlay. Pros and cons are outlined in the first screen of the prototype.

Initial thoughts on subtasks/order of development:

• Build a map tab with current position/reposition logic
• Pin preview and actions
• List view
• Search in maps
• Pre-filled searches (Most Read, Highest Quality, etc)
• Dealing with large zoom scales and pin clustering
• RTL, localization and dynamic type
• Analytics and metrics

To be further broken down by tech.

Pin clustering
In areas with high pin density, or when a user has zoomed out on the map, pins are clustered.
https://wikimedia.invisionapp.com/share/P39WIX6VH
This prototype illustrates an approach to clustering pins on the Nearby tab map view. Pins are clustered based on geographic proximity outside of the default map zoom level. Pros and cons are outlined on the first screen of the prototype. Cluster styling inspired by http://sfbay.craigslist.org/search/apa and Apple Maps.

Exact clustering logic and animations to follow upon approval of design.

Also @JMinor, not sure if we want to include any of these tasks as subtasks of this epic? Some might require breaking down of their own*:

As a user who as denied location permissions to the app, I want to know what I am missing
https://phabricator.wikimedia.org/T123684

App should not ask for location permission during onboarding
https://phabricator.wikimedia.org/T152150

As a user viewing an article, sometimes I want a map view
https://phabricator.wikimedia.org/T118297

Update Nearby feed item to work with new maps tab
https://phabricator.wikimedia.org/T153119

*Full disclaimer: still figuring out what constitutes an epic vs stand alone task!

@cmadeo could I have the asset for the Nearby tab bar item? Need one for selected and one for deselected - I've attached the history tab bar icons for reference. Thanks!

@JoeWalsh let me know if you need a different format or size.

@cmadeo could you render them at 24pt by 24pt? It looks like they are 48 by 48 currently

@JoeWalsh, sorry about that! Updated:

Updated the description to include an animation of pin loading and clustering.
The .mov file can also be downloaded here: https://drive.google.com/file/d/0ByziXGUvZZTzOEotNU5iVXViTG8/view?usp=sharing

[FIXED] Example:
https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&maxlag=200&generator=search&gsrsearch=museum+nearcoord%3A37.77666667%2C-122.39&gsrlimit=10

Docs:
https://www.mediawiki.org/wiki/Help:CirrusSearch#Geo_Search

@JMinor @JoeWalsh @cmadeo thoughts on the results of this API call for featured?

https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=200&generator=search&gsrsearch=1+nearcoord%3A37.77666667%2C-122.39&gsrlimit=50&cirrusPageViewsW=1000

Or this:
https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=200&generator=search&gsrsearch=1+nearcoord%3A37.77666667%2C-122.39&gsrlimit=50&cirrusIncLinkssW=1000

You can also combine those last parameters and weight them to get different results.

This on puts weight on incoming links as opposed to page views

Does having gsrsearch=1 make it only return articles with 1 somewhere in the text?

@Fjalapeno also, is it expected that there are warnings for invalid params for both cirrusPageViewsW and cirrusIncLinkssW?

warnings are expected, because they are not publicly exposed (we need to know what works before they get exposed)

sorry, you can remove the 1:

https://en.wikipedia.org/w/api.php?action=query&format=json&maxlag=200&generator=search&gsrsearch=nearcoord%3A37.77666667%2C-122.39&gsrlimit=50&cirrusIncLinkssW=1000

@cmadeo @Fjalapeno @JMinor I pushed an alpha build (1047) with some basic searching and sorting by the params Corey mentioned. There's no clustering or article popover but it should be good enough to get a basic idea of the results. If it's helpful, I could add more fine grained control over the cirrusPageViewsW and cirrusIncLinkssW but right now it just switches between no param, cirrusPageViewsW = 1000, and cirrusIncLinkssW = 1000.

[edit] Make that build 1048 - updated with a different app icon and shared group container so that it can live side by side with the beta & release builds.

@JoeWalsh @JMinor After you let me know what works, let me know and I will create a ticket to have these profiles added publicly so they can be used in production.

You should be able to use them in beta until that happens.

Also note, some folks in analytics thought it might be nice to actually do an A/B test of some type to determine the best results. Not sure you want to take that up, but just throwing it out there.

@cmadeo apologies if i missed in one of the mockups above, but what happens when the user taps on an article cluster? also, is there any sort of loading state indicator if the network request for the places takes awhile?

@JoeWalsh, I didn't design a loading state indicator, but that would be a good idea! I wonder if we should maybe use the yellow system notification for this? or do you think that it'd be possible to show a some type of progress / loading indicator?

My initial thoughts on selecting pin clusters was that tapping on a pin cluster will zoom the user’s view in to show items clustered within the tapped on pin cluster. If the cluster is very large, tapping on the cluster may display smaller clusters. Tapping on a small cluster of densely located pins will display individual pins.

If a user performs a search from a very zoomed out state I'm assuming that the clusters will have fewer articles in them than the amount that exists for the covered area (I'm assuming there's a limit on how many results we can return at a time) so this would potentially mean that performing a 'redo search in this area' will uncover articles that were previously not exposed?

Definitely open to suggestions and thoughts on clusters / zoom!

@cmadeo the yellow notification or a spinner would work - maybe just the system "network is busy" indicator is enough? I'm not sure that there would be enough loading status to make a progress bar worthwhile.

I pushed an alpha build (1050) with basic clustering and tap to zoom into a cluster (it's rough and there's no animation but hopefully it's good enough to get the idea). I think after using it a bit I'm thinking showing a list might be better, but let me know what you think.

Thanks @JoeWalsh, just started playing around with the clustering. I think one issue for now might be the level of granularity for the pin clustering. Ideally at the default zoom level pins would be displayed as individual pins and not as clusters. Perhaps the smaller pin style (no thumbnail, ~15x15px) might help with displaying more individual pins at default zoom levels?

There is a list view in the designs above (users will be able to toggle between list and map view) but were you suggesting more of an exposed list of places when a user taps on a cluster?

Thanks!

Also I'm going to be updating the InVision prototype today as some aspects of the prototype are outdated.

Some notes from Reading Design team meeting:

• There should be a threshold for showing suggested searches (eg. if a user has <2 saved articles with geographic locations associated with them we should not show 'Saved articles' as a suggested search
• Is there a limit to the number of saved articles we can show on the map at one time? For instance if a user has 300 saved articles that have geographic locations associated with them, can we represent/serve all 300 of these articles simultaneously or is there a cap?
• Saved articles subtitle should be 'X places found' to clarify that it is not representative of all of a user's saved articles, but instead their saved articles which have a geographic location associated with them.
• 'Articles in the news' lacks a solid use case and should be the lowest priority of the suggested searches. If it is pursued later then we will need to find a way to communicate context (eg. the news story itself) on the map and list views.
• Tab bar icon will need to be updated as compass is no longer relevant.
• In the future we might want to add a message / text area on the map to communicate notes on saved places by users or relevant (news?) information.
• We might want to explore having different pin shapes for different article types (eg. saved articles shaped like bookmarks).

@cmadeo was thinking either in the same style popover as the article callout is now or similar to how Apple Maps handles it (in this case, would also probably make sense changing the single article callout to this style)

I pushed alpha build 1051 with the pin size updates - that was next on my list so had it ready to go. Things can still get a bit crowded, I need to work out some clustering issues. Also- ignore the article view popover that is presented when you tap a pin - it's just a placeholder until the actual view is done.

@cmadeo @JMinor I pushed another alpha build with clustering updates and an updated popover. I think I need to re-work the popover. The current implementation uses the system default popover.

The downsides of this implementation:

• It takes a tap to dismiss the popover before you can tap another article
• It can't have the transparent background and custom drop shadow that the mockup has

Presenting the popover in a custom way would fix this issue. Should I move forward with fixing the popover or move on to the search bar and the map/list toggle?

[EDIT] While working on search, I found an easy workaround for the double tap issue. There might be a way to do the clear background & shadow as well.

@JoeWalsh I think its fine to pause on popover and move to basic search implementation in particular...

@cmadeo @JMinor are there more details about how these autocompletions work? Is it only ever places? Would normal terms like "buildings" or "bridges" be in the list as well?

@JoeWalsh I could see two options here, depedning on what teh completion suggesters are available.

The easy path is to use the standard keyword autocomplete and then mark in the UI or filter to only results that have a geo coordinate associated with them.

If the performance of that is too slow or data costly (even with some progress indication), I could see using a built-in geo search like MKLocalSearchCompleter.

@JMinor @JoeWalsh looks like we could run 2 queries on MKLocalSearchCompleter to get the functionality above:

1. One with no bounds to get "global" completion
2. One with bounds of the current view port to get local completions (or maybe some minimum fixed radius like 5 miles)

I was looking into options with the MediaWiki API and we would not get anything better with the current APIs. It is something that we can look into building (likely based on Wikidata as @JoeWalsh suggested)

Let me know if the MKLocalSearchCompleter is sufficient.

@JoeWalsh On the page images limit of 50 results… still working that. It was limited to 50 results for performance reasons. So it might not get moved. Just asking them if they prefer that or making 2 requests.

I am also out to the services team on possibly wrapping all this in RESTBase - will let you know.

For the recent searches, if it's a text search, should tapping on it perform the search in the current viewport or move to the viewport that was searched previously?

Example: I'm looking at Boston on the map and search for Tea. I move the map to SF, bring up the recent search list, tap Tea - does it search for Tea in SF or move map Boston and then search?

@JoeWalsh I would imagine that it would search for Tea in SF. That being said, if the recent search is for Fenway Park and I've moved the map to SF, I'd expect to zoom back over to Boston.

@cmadeo @JMinor how many searches should be kept in the place search history?

@JoeWalsh can we reuse the same constraints as we do with recent searches for articles?

@JMinor I don't see any code that prunes the recent search list to a maximum length - the ability to prune the list is there, but nothing actually calls it.

@JMinor @cmadeo I pushed a build (1062) with a menu for adjusting the clustering parameters. In the map view, you shake to show and hide the sliders. They're set up so that moving right is more clustering, left is less clustering. Max indicates the zoom level when the map will stop clustering, delta is how "clustered" they are at a given zoom level, and agg is how aggressively they will pull other nearby items into the cluster (this does nothing if there are no clusters as defined by delta). If you find settings you like, better than the defaults (17, 4, 1) let me know what they are. And just a heads up - everything is reset to default when the app exits.

@JoeWalsh here are the icons. Map + List icon will need to be replaced as these are placeholders currently.

Updated the Places scratchpad with two new locations (Hefei, Anhui, China and Brooklyn, NY, USA).

Some quick thoughts:

• When I clear my search on list view, I can't 'undo' this action by clicking over to the map. It would be nice if I could escape out of my clearing of the search box by switching my view.
• It was quite hard to be able to find Brooklyn, NY, USA as a suggested search (I kept seeing business names instead).
• Would it be possible to limit the suggested searches to searches that yield results on the map? Occasionally I would click on something that looked interesting and I'd be moved on the map but be shown a message that there were no matching searches.
• For locations that don't have very many related Wikipedia articles the differences between the searches (Top by links, top articles, etc) was barely perceptible (examples include Hefei, Anhui; Dixon, IL; Northampton, MA)

Based on recent conversations I have a few proposed updates to the pin styles:

• Unselected pins have two primary presentation styles (zoomed in and zoomed out). Zoomed in pins include a thumbnail image if available or a placeholder if the thumbnail isn't available.
• Reduced pin cluster size (following @JoeWalsh's lead on this one!)
• Increased size of the selected pin thumbnail and added the compass animation.

The main goal with these updates is to address legibility issues with unselected pins on the map.

If these seem reasonable, I'll update all of the mocks / update this ticket + Zeplin.

Proposed update to places tab header (updated list icon, tweaked map icon)	Proposed update to the toolbar (updated Places icon)

I have some small proposed updates to the header of the Places tab:

• Tweaked the map icon slightly to have a 2px outline
• Updated the list icon to fit the iOS icon guidelines (2px strokes) and also changed the size of the icon to better fit the toggle.

Additionally I'd like to propose a new icon for the Places tab (to replace the compass). The compass feels directional and made more sense when the name of the feature was 'Nearby.' For the updated icon I aimed for something that felt universally related to places and landed on this droplet pin shape. Unfortunately we will not be using a droplet on the map presentation, however this droplet shape is commonly used to convey the idea of a place or a location.

You can see the proposed changes together here:

@cmadeo could I have the icons for the search suggestions (https://zpl.io/Z1TSEJx) at half the size they are in zeplin? Thanks!

[EDIT] And also the updated tab bar icon & toggle icons from your most recent comment? Double thanks!

@JoeWalsh here are the assets! Let me know if you need a different size. I'll move back to Zeplin for exporting icons after this project, but unfortunately the screens are at 2x (my mistake)

Two quick thoughts:

Would it be possible to keep selected pins selected while the user moves the map? Users would still be able close the pin by tapping on the map or on another pin, but panning left or right or zooming in and out would keep the pin open.

My use case here, is tapping on a pin from a zoomed outstate and wanting to zoom in for a closer understanding of its geographic location.

Just rethinking some of the search box interactions.

Currently clearing a user's input in the search box opens up the search dropdown. Would it be possible to have tapping on the 'x' in the search box return the map to the default search (Top articles nearby) without opening up the search dropdown? This way users can clear their search without having to make a new search decision (and keep the map/list open). This is similar to the interaction between tapping in the search box vs. tapping on the 'x' in the search box on Google maps.

Two visual updates:

Search this area pill

Current location

Shadow hex #000000, 20% opacity
Shadow placement X=0, Y=2, Blur=4, Spread=0

@JoeWalsh thanks!

Feedback from Reading Design team:

• Update pill text to "Search this area"
• Make the opacity of the top bar on Places 100% (no transparency) to match the top bar on other screens in the app (this might also help with the optical illusion that is currently occurring where the top bar on Places looks shorter than the top bar on the rest of the app)
• It might be frustrating for users to not be able to turn off the filter of 'Top Articles' without having to select another search term. Do we want a way for users to just view all articles in the mapped area (regardless of quality?). This isn't something that we should necessarily make a change to now, but should be incorporated into user testing.
• Shorten the 'Saved articles' icon in the tab bar by 1px to make the icons in the tab bar more optically aligned. See image and attached updated icons below.

Animation for popover

Download the .mov here: https://drive.google.com/file/d/0ByziXGUvZZTzZ1ZnTTBSeUtWck0/view?usp=sharing

Added a little bit of bounciness and slowed down the animation slightly. I was hoping to match the places of interest pin animation on Apple maps.

Location pointer

Added a small triangle to denote the direction that the phone is pointed in.
The tip of the triangle has a radius of 1px

Updated designs on InVision (https://wikimedia.invisionapp.com/share/BHAEYEQAS#/218570419_01_Map_-_Map_View_-_Selected_Pin) and Zeplin.

There are some notable changes to the search page to better match the app's search screen:

• Updated the height of the suggested searches / recent searches boxes to 59px
• Updated grays throughout to follow the style guide colors
• Small spacing tweaks (12.5px above and below each list element, tweaked the gray search type icons for alignment and bumped text on recent searches over to align with text of suggested searches)
• Under related searches if there are no searches or a limited amount of searches do not show the gray lines that separate searches, instead just leave this area blank (see above)

I also made a few small tweaks to the header on the maps view:

• Updated the color of the search box to fit within the style guide
• Added a shadow to the bottom of the header bar to match the shadow on the top of the footer/tool bar

@JoeWalsh, just a few quick items that could use design updates:

Updates/tweaks

• If a user has no saved items, the 'Saved articles' search suggestion should not be shown
• Center map on your location icon is currently centered, but needs to be updated to be optically aligned instead (see below)
  
• Center map on your location button should have a corner radius of 2px
• Spacing between search box, toggle and center on map button could use some fiddling (see below)
  

Animations

• Pin transition points will need to be tweaked on iPad (this is a todo for me!)
• The selected pin transition looks great but feels a little laggy, slow. Could we work together to speed it up a touch?

Missing elements

• W icon is missing on placeholder thumbnail pins (LMK if pdfs are needed)
• Icons are missing for actions on popover (LMK if pdfs are needed)

Thank you!

@cmadeo could I have a large version of the W (@2x the size of the small)?

@JoeWalsh let me know if you need a different size:

@cmadeo thanks! I realize they're vector assets and should be infinitely scalable but iOS renders them out at given sizes based on the point size in the PDF.

With the location arrow, could I get a version of the icon with it tweaked to be offset with 0.5 pt spacing at the top and 1 pt of spacing on the right so that when the system centers it, it will be optically centered?

@JoeWalsh, no problem! It's not hard for me to export these :)
I'm not sure if the transparent background version worked, so I also uploaded one with a white background. Let me know if neither of these is what you are looking for though!

Also from @RHo:

Currently you cannot edit search term.

Steps to reproduce

1. Open Places tab
2. Enter in "New York" and select to go to that location.
3. Tap on the search bar again where "New York" has been entered to update the search term to "New York City"

Expected
Tapping on the search term brings up the keyboard to allow the user to add 'City' in after New York.

Actual
Tapping anywhere on the search clears the search term entirely.

@JoeWalsh could we tweak the sizing of the blue, circular current location pin? Could the interior blue be the same size as the green pins (on mid zoom level) and you can keep the white padding the same size it currently is.

Also I think that the X to close on the search overlay looks reasonable to my surprise!

@cmadeo yeah - I can update that. Also, we should probably switch to using an image for the pins, the rendering is kind of sloppy using built in view properties:

Testcases updated. Moving to Needs QA.

Tested and appears to work. I did a number of tests using the devices below.

iPhone 7+ - iOS10.2.1
iPad Mini 2 Retina - 10.2.1

@Nicholas.tsg Can you please take a look on your iOS devices. Thanks!

Tested on iPhone 7 with iOS 10.2.1 and iPad Air 2 with iOS 10.2 (I don't have an iPad Mini 2 at home right now but this may be close enough).

This is fixed as I reproduced the @RHo steps on both the iPhone 7

and the iPad Air 2