Your search returned no results

Try another search term or view Stack Exchange, where we have active conversations with Developers about GIS.
    Support channel in Stack Exchange

    Thousands of developers around the world have helped make CartoDB a success, and we have active conversations with them about GIS in Stack Exchange.

    Go to Stack Exchange

    Specific UI Functions

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


    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.


    var tooltip = vis.addOverlay({
      type: 'tooltip',
      template: '<p>{{variable}}</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.


    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.


    var infoBox = layer.leafletMap.viz.addOverlay({
      type: 'infobox',
      template: '<p>{{name_to_display}}</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.


    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.
    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.


    An infowindow object, see sublayer.infowindow


    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.

      type: 'tooltip',
      layer: sublayer,
      template: '<div class="cartodb-tooltip-content-wrapper"><img style="width: 100%" src={{_url}}>{{name}}, {{age}}, {{city}}, {{country}}</div>', 
      position: 'bottom|right',
      fields: [{ name: 'name' }]