Some of the CartoDB maps online, like Illustreets react constantly to mouse hover instead of requiring a click. Is there a way that I can do that with my CartoDB maps?
[GIS] Mouse hover with CartoDB
carto
Related Solutions
One of the things you can do is request the geometry from cartoDB as in a geoJSON format as part of your SQL query:
SELECT *,ST_ASGEOJSON(the_geom) AS geometry FROM your_table
Google can take the geoJSON and convert it to polylines and polygons each time you mouse over a feature. Here's an example I've done with a polyline. You could do the same thing with a polygon, but use google.maps.Polygon() instead.
First create your shape (I created a global one so I could edit it easier).
var polylineHighlight = new google.maps.Polyline();
var polyOptions = {
strokeOpacity: 0.9,
strokeWeight: 13,
visible: false,
zIndex: 20
};
For more information on doing this with a Polygon, check out the Google Maps API (https://developers.google.com/maps/documentation/javascript/examples/polygon-simple)
Then this code would be used as part of your cartoDB featureover callback (via http://docs.cartodb.com/cartodb-platform/cartodb-js.html#create-a-visualization-from-scratch) :
.done(function(vis, layers) {
layers[1].on('featureOver', function(ev, pos, latlng, data) {
//Parse the geoJSON
var geometryJSON = $.parseJSON(data.geometry);
var pathCoordinates = new google.maps.MVCArray();
var temp = geometryJSON['coordinates'];
//Step through each coordinate pair
for (j = 0; j < temp.length; j++){
var latLongArr = geometryJSON['coordinates'][j];
for(i = 0; i < latLongArr.length; i++) {
var lon = latLongArr[i][0];
var lat = latLongArr[i][1];
//Place each coordinate is put into a LatLng and push that into an array of coordinates.
var latlng = new google.maps.LatLng(lat, lon);
pathCoordinates.insertAt(i,latlng);
}
}
// Change polyline location
var polyOptions = { path: pathCoordinates };
polylineHighlight.setOptions(polyOptions);
polylineHighlight.cartodb_id = data.cartodb_id;
}
}
Don't forget to make sure your cartoDB interactivity is turned on.
Best Answer
One of the CartoDB developers just put a great example of this, see http://bl.ocks.org/javisantana/8313604
Right now it does take some javascript coding, leveraging cartodb.js. In the future the team hopes to add hover functionality directly to the GUI.