Add 'watch in MapStory' button to embed viewer

[jonpmarino]

Embedded You Tube videos always have a little button that enables you to watch the video back on the You Tube platform. We should have this little button on embedded MapStories. This will increase traffic back to platform, and be a way to 'brand' MapStory visualizes as they are increasingly embedded across the web.

Follow-up tickets: #886, #898 Related: #883, #896, #909

UX All changes apply only to the embed view unless otherwise specified.

View on MapStory

• [ ] add "View on MapStory" icon on the right side of the toolbar
  • View on MapStory tooltip: "View on MapStory"
• [ ] "View in MapStory" - takes user to /view/{map ID}/ in a new tab

Other Items

• [ ] Add "Full screen" button and tooltip
  • Full screen icon tooltip: "Full screen"
• [ ] make icon spacing a little tighter (~15px space between icons). Apply to all map views
• [ ] adjust icons so they align vertically with each other (i.e., they are all on the same baseline--one icon isn't higher than another) Apply to all map views
• [ ] remove gear icon temporarily (will be added back with #886). This needs to be done partly because on smaller embedded views, the settings dialog does not fit, and the user has no way of closing it.
• [ ] "Full screen" - takes user to /view/{map ID}/#full in a new tab
• [ ] Clicking "View in MapStory" or "Full screen":
  • pauses playback/animation n the embedded player
  • when the map loads in MapStory, playing resumes from the point the user was on when they clicked the icon

Icons

• Use the MapStory icon below for "View on MapStory". As with the other icons, the white one is the default state and orange is the hover state. The below images are in PNG format.

• Use the clock icon for "Timeline"

Mockup

[jonpmarino]

As embedding starts to work, I see this as a small, but important win. For example, see http://slid.es/jonpmarino/deck--2. Can't see abstract or anything. Need a way to click back to MapStory URL back on mapstory.org. Could be accomplished with just using the MapStory logo and having it sit on the player bar...default links back to mapstory on mapstory.org.

[jonpmarino]

@emloux @ischneider @bartvde Embed works well in tumblr! See http://jonpmarino.tumblr.com/ for a test.

[bartvde]

okay I get what you mean now

[sshyu]

Working with @jonpmarino on this... details in progress!

[jonpmarino]

@sshyu another design idea based on http://www.realclearpolitics.com/video/2013/09/21/david_brooks_gop_leadership_will_have_to_show_ted_cruz_whos_boss.html.

Organizations w/ organization pages should be able to add their logo to an embed view of their content...as a 'co-branding' mechanism.

[bartvde]

Hmm there doesn't seem to be any space left in the default embed, unless we get an icon for the Timeline button as well?

[bartvde]

preparation done in: https://github.com/boundlessgeo/geonode/commit/d67fe407487668d94052abae7118ef603fb9f016 but waiting for advise on how to deal with not enough space and if this icon is really the icon to use (size and colour differ)

[jonpmarino]

@sshyu can you advise on UI? One idea would be to change the timeline icon to the one we use in the MapStory composer...the one that looks like a clock set to 3:00. I also think its important to keep the scroll-over text that explains what each icon is. For example, if we use the clock for timeline rather than the word, and have scroll over text that says "view timeline" i think we'll be all good!

[sshyu]

@jonpmarino - yes, let's use that clock icon for now. Do you have the original file that? I only see an orange version; we'll need the white one too. Haven't compared sizes, but we might also need a slightly smaller one for embed.

@bartvde - the timeline icon was added after I did the work on this originally. Let's use the timeline icon above if we can. We should also give it a tool tip: "Toggle Timeline". However, to save even more space, can we also try reducing the spacing between/size of the icons slightly so that there's ~15px in between them (consult the mockup in this ticket -- still want to keep the space between the "repeat" icon and the "2x" icon)?

Also, to keep related things together, I think we should have the icons in this order:

• Map Legend (where it is now)
• Timeline (move it here)
• Settings (gear icon)
• (some empty space)
• View on MapStory icon (to the right, as seen in the mockup--where the fullscreen icon is)

[jonpmarino]

@sshyu just sent you all the icons in orange and white...

[bartvde]

see: https://github.com/boundlessgeo/geonode/commit/9f38695880f34e3d37722d01c32a3c3581bbfb03 and https://github.com/MapStory/mapstory/commit/f6340224852668d925e929a03da5e96b6c0bf0a8

[sshyu]

@bartvde - are the timeline icons the right size, or do we need smaller ones? If you send me a URL or screenshot, I can take a look.

[jonpmarino]

@bartvde embed looks great from dev. just tested here on Tumblr, http://jonpmarino.tumblr.com/. One thing...it looks like we have a little arrow below the toolbar for expanding timeline. Can we remove that since we have the clock icon now? It seems redundant...

[bartvde]

new icon in with: https://github.com/boundlessgeo/geonode/commit/46cb1a0112b975c76b1b30b9448a22ef2166b9e7

[bartvde]

removed collapse item with: https://github.com/boundlessgeo/geonode/commit/d627f4337edb917fc2c0d74866b2608cdb2ef446

[bartvde]

ready for testing again (you might need to reload a url such as http://mapstory.dev.opengeo.org/maps/106/embed for testing)

[jonpmarino]

@bartvde nice!

[ischneider]

From @jonpmarino (commented on wrong issue):

@bartvde the only thing I would still suggest is that little timeline min/max arrow is still below the toolbar. Do we need that now that we have the timeline clock icon for timeline min/max?

[jonpmarino]

thanks @ischneider!

Also, @bartvde that same little min/max arrow shows up in basic MapStory composer - http://mapstory.org/maps/new

[bartvde]

@jonpmarino in the embed it should be gone, might be browser cache.

The other link you sent is production, which has not been updated. It does not show up for me on dev.

[bartvde]

I do see one issue now and that is if I minimize the layer tree in the composer I can't maximize it anymore - will work on a quick fix

[bartvde]

another issue: when the timeline is expanded, the collapse icon shows again above the timeline in maps/new

[bartvde]

made some changes to address the issues: https://github.com/boundlessgeo/geonode/commit/b5e710cc65d9c5f032fc0968f86d7a6e49a9613a

[bartvde]

deployed on dev

[jonpmarino]

@bartvde looks great!

[jonpmarino]

@bartvde question - it looks like the option for 'cumulative' playback is grayed out in current embed - http://mapstory.dev.opengeo.org/maps/54/embed. But its available in 'full screen view' - http://mapstory.dev.opengeo.org/maps/54/#full. Is there a way to get these options for playback in embed?

[bartvde]

@jonpmarino I don't think it's greyed out in that sense, it seems to colours just don't match well with the accessbility theme?

[jonpmarino]

@bartvde you're right! Yup, that's it. Functionality is there, but text is very light. Thanks!

[emloux]

Ready for Deploy

[jonpmarino]

@ischneider @bartvde would be cool to get the title of a MapStory in embed somehow. @sshyu has longer term design concepts, of course but in the short term we'll need to get the title in their somehow in order for others to embed