1

I would like to pass the data from a marker in a featureClick() event to perform other actions. However I do NOT want an infowindow or tooltip to display. I can quite easily remove the infowindow/tooltip in the options of createLayer(), however this disables the click functionality for a marker.

EDIT 1: It seems that if you explicitly setInteraction(true) for the sublayer the featureClick() event will fire, however the cursor for the marker is not changing to a pointer.

1

Yes, by using the layer.setIntraction(true) method with layer.setInteractivity('cartodb_id,awesome_column,other_awesome_column') like the example near the top of the CartoDB.js docs:

cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
  .done(function(vis, layers) {
    // layer 0 is the base layer, layer 1 is cartodb layer
    // when setInteraction is disabled featureOver is triggered
    layers[1].setInteraction(true);
    layers[1].on('featureOver', function(e, latlng, pos, data, layerNumber) {
      console.log(e, latlng, pos, data, layerNumber);
    });

    // you can get the native map to work with it
    var map = vis.getNativeMap();

    // now, perform any operations you need, e.g. assuming map is a L.Map object:
    // map.setZoom(3);
    // map.panTo([50.5, 30.5]);
  });

I did a basic example of this here using the featureOver event to create custom hover boxes.

  • Thanks, from a functionality perspective that is what I was after. However it looks like you can't default the cursor the a pointer without some form of hack (gist.github.com/javisantana/6102814). I'm in the middle of trialing the product and we have many many use cases. It also seems you can't change the color of an individual marker on click without reloading the entire marker set (setting the css for the entire layer). – Jags Sep 29 '15 at 5:48
1

I thought I would come back and post this answer as it might help someone else in the future. I had a two part problem. Interacting with the map object when the infowindow was disabled, as well as having the cursor change on hover to indicate to the user that the object is clickable.

Problem 1: Interacting with object
Straight forward, and solved by setting interaction to true.

layer.setInteraction(true)

Problem 2: Changing cursor on hover
There are a few solutions on the web that involve capturing the mouseover event, and changing the div css with jQuery and are similar to below.

layer.on('mouseover', function() {
    $('#map").css('cursor', 'pointer');
});
layer.on('mouseout', function() {
    $('#map").css('cursor', 'auto');
});

However I believe this solution only works for Leaflet maps, which are the common maps for all cartoDb examples. The google solution is below;

layer.on('mouseover', function() {
    map.setOptions({draggableCursor: 'pointer'});
});
layer.on('mouseout', function() {
    map.setOptions({draggableCursor: null});
});

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.