I have created a map using Carto. The map has bespoke images as icon markers. I would like to style the map so that, if the icons overlap, they both render in an offset position so that the full icons are visible, perhaps with a line to the actual co-ordinates. Ideally a function for this exists and can handle any overlap dynamically, if not some manual tips on offset styling will help.

An example of the issue I have is here: https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ If you zoom out far enough on the map, the icons will begin to overlap, which is the behavior I wish to prevent.

Clustering is not an option as I have unique images that need to be visible.

Spidering/Spiderfy (http://jawj.github.io/OverlappingMarkerSpiderfier-Leaflet/demo.html) looks close to what I am after, but this only splits the icons on click rather than as standard.

Moving on from the original question above, i have managed to create hard-coded offsets for overlapping features with the below sql:

    SELECT cartodb_id, tree, capacity, the_geom_webmercator FROM tablea  where tree NOT IN ('Oak','Willow')
UNION SELECT cartodb_id, tree, capacity, st_translate(the_geom_webmercator,20000,0) as the_geom_webmercator FROM tablea where tree = 'Oak'
UNION SELECT cartodb_id, tree, capacity, st_translate(the_geom_webmercator,10000,10000) as the_geom_webmercator FROM tablea where tree = 'Willow'

This brings in all other elements in tablea and then styles specific elements with an offset on the X,Y bringing them all together as a union select.

Unfortunately this creates a problem. The hard coded offset is fine at certain zoom levels but looks odd in others. Ideally I want a zoom specific sql query. From what I can tell this doesn't exist in Carto, and you can only style the CSS at specific zoom levels?

Mapbox have created a postGIS function that runs the below:

( SELECT * FROM roads
  WHERE Z(!scale_denominator!) >= 12
) AS data

Does anyone know of the Carto equivalent to this? Or perhaps advice on an alternative method?

  • This is a duplicated, here you can find a similar Q/A. – ramiroaznar Apr 19 '17 at 7:55
  • 1
    Thanks @ramiroaznar. It seems the solution in the link provided is for the stacked marker solution, which isn't appropriate for the icons I have. i am surprised a function to offset icons when their bbox clashes with another icon doesn't exist. If someone could summarise the functions out there for overlapping markers, I could move on to adjusting things manually if need be. – ProudGIS Apr 19 '17 at 8:41
  • 2
    If clustering, spidifying or stacking do not work for you. You have to make a taylor/custom solution such as styling your layer depending on zoom using CartoCSS offset properties or duplicating the layer, and playing with the_geom and hinding/showing layers depending on the zoom. – ramiroaznar Apr 19 '17 at 17:01
  • Possible duplicate of carto.com when 2 points have the same location – Jorge Sanz May 2 '17 at 14:19
  • Afraid not. My points do not sit at the same x,y but they overlap at certain zoom levels. I am after a zoom specific query that can use translate to adjust the x or y (or both) if markers overlap. – ProudGIS May 2 '17 at 15:25