Deep link to current view of map

[fancyham]

Overview

Goal: Make it easier to share a link to a specific location on the map

Why:
On Google Maps (on the web), as one pans around and zooms, the URL itself updates automatically.

This allows people to easily share what they’re looking at with someone else. The URL, when opened, takes the recipient directly to the view that the sender was looking at. This URL can also be bookmarked.

Could we do something similar for Food Oasis?

This may also be useful for centering embedded maps — allowing an organization to choose a center and display a specific location upon loading.

Embedded maps may be harder to share as the URL is not exposed to the user, so in that case, perhaps a ’share’ button?

Example URL from Google Maps:
https://www.google.com/maps/place/Panorama+City,+Los+Angeles,+CA/@34.229513,-118.4658597,14z/data=!3m1!4b1!4m6!3m5!1s0x80c2912cd03ee619:0x72095a64529a613c!8m2!3d34.2215391!4d-118.4487995!16zL20vMDI4NXA5?entry=ttu&g_ep=EgoyMDI0MDkxMS4wIKXMDSoASAFQAw%3D%3D

Solution:

• Change search results page's URL from https://foodoasis.la/organizations to something like https://foodoasis.la/organizations?search_address=panorama+city,+ca&zoom=3&gps="34.229513,-118.4658597"
  • This link should update as the map is panned around such that forwarding a link takes recipient to the same screen user is currently looking at.

Alternative solution, if the above really isn't possible or desirable:

• Add a 'Share button/link' in the embedded widget view that displays the deep-link URL (perhaps similar to the ’share’ button on YouTube). This 'share' button/link could also appear at the top of the list of search results. (near where "604 results" appears now)

Action Items

• Investigate how hard it would be to update the URL field for search results screen with a deep-link to the current view, and adding a share link
• Discuss alternatives, if necessary
• Implement beta
• Test it -- ask users if this works well for them or is adding problems
• Make public

Resources/Instructions

• See maps.google.com and copy the URL
• See youtube.com and click the ‘share’ button and see how the deep link appears

[fancyham]

This seems related to these deep-linking issues:

• Implement a Share button for Food Seekers #684
• Bug: Deep linking on the Map Page is broken #989

The idea is to let the user copy the URL from the browser, text it to a friend, and their friend can see exactly what the user sees.

The URL should recreate the app state.

I think the main new feature here is that the URL in the browser URL field would ideally automatically update as the user navigates around.

This feature would also enable a ’share’ button (#684) in our food-seeker UI, which would be necessary when we're embedded on a third-party website (because user can’t access the URL because we are in an iFrame)

The deep link URL should include and re-load:

• Map centered on a lat/long with same zoom level
• (optional) Show a selected organization (optional, based on user’s state) (this is like Bug: Deep linking on the Map Page is broken #989)
• (optional) Show an origin marker (the user-input address that shows the red marker) (optional, based on user’s state)
• (optional) Highlighted neighborhood region boundaries

[qiqicodes]

Closing this issue, when user clicks Share button, a deep link is copied to the clipboard.

[fancyham]

Reopening this issue -- while the 'share' button does work for sharing an individual listing, it doesn't solve the problem of sharing search results for a specific address, say "Panorama City, CA".

This is needed for searching near landmarks (say a church wants to share nearby pantries with congregants).

Some ways this could be solved might be

• Add a 'share' button next to the search field or the search results list. Or
• Change search results page's URL from https://foodoasis.la/organizations to something like https://foodoasis.la/organizations?search_address="panorama city, ca"&zoom="3"