Embed onezoom.org on species pages

[timrobertson100]

Onezoom.org have embedded occurrence maps on their site and are working on a "widget" that is embedded on other sites.

They ask if it is possible to embed a onezoom.org widget on the GBIF species page. They have mapped the GBIF species IDs, so the technical integration could be as simple of testing the existing of the view using our own IDs.

[MortenHofft]

Yes we could do that. I see these options:

iframe If we want the interactive widget, then it is probably the way to go. But the iframe should be constrained to not link to a trillion other places in my opinion. As in, you shouldn't be able to click anything that takes you to another site. It should be restricted to the tree browsing widget. If we just used the link above you could navigate back to gbif.org or wikipedia or basically any other random website within that iframe. That would look unprofessional in my opinion. We are obviously at the mercy of someone else with this, as they could show anything, but I guess it is fair to assume they would behave nicely.

Link block Alternatively we can show some metrics or an image generated via a onezoom API and then link to onezoom for more details? Similar to what we do with iucn https://www.gbif.org/species/5226613 - in that version it would essentially be an advertisement banner

Prominent, but smaller link We could also link in the tabs (like we do for reference taxon) https://www.gbif.org/species/5226613

Add it to the bulk of other identifiers In the bottom of species pages we have a list of identifiers for other sites. OneZoom would be one of those if they added their identifiers to wikidata. https://www.gbif.org/species/5226613

[jrosindell]

The widget we are currently working on would be embeddable as an iframe. I fully agree with @MortenHofft about the need to make this just a plain tree without any links to other resources - that's what we imagine too. It would be a plain tree with the option to press a button or use a modifier key to interact with it, or open in a new tab, otherwise it would behave like a static image. The URL parser of the embedded page would enable the setup to mark the particular species of interest and to select other settings such as colour scheme, visualisation style, and language (though limited options for the latter at present). Alternatively it could be an embedded tree that has very limited interaction (just zoom in and out from the one species that's highlighted with no free explore function).

We would propose to provide an API that will return the open tree of life ID from a GBIF ID for any species that is in the OneZoom tree. This API could then be used to check for cases where there is no tree to be displayed and fail gracefully, otherwise it would give the ID that's needed to be passed into the URL of the iframe.

We can of course support the other solutions that have been put forward if they are the preferred behaviours that you want for users of GBIF. My opinion is that OneZoom isn't really a taxon identifier and a link without any graphic component wouldn't really tell the user much about it so wouldn't give the users much benefit or introduction into the evolution of that species.

The link block works well for IUCN because they have one simple piece of flagship information that they are presenting and can easily be shown in a relatively small space. This could work for OneZoom but I think would need a bit more space so that it can contain an embedded tree focused on the species of interest, but one that feels to the user like a static image that the user has to click on as a link to explore in a new tab. In this case it would still be made to work with an iframe so the tree image can be produced on demand, but the page that gets embedded in the iframe would have no interaction at all.

I hope these thoughts help get the ball rolling. Our developer is working on the project this week and next week.

[MortenHofft]

Sounds like we are on the same page :)

Optional buttons Would it make sense to have the features optional? I imagine I would like to remove everything in the upper right corner for example.

The info button in the lower left. Perhaps it could just have the info button link to OneZoom for details? And the remaining action optional as well (compass, zoom, reset, settings)?

Link to OneZoom And have click events on leafs open on onezoom instead. So when I click a leaf, it will not show a wikipedia popup, but instead link to e.g. https://www.onezoom.org/AT/@Magnoliopsida=99252?vis=balanced&img=best_any&anim=flight#x4491584641118789120,y-7969320687171298304,w27626338984931012.0000

Styling Would it make sense to have the option to control a few colors. E.g. background, branch and leafs - I have not desire to control everything, but a few parameters could probably go a long way. I imagine we will use this in products where the user can have a dark theme. In those cases it is useful to control at least the background color.

Mobile devices I'm wondering if it might make better sense to just show an icon or a teaser and then link to OneZoom on small devices. I would have to experiment with it to see if it could work or it feels to constrained.

[jrosindell]

@MortenHofft Thanks for sharing these useful thoughts....

I think we are definitely on the same page.... here are a few thoughts...

The top right corner buttons will all be gone without even an option to retain them as we can't see a good use case for why to retain - just unnecessary complexity

Bottom left buttons - we thought that the settings button and compass feature should also go without an option to turn on. Again it feels like unnecessary complexity in the feature to configure these. The settings will simply be fixed on whatever the developer writing a page with the embed in and will be parsed via URL (rather than selected by the user). Of course full screening the view in a new tab will be an option and will enable the user to use the tree view fully featured with initial settings exactly as they were in the embedded version but all the buttons now active.

Info and zoom related buttons on bottom left - we propose to make these optional - configured via URL. Another independent option will (if enabled) allow the user to press down control and interact with the tree via mouse or touch. This is following the google maps embed model. I do like the idea of retaining the info button and making that a link to OZ with the info page open.

Regarding links to OneZoom from the tree, we proposed to turn them all off and just make the only link be to a fully functional page from which wikipedia pages etc. can then function as normal. This feels like a simpler solution but we can do it as you proposed if you prefer this?

Styling - we hadn't thought about BG colour but what you say makes sense - especially the dark theme option. It will be possible to control the colour theme from the URL from a set of options so I guess we'll add a URL parsed BG colour value as well as a colour scheme that works well with a dark BG.

For mobile use you could always turn off all the buttons (and the press control to interact with have no effect anyway - it should detect mobile device and not prompt) - hence it will be easy to have the behaviour you envisage.

Please let me know if this sounds OK to you.

[MortenHofft]

I think this sounds good. Thank you.

I suspect I might still want to consider another option on mobile. OneZoom is currently 2mb (8mb unzipped). That is a fairly large amount of data on some devices/connections. For something that is just a section of our species page. I might want to revisit this part. To just show an image (E.g. a leaf from OneZoom with the correct image and text). But I'm happy with above proposal for a first version 👍

Thank you for your patience

[lentinj]

Hello! I'm working on improving in the OneZoom embed functionality currently, thought I'd clarify a few points:

Link to OneZoom And have click events on leafs open on onezoom instead. So when I click a leaf, it will not show a wikipedia popup, but instead link to e.g. https://www.onezoom.org/AT/@Magnoliopsida=99252?vis=balanced&img=best_any&anim=flight#x4491584641118789120,y-7969320687171298304,w27626338984931012.0000

We've decided to make OneZoom in an iframe work as you suggest, instead of disabling the popups. Clicking on a species will open up a full OneZoom window in a new tab, with the popup already open.

Styling Would it make sense to have the option to control a few colors.

The OneZoom iframe will be transparent, so whatever background colour you've chosen will shine through to OneZoom. Presumably that makes life pretty easy for this part?

We have colour schemes for OneZoom, and it'd be possible to choose one as part of the embed. Specifying individual colours isn't currently possible. but as @jrosindell suggests a dark theme for OneZoom is probably overdue anyway.