/

Embedding

Before dotAtlas can display anything, it needs to be embedded in your HTML page.

To embed dotAtlas into your page:

  1. Inspect the result of the DotAtlas.supported() static method to make sure it returns true, which confirms the browser meets dotAtlas requirements. If the browser is not supported, consider displaying an appropriate message to the user.

  2. Define the HTML element that will contain tour dotAtlas visualization. dotAtlas will occupy the full width and height of the element.

  3. Initialize dotAtlas by calling the DotAtlas.embed() static method and providing the options object as a parameter. The only required option during initialization is a reference to the HTML element you defined earlier. In most cases, you will be providing other options during initialization as well, such as the layers to display, some visual customizations and event handlers. See the options reference for a complete list of options.

Heads up!

The HTML element you embed into needs to be attached to the DOM and have non-zero dimensions at the time dotAtlas initializes.

In most cases it is enough to initialize dotAtlas once the DOM is ready. In certain cases, however, the element will receive its size a bit later. To avoid race conditions, you can initialize dotAtlas in the onloadevent. 

<script>
  window.addEventListener("load", function() {
    // Perform FoamTree embedding here
  });
</script>

When using dotAtlas in a React application, embed dotAlas after the component mounts. Also remember about disposing of your dotAtlas instance when the component is unmounted: 

import React, { useEffect, useRef } from "react";
import { DotAtlas as DotAtlasImpl } from "@carrotsearch/dotatlas";

export const DotAtlas = () => {
  const element = useRef(null);
  useEffect(() => {
    const dotatlas = DotAtlasImpl.embed({
      element: element.current,
      layers: [ /* ... */ ]
    });

    return () => dotatlas.dispose();
  }, []);

  return <div ref={element} style={{ width: 400, height: 300 }} />;
};