How to enable antialiasing for deck.gl custom layers?

[jasonsoden]

In February, mapbox-gl-js added support for the antialias flag but I'm not sure how to use it.

Any suggestions? I'm experiencing jagged edges everywhere I've tested the custom layer.

• Windows 10 (4k tv, 1440p monitor, Surface Book)
• iOS (iPad 12.9" Pro, iPhone 6 Plus)
• Android (OnePlus 3)
• Chrome, Firefox, Edge, Opera, Safari

The issue is less extreme with Retina Display but still happens. I'm using @deck.gl/react 6.4.7.

[Pessimistress]

The antialias flag was not applied to custom layers, as fixed by mapbox/mapbox-gl-js#7821. This commit has not been released by mapbox. We are actively tracking its progress.

[sibbl]

The PR from mapbox's side is closed now and the fix was released with mapbox a few months back already. However, I still run into this issue using the latest version of all involved npm modules.

[Pessimistress]

@sibbl The antialias option is default to false on Mapbox's side. You must manually enable it by supplying antialias: true to the mapboxgl.Map constructor, or mapOptions: {antialias: true} to the MapGL component if using React.

[sibbl]

@Pessimistress that's exactly what I did, but it didn't change anything. Is there a reason why mapbox-gl@0.54.0 is skipped by react-map-gl as the fix mentioned above is only in this and newer versions? Manually installing this specific version also didn't help unfortunately.

[Pessimistress]

@sibbl you can try react-map-gl 5.0.0 which uses mapbox-gl 1.0.0. I will also publish a patch of react-map-gl if you want to stay on the 0.xx track.