Reputation: 16955
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.
Upvotes: 2
Views: 1547
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:
--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).mbtiles
file to your Mapbox account.Upvotes: 2