How to make infobox contents appear on mouseclick instead of mouseover

Question

I'm using CartoJS to put one of my CartoDB maps on a div in an HTML file. When a user mouses over a dot on the map, info appears in the div next to the map container div.

I want to change this so the info appears when a user clicks (or taps) a point.

Here is a snippet of my JS code for making the CARTO layer.

            cartodb.createLayer(map, layerURL, {infowindow: false, tooltip: false})
                .addTo(map)
                .done(function(layer){
                    var infoBox=    layer.leafletMap.viz.addOverlay({
                        type: "infobox",
                        layer: layer,
                        template: infoBoxTemplate,
                        position: "top|right"
                    });

                    // Add infoBox to map object
                    $("#infobox-wrapper").append(infoBox.render().el);
                });

How do I change this so info appears in #infobox-wrapper on click instead of on hover?

Answer 1

Unfortunately the infobox only appears during the hover event. If you want an infobox to be displayed only on click, you would need to build it from scratch with HTML/JavaScript/CSS.

For example, in this example there is an element called box that is always displayed on the map, but it only displays the values when user mouse over the points. You could change that to display the values after clicking on the point by replacing the "featureOver" event to the "featureClick" event). The next code is part of the example where the box element is defined:

    // 1- Set CartoDB layer interaction
    layer.setInteraction(true);

    // 2- Custom mouseover event on CartoDB layers
    layer.on('featureOver',function(e,latlng,pos,data){
      lat = (latlng[0]).toFixed(2) // show latitude of clicked point in the console
      lon = (latlng[1]).toFixed(2) // show longitude of clicked point in the console

    // 3- Add coordinates of the selected geometry in the div element 
    //  with id = "box" 
       document.getElementById("lat").innerHTML = lat;
       document.getElementById("lon").innerHTML = lon;
    });