Your search returned no results

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

    http://gis.stackexchange.com/
    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

    Events

    You can bind custom functions to layer events by adding listeners and callbacks to the async portions of the CARTO.js library. Active layer events are triggered by layers on your webpage that are already loaded (Tip: these are the createLayer and createVis functions that return the done event. For details, see Loading Events). Each event requires the layer to include an interactivity layer. This is useful for integrating your website with your maps, adding events for mouseovers and click events.

    Note: Be mindful of using these events, as these functions can get costly if you have a lot of features on a map.

    layer

    layer.featureOver(event, latlng, pos, data, layerIndex)

    Triggered when the user mouse hovers on any feature.

    Callback arguments

    Name Description
    event Browser mouse event object.
    latlng Array with the LatLng ([lat,lng]) where the layer was clicked.
    pos Object with x and y position in the DOM map element.
    data The CARTO data of the clicked feature with the interactivity param.
    layerIndex the layerIndex where the event happened.

    Example

    layer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
      console.log("mouse over polygon with data: " + data);
    });

    layer.featureOut(layerIndex)

    Triggered when the user hovers out any feature. For example, you might want to use this event if you highlight polygons on mouseover and need a way to know when to remove the highlighting after the mouse has left.

    Example

    layer.on('featureOut', function(e, latlng, pos, data, layer) {
      console.log("mouse left polygon with data: " + data);
    });

    layer.featureClick(event, latlng, pos, data, layerIndex)

    Triggered when when the user clicks on a feature of a layer.

    Example

    layer.on('featureClick', function(e, latlng, pos, data, layer) {
      console.log("mouse clicked polygon with data: " + data);
    });

    Callback arguments

    Same as featureOver.

    layer.mouseover()

    Triggered when the mouse enters in any feature. Useful to change the cursor while hovering.

    layer.mouseout()

    Triggered when the mouse leaves all the features. Useful to revert the cursor after hovering.

    Example

    layer.on('mouseover', function() {
      cursor.set('hand')
    });
    
    layer.on('mouseout', function() {
      cursor.set('auto')
    });

    layer.loading()

    Triggered when the layer or any of its sublayers are about to be loaded. This is also triggered when any properties are changed but not yet visible.

    Example

    layer.on("loading", function() {
      console.log("layer about to load");
    });
    layer.getSubLayer(0).set({
      cartocss: "#export { polygon-opacity: 0; }"
    });

    layer.load()

    Triggered when the layer or its sublayers have been loaded. This is also triggered when any properties are changed and visible.

    Example

    layer.on("load", function() {
      console.log("layer loaded");
    });
    layer.getSubLayer(0).set({
      cartocss: "#export { polygon-opacity: 0; }"
    });

    subLayer

    sublayer.featureOver(event, latlng, pos, data, layerIndex)

    Same as layer.featureOver() but sublayer specific.

    Callback arguments

    Same as layer.featureOver().

    sublayer.featureClick(event, latlng, pos, data, layerIndex)

    Same as layer.featureClick() but sublayer specific.

    Callback arguments

    Same as layer.featureClick().

    sublayer.mouseover()

    Same as layer.mouseover() but sublayer specific.

    sublayer.mouseout()

    Same as layer.mouseover() but sublayer specific.