Render GeoJSON fill layer in Mapbox GL JS without outlines

Question

Here's a choropleth I made with Mapbox GL JS of US Census Block Group areas in NYC:

I'd like to get rid of the 1px outline around all the polygons. Following the suggestion in this issue, I added 'fill-outline-color': 'rgba(0,0,0,0)' to my paint option. This comes close to removing the border but leaves lots of undesirable visual artifacts (the white dots):

Is it possible to remove the outlines from the polygons without introducing visual artifacts? Here's my map configuration:

map.addSource('blocks', {
  type: 'geojson',
  data: geojson,
});

map.addLayer({
  'id': 'blocks',
  'type': 'fill',
  'source': 'blocks',
  'layout': {
  },
  'paint': {
    'fill-color': [
      'interpolate',
      ['linear'],
      ['get', 'value'],
      40.5, 'rgba(255,  0, 0, 0.6)', // blue-green
      41, 'rgba(0, 255, 0, 0.6)', // yellow
    ],
    'fill-outline-color': 'rgba(0,0,0,0)'
  }
});

and a link to a full reproduction.

As a concept: draw a choropleth on a hidden map synchronized with the main map, and on a hidden map all layers are removed, except the choropleth. Then take an image from a hidden map, and for those pixels where the transparency is zero, count the interpolation by neighboring points. And put a new layer on the main map. — stdob--

Ryan Baumann Ryan Baumann · Accepted Answer · 2018-04-05T18:34:32

Small gaps in simplified polygon geometry can cause visual artifacts using fill-layer types. This problem can be solved by setting specific simplification settings creating vector tiles from source data.

Use the process below:

Install Tippecanoe, an open-source command line tool to create vector tiles from geojson data. https://github.com/mapbox/tippecanoe
Tile the polygon geojson data using the --detect-shared-borders and --coalesce-smallest-as-needed flag. This will force polygons that share an edge to simplify identically, and polygons to merge together at low zoom levels to keep vector tiles fast to render (under 500kb in size).
Upload the output mbtiles file to your Mapbox account.

Render GeoJSON fill layer in Mapbox GL JS without outlines

1 Answers