JavaScript API cookbook.

The dotAtlas JavaScript API cookbook contains short complete examples demonstrating one specific functionality of dotAtlas.

All the example code is licensed under Apache Software License 2.0, feel free to adjust and copy to your code base as needed.

Note: All the examples use ES6 features, including modules. Therefore, they will run only in modern browsers, such as the latest versions of Firefox, Chrome or Edge.

dotAtlas comes transpiled to ES5, so it will work in older browsers, such as IE11.

Quick start

Displaying your first dotAtlas map with just a few lines of JavaScript:

  • embedding dotAtlas in your page,
  • specifying a simple multi-layer map data,
  • resizing visualization when container dimensions change.

Marker properties

Customizing the properties of markers on your map, including color, shape, size and opacity.

Label properties

Controlling color and opacity of labels, setting label display priorities so that the most important labels show at lower zoom levels.

Layer properties

Controlling properties of different dotAtlas layers, including:

  • layer visibility and opacity,
  • global and layer-specific marker properties,
  • saturation, shape and lighting properties of the elevation map.

Hover and selection

Detecting and drawing hover and selection highlights:

  • responding to hover and click events,
  • drawing hover and selection highlights using a dedicated layer.

Custom zooming

Zooming to reveal the location of specific markers or labels on the map.

Updating properties

Changing colors, sizes, opacities and elevations of existing markers without reloading the whole data set.

Map legend

Adding a color band legend to the map, reading elevation values at specific coordinates of the map.

Lingo4G embedding

Converting Lingo4G analysis result containing document embedding and document clusters to a dotAtlas map, where each marker represents one document.