CARTO.js

Integrate interactive maps and location data into your web applications and websites.

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here

Specific UI Functions

There are a few functions in CARTO.js for creating, enabling, and disabling pieces of the user interface.

vis.addOverlay(tooltip)

A tooltip is an infowindow that appears when you hover your mouse over a map feature with vis.addOverlay(options). A tooltip appears where the mouse cursor is located on the map. You can customize the position of how the tooltip appears by defining the position options.

Example
1
2
3
4
5
6
7

var tooltip = vis.addOverlay({
  type: 'tooltip',
  template: '<p></p>' // mustache template
  width: 200,
  position: 'bottom|right', // top, bottom, left and right are available
  fields: [{ name: 'name', population: 'pop2005' }]
});

Note: If you are using createLayer for a map object that contains an enabled tooltip, you can disable the tooltip by applying the false value. See the cartodb.createLayer(map, layerSource [, options] [, callback]) tooltip description for how to enable/disable an interactive tooltip.

vis.addOverlay(infobox)

Similar to a tooltip, an infobox displays a small box when you hover your mouse over a map feature. When viewing an infobox on a map, the position of the infobox is fixed, and always appears in the same position; depending on how you defined the position values for the infobox.

Example
1
2
3
4
5
6

var infoBox = layer.leafletMap.viz.addOverlay({
  type: 'infobox',
  template: '<p></p>',
  width: 200, // width of the box
  position: 'bottom|right' // top, bottom, left and right are available
});

cartodb.vis.Vis.addInfowindow(map, layer, fields [, options])

Infowindows provide additional interactivity for your published map, controlled by layer events. It enables interaction and overrides the layer interactivity. A pop-up information window appears when a viewer clicks on a map feature.

Arguments
Option Description
map native map object or leaflet.
layer cartodb layer (or sublayer).
fields array of column names.

Note: This tells CARTO what columns from your dataset should appear in your infowindow.
options  
|_ infowindowTemplate allows you to set the HTML of the template.
|_templateType indicates the type of template (Mustache template or Underscore template placeholders).

Tip: See How can I use CARTO.js to create and style infowindows? for an overview of how to create infowindows.

Returns

An infowindow object, see sublayer.infowindow

Example

The following example displays how to enable infowindow interactivity with the “click” action. This is the default for infowindows.

 cartodb.vis.Vis.addInfowindow(map, sublayer, ['cartodb_id', 'lat', 'lon', 'name'],{
  infowindowTemplate: $('#infowindow_template').html(),
  templateType: 'mustache'
  });
Example (Infowindow with Tooltip)

The following example displays how to enable infowindow interactivity with the mouse “hover” action. This is referred to as a tooltip, and is defined with vis.addOverlay.

layer.leafletMap.viz.addOverlay({
  type: 'tooltip',
  layer: sublayer,
  template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src=>, , , </div>', 
  position: 'bottom|right',
  fields: [{ name: 'name' }]
  });