CartoDB has a great hexbin visualization wizard baked into the client dashboard:

enter image description here

However, I like using cartodb.js to customize events and interactions; in particular, I'd like to make styles dependent on map zoom level. Recognizing that the hexbin visualization is a combination of SQL and CartoCSS parameter configuration, what are the ideal functions to pass to CartoDB to return hexes with cartodb.js?

  • I just discovered this, which may make things easier. Feb 12, 2014 at 17:15
  • If you haven't seen it, this is handy as well. Feb 12, 2014 at 20:39

2 Answers 2


Okay, maybe a bit ugly but I put a lot of functionality in here


It includes

  • create an initial layer on the fly
  • a hover to the layer
  • after timeout, changing the size of the density grid
  • recalculating a style to go along with the new size

I think it will get you pretty far. Note, you could make the style calculation before any createLayer event, and you would be able to then apply the initial style without ever knowing it.

One key thing to notice is that the tiler uses !pixel_width!,!pixel_height! whereas the SQL API needs to use, CDB_XYZ_Resolution(some zoom)

  • Holy. Crap. Amazing. Feb 14, 2014 at 18:13

CartoDB documentation for advanced concepts includes a function CDB_HexagonGrid that could be useful for you, you have some example of use on the wiki of their github account

There is actually an example of a grid regenerated for each zoom level that may also help.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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