Embed a customised OneZoom tree in your website
Without downloading or installing any software you can still use our embed and link tool if you want to embed custom versions of a tree that's already on OneZoom. After selecting the settings you want the page will e-mail you a short piece of code that you can copy any paste into your website to give you a OneZoom visualisation.
The embed editor can be accessed here.
Bulk-embedding OneZoom in many pages
If embedding in many pages, it may be useful to check that a species / node exists before importing the entirety of OneZoom. To do this you can use the getOTT API that finds a matching OTT identifier if available. Once you have an OTT you can load OneZoom using the an embed URL as generated using the embed editor.
getOTT can search by several different identifiers. For example, the code below will search based on a GBIF ID and, if available in OneZoom, update the iframe to load the OneZoom tree.
const oz_origin = 'https://onezoom.org'; const oz_embed_url = ott => `${oz_origin}/life/@${ott}?otthome=${ott}&embedkey=...`; // Fetch a GBIF ID from the URL let gbif_code = parseInt(window.location.search.match(/gbif=([0-9]+)/)[1]); window.fetch(`${oz_origin}/API/getOTT.json?gbif=${gbif_code}`).then(x=>x.json()).then(function (data) { let ott = data.gbif[gbif_code]; document.getElementById('oz_iframe').src = ott ? oz_embed_url(ott) : ''; });
OneZoom treeviewer variants
There are several variations on the main OneZoom/life/
page:
/life/
: The default interactive view/life_noninteractive/
: Non-interactive view, all OneZoom UI is hidden
Remote-control of OneZoom
Many aspects of OneZoom treeviewer can be configured by URL. There are 2 relevant bits of documentation:
- The URL parsing documentation, describing the query string options available
- The Pinpoint documentation, describing the pinpoint strings used to direct OneZoom to a species
Anything that can be set via. the URL can be changed at run time by giving a
querystring to onezoom.controller.set_treestate()
. For example:
onezoom.controller.set_treestate('?lang=fr') onezoom.controller.set_treestate('?lang=fr&cols=AT') // NB: An empty URL section resets to default onezoom.controller.set_treestate('?lang=&cols=')
Zooming around
This can also be done withset_treestate()
:
onezoom.controller.set_treestate('@Aves') // Instant jump to Elephants onezoom.controller.set_treestate('@Loxodonta_africana?anim=jump') // Slow direct flight to Rodents onezoom.controller.set_treestate('@RODENTIA?anim=straight-0.2') // Quick Flight to blackbird onezoom.controller.set_treestate('@Turdus_merula?anim=flight-4') // Reset flights back to normal onezoom.controller.set_treestate('?anim=')
Highlighting
Highlights can be enabled by providing a highlight string toset_treestate()
:
onezoom.controller.set_treestate('?highlight=path:@tetrapoda@aves&highlight=fan:@aves@GALLOANSERAE') // Turn highlights off again onezoom.controller.set_treestate('?highlight=')
See the the highlight documentation for more information on syntax.
Playing a tour
Tours can be played using thetour
querystring option:
onezoom.controller.set_treestate('?tour=/tour/data.html/superpowers');