I'm styling a geojson polygon composed of multiple closely placed vertical segements which doesnot have a gap in between (i've checked the topology). I want to display just the fill and without stroke. But when doing so, using following code:

function getColor(d) {
    if (d<=40){return 'green';}
    if (d<=60 && d>40){return 'purple';}
    if (d>60){return 'orange';}

    function style(feature) {
        return {
            weight: 0,
            opacity: 0,
            //color: 'white',
            //dashArray: '3',
            fillOpacity: 1,
            fillColor: getColor(feature.properties.id)

The result is as follows: Leaflet map showing gaps between polygons

You can see the white lines in between polygons.

  • What does it look like when zooming on one of those white lines? – ghybs Dec 2 '15 at 7:25
  • While zooming on those white lines It disappears somewhere but retains as it is. However when i zoom past 13 zoom level it almost completely disappears everywhere (only few cases there). – Bishrant Dec 2 '15 at 14:38
  • are you ever using those individual polygons within a single class? If not, maybe dissolve before rendering? check out turf.js merge: turfjs.org/static/docs/module-turf_merge.html – toms Dec 2 '15 at 17:16
  • Try changing smoothFactor for your polygons? leafletjs.com/reference.html#polyline-smoothfactor – Derek Swingley Dec 2 '15 at 17:37

Change smoothFactor to something less than 1 when creating your geojson layer. Here's an example where you can adjust smoothFactor to see how it affects the shapes that display on a map: http://jsbin.com/katuyo/edit?html,output

Your Answer

