leaflet - Carto: Markers being offset or cut-off on polygon & marker map

I am seeing artifacts and markers are getting cut-off on my map. Zooming in and out can also leave an 'imprint' of what the map looked like before - either for a few seconds or until you refresh the page.

What could be causing these issues and how could I fix them?

I've added screen-grabs below.

Left: Scrambled markers/artifacts. Right: Zoom display problem

EDIT: Using marker-placement: point and marker-multi-policy: whole has almost fixed my problem. My new map is here. But some markers are still getting clipped/cut-off. How can I stop that from happening? I've tried using buffer-size as shown here but it doesn't seem to be working.

Answer

So I think I got it working, the new fiddle can be found here

The issue was you were trying to render both polygon and point data with only a polygon geometry. The tile render service was doing it's best to accommodate. I'm not sure what you were intending with the centroid calculation ST_AsText(ST_Centroid(the_geom)), but I don't think it was doing what you expected, the geometry of the point data was actually being calculated on the fly by the tile render service, and not using that centroid.

The solution is to pass the polygon and point data as two seperate layers in the layerSource object and seperate your cartocss for each layer;

      sublayers: [

        {
          sql: "SELECT * FROM " + tableName,
          cartocss:  $("#polygon").text()
        },
        {
          sql: "SELECT ST_Transform(ST_Centroid(the_geom), 3857) as the_geom_webmercator, 
                murder FROM " + tableName + " WHERE calendar_year = (SELECT 
                MAX(calendar_year) FROM " + tableName +" )",
          cartocss: $("#bubble, #murder").text()
        }

      ]

One thing to note when calculating a new geometry that you wish rendered, is that it must be in the_geom_webmercator format. More information can be found here