I've a website where using Cartodb.js I'm adding two layers using

cartodb.createlayer(map, 'url').addTo(map);

Info window is on for both layers. While the features of one layer overlap with features of other layer. So, when I click the overlapping area, two info windows open. While I want to open one info window including data from both windows. Is there a way to customize info windows in my case.


There are a couple of solutions to this that both involve creating the layer object yourself - http://docs.cartodb.com/cartodb-platform/cartodb-js/layer-source-object/

The first option is to query a dataset directly and modify the cartocss as needed. You will then need to insert html infowindow template -

infoWindow = cdb.vis.Vis.addInfowindow(map, layer, ['cartodb_id'], {
      infowindowTemplate: '',
      width: '480'

We have found this method quite painful as you need to hardcode a lot of querys, cartocss and infowindow html, and this can be tiring when you have 20+ layers you want to style individually.

Another method we are currently investigating is to create seperate maps with our layers, call the viz.json of each map via ajax, extract the layer objects from each map, and then combine them into one layer object for the create layer call.

These are the only two methods I can think of that avoid the duplicate infowindow problem, while maintaining the cartodb infowindow style.


Yes, it's possible programmatically. This post does a very good job of explaining it: http://zevross.com/blog/2014/05/05/cartodb-handling-infowindows-for-overlapping-features/

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.