Embeddable widget usability issues / requested features

[fancyham]

Overview

Some features we need to support embedding our map onto other websites — often these are neighborhood council websites, city websites, service providers, or food banks and food rescue organizations that supply food pantries and meal programs.

This would allow these websites to embed a live Food Oasis map with current food pantry/meal locations on their webpages while helping Food Oasis us get information to food seekers. A real win-win.

To do this, we need to support some new functionality that are particular to embedding on these types of sites:

• Centering map on a particular location (useful for orgs that serve a particular location)
• Extra-narrow widths: Third-party sites will often have a margin around their embeds, so either we

One issue is that while we already support narrow smartphones (iPhone 5), embedding potentially removes pixels horizontally so the UI would need to be even narrower.

A nice to have would be to reduce initial load time or show a ‘loading’ indicator. Currently, our iFrame displays a white box while javascript libraries are loading (which may be quite large), so improving load time or showing an indicator will make our widget feel more responsive and not broken.

Action Items

Things we want before releasing:

• (x No longer necessary) Very narrow devices with iFrames in it (iPhone 5 with iFrame inset in margins)
  • x Option 1) Give instructions to use the full width of the screen when embedding our site on narrow screens.
  • x Option 2) Change our layouts to support extra-narrow screens (see example below)
    • √ Fix stacking of buttons on very narrow buttons - perhaps by dropping or truncating text?
    • √ Fix bottom row so it doesn’t get crammed up (Design footer of embedded map #1130)
• Bug: GPS / Use My Location button is disabled on map #1101
• Want to specify iFrame map’s default location and filter to center map on a specific location (Neighborhood Council Support - Draw Neighborhood Boundary on Map #1165)
• Logos and text for bottom bar for other regions (Hawaii) (Design footer of embedded map #1130)

[fancyham]

A nice to have would be to reduce initial load time or show a ‘loading’ indicator. Currently, our iFrame displays a white box while javascript libraries are loading (which may be quite large), so improving load time or showing an indicator will make our widget feel more responsive and not broken.

Added to the checklist above.

[fancyham]

Looks like it's working okay now:

• Centering was taken care of in Neighborhood Council Support - Draw Neighborhood Boundary on Map #1165 by showing a neighborhood boundary.
• The layout problems continue if embedded with large margins on small device, but in the wiki's embedding instructions we say use full 100% width which would work on an iPhone 5/SE. So ensuring responsive usability will be the responsibility of the embedding designers.
• Bottom logo layout looks better — looks like it was fixed in Design footer of embedded map #1130

[fancyham]

I think these issues are all taken care of, so closing!