I am building a map on Carto, i am mapping activities at building level in a city. Sometimes two activities occur in the same building, when the map is zoomed in (at building level) you can clearly see the different icons but when I zoom out the icons collide and you can finally see one only (others are masked behind).

I wonder if there is a way to automatically separated the icons when the map is scaled in order to keep the readability of each individual icon? Any ideas?


As pointed out by Jorge in a previous answer, there are a wide diversity of ways to achieve what you are looking for. My favorites are spidifying and stacking chips.

The first alternative cannot be done directly within CARTO Editor, you have to use CARTO.js and Markercluster Leaflet's plugin. Here you have a working example. However, the second method can be implemented just using SQL:

          array_agg(cartodb_id) id_list, 
          ST_Y(the_geom_webmercator) y 
        FROM table_name
        GROUP BY the_geom_webmercator 
        ORDER BY y DESC
      f AS (
          generate_series(1, array_length(id_list,1)) p, 
          unnest(id_list) cartodb_id, 
        FROM m
      ST_Translate(f.the_geom_webmercator,0,f.p*50) as the_geom_webmercator,
    FROM f, table_name q
    WHERE f.cartodb_id = q.cartodb_id

You only need to replace table_name with your dataset name and add in the last SELECT the fields you are interested in like this q.field1, q.field2 and so on. In addition, depending on your zoom range you should change the offset parameter (in my case I have used 50). Here you have a working example.

  • With the above sql method (which produces stacked icons), is there a way to alter the Y multiplier per zoom level. This would allow the stacks to remain tightly stacked across all zoom levels, instead of spreading out when you zoom in? – ProudGIS Apr 21 '17 at 10:23
  • 1
    Yes, there is. In the original one, the author (Chris Whong) used Javascript to change dynamically the f factor based on zoom. But in this new version, another colleague used CartoCSS in order to obtain the same result. – ramiroaznar Apr 21 '17 at 13:10
  • -@ramiroaznar I notice the map from Chris Whong doens't have dynamic zoom offset enabled although he has added the js (not sure if something has broken at some stage). The function marker-transform: translate(x,y) seems to be what I have been after. Having the offset in the cartoCSS allows zoom dependent offsets. Thanks for your advice! – ProudGIS Apr 21 '17 at 15:11
  • You are right. That's a very old post blog. Anyway, I recommend the solution you have chose because there is not js involved. – ramiroaznar Apr 21 '17 at 15:19

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.