CODEWITHSUNDEEP
javascriptmapbox-gl-js
danvk
danvk

Reputation: 16955

Render GeoJSON fill layer in Mapbox GL JS without outlines

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

choropleth of block groups with 1px border

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):

choropleth showing undesirable visual artifacts

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.

Upvotes: 2

Views: 1547

Answers (1)

Ryan Baumann
Ryan Baumann

Reputation: 21

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:

  1. Install Tippecanoe, an open-source command line tool to create vector tiles from geojson data. https://github.com/mapbox/tippecanoe
  2. 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).
  3. Upload the output mbtiles file to your Mapbox account.

Upvotes: 2

Related Questions