2

I have been working on getting infowindows on my cartodb layers, but i am not sure what I am doing wrong as I want the infowindows to automatically close on feature out and only pop up when featurein or on hover regardless of the sublayer. A simple scaled down approach is as shown here. http://bl.ocks.org/jmwenda/b472b0a932fc5b895a5e59dadac18192. I have tried other methods such as shown with very little success. Any pointers on what I going on here or how to trigger the infowindow to automatically close?

  cartodb.createLayer(map, markersLayerSource)
    .addTo(map)
    .done(function(layer) {
             var publishedLayer = layer.getSubLayer(0);
             publishedLayer.setInteraction(true);
             var infowindow = publishedLayer.infowindow;
             cdb.vis.Vis.addInfowindow(map, publishedLayer,['cartodb_id','cdb_list'],{triggerEvent: 'featureOver'});

             publishedLayer.on('featureOver', function (e, latlng, pos, data, layer) {
                      //$(document).bind('mousemove', event);
                      $('.cartodb-popup').show();
                      //infowindow.set('visibility', true);

             });

             publishedLayer.on('featureOut', function (e, latlng, pos, data, layer) {
                      $('.cartodb-popup').hide();
                      //$(document).unbind('mousemove', event, false);
                      //infowindow.set('visibility', false);
             });

    });
|improve this question
1

Instead of attaching the tooltips to every sublayer, you can create two (or many) layers with createLayer and then append the tooltips (an infowindow which shows when hovers over and hide when hovers out any layer feature, as suggested here) to these layers:

  1. First, set your markerLayerSource with your proper query and style for each layer.
  2. Secondly, use createLayer with these parameters. Remember to set the interaction (of the layer) and the interactivity (of the fields).
  3. Create a variable called tooltip with Leaflet's layer.leafletMap.viz.addOverlay method and append it with jQuery to the <body>.

Here you have a working example.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.