Embed OneZoom in your website

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 with set_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 to set_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 the tour querystring option:

onezoom.controller.set_treestate('?tour=/tour/data.html/superpowers');