Previous versions would render illegible labels when the browser's viewport was zoomed-in or -out. Version 0.3.4 fixes the issue and significantly improves handling of non-integerdevicePixelRatio values reported by the browser. dotAtlas now dynamically reacts to both zooming-in and zooming-out of the viewport by scaling the map appropriately.

const dotatlas = DotAtlas.embed({
  element: document.getElementById("dotatlas"),
  pixelRatio: "auto"
  layers: []
});

In the previous versions, the on(), off() and once() methods would fail to register event handlers exposed by plugins, where the handler names contain colon-separated segments, such as selection:onSelectionChanged. Version 0.3.4 fixes the problem.

You can now install dotAtlas as an NPM dependency. The demo version is available directly from the NPM depository, the licensed version is available from the dotAtlas distribution server through a special URL.

dotAtlas 0.3.0 adds support for creating plugins. Currently, 6 plugins are available with functionality ranging from automatic resizing of the visualization area, adding support for marker selection, to animated effects and adding map elevation legends.

All color-related properties, such as markerColor or colorBands, now support CSS3 color strings.

dotAtlas exposes the maxZoomScale option that limits the maximum scale to which the visualization can be zoomed. The default value is the scale at which rendering artifacts caused by limited precision of floating point computations start showing up.

Previous versions might render single-pixel artifacts around labels. Version 0.3.0 fixes the issue.

Previous versions would produce a stuttering animation when zoom was initiated with mouse wheel on screens with pixel ratio smaller than 1.0. Version 0.3.0 fixes the issue.

Previous versions would normalize the points' elevation values to the 0.0...1.0 range. As of version 0.3.0, for consistency with the markerSize property, elevation values will be clamped to the 0.0...1.0 range. If your code uses elevation values larger than 1.0, make sure you normalize them to the 0.0...1.0 range.

Version 0.3.0 replaces the maxRadiusDivider property of the elevations layer with a more intuitive maxRadius property. With the new property, the amount of "land" on the map is now proportional to the value of maxRadius.

The global dotAtlas onHover event has been renamed to onMouseMove to better reflect that it is different from the per-layer onPointHover events. The former is fired on every mouse move regardless of whether there are any points near the mouse location or not. The latter is fired only when the mouse pointer is near some point or has just moved to an empty area.

Two properties of the markers layer have been renamed, replacing "outline" with the more familiar "border":

Two properties of the outline layer have been renamed, replacing "stroke" with the more familiar "border". Also names of two other properties have been shortened:

You can now customize the colors used to draw elevation bands using the colorBands option of the elevations layer.

You can also read the current colors and the corresponding elevation levels to create a legend for your map.

You can now change the size, family, style, weight and variant of the font used when drawing dotAtlas labels. See the labels layer documentation for more details.

Version 0.2.0 improves the speed of rendering by reducing the size and the number of costly blur operations.

Each dotAtlas layer is now an API-bearing object, having the get(), set(),on() and off() method, along with layer-specific options, events and methods.

Layers can now be created using the DotAtlas​.createLayer() static method. The returned object is the entry point to layer-specific options, events and methods.

Version 0.2.0 changes the way dotAtlas is initialized. Instead of calling the constructor, use DotAtlas​.embed() to embed dotAtlas into the page.

Data to visualize is now provided as the layers option of dotAtlas instance. The value of the option must be an array of layer object instances created using DotAtlas​.createLayer().

The API comes with experimental support for creating extensions to the base dotAtlas API. dotAtlas currently ships with two extensions:

• carrotsearch.dotatlas.theme.js: adds support for switching between light and dark color theme for the map,

• carrotsearch.dotatlas.autoresizing.js: resizes dotAtlas on every change of the browser window dimensions.

Please see the using extensions article for more details.