1

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

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.

  • It looks like your markers are being clipped by the tile boundary. I'm not really sure how to fix it outside of mucking around with marker type itself. Interestingly CartoCSS has a property called marker-avoid-edges but it is not available on the carto platform. – Jags Mar 26 '17 at 22:43
  • Thank you for your comment @Jags. I agree the tiles might be part of the problem but I've still not found a proper fix for this. I'm wondering if it may be a bug that CARTO can fix? Otherwise it just means a polygon and marker map cannot be used together because of the display issues. The same problem occurs when you make the map via CARTO's own platform/website as well. – Sidders Mar 27 '17 at 17:13
1

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

  • Putting the markers on a separate layer was exactly my thoughts too after finding this. Although I only wanted to apply marker-styles to polygons rather than generate new markers, it seems that is not possible/too buggy to do for now. Also thank you for your code and explanation - I will have to re-code huge chunks of my map so I can switch layers/css on and off when clicking different buttons but at least it should work as intended. – Sidders Mar 28 '17 at 6:25
  • A quick question - how could you switch the second SQL query and cartocss inside layerSource on and off via a button click? Or would it be better practise to have two createLayer(); methods as shown here? – Sidders Mar 28 '17 at 6:44
  • @Sidders Be careful of using multiple createLayer() methods, it doesn't play nice with infowindows/hoverwindows. However if you are not going to use those you can get away with it. For your case though, you don't need two createLayrer methods, you just need to capture the sublayers in the done method, and then you can toggle them as needed. I have a quick and dirty here jsfiddle.net/84agm2wq It is running a little slow, and I'm not really sure why (perhaps something to do with the fiddle platform?), but this is the general method you would take. – Jags Mar 28 '17 at 22:06
  • Thanks again @Jags - you're right, it is a bit slow but it works! I also ended up answering my own question in the end by using this map as an example, but your method uses a lot less code, which is always welcome! – Sidders Mar 29 '17 at 19:01

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.