I'm having an issue on a Leaflet map with an hexgrid without border lines. At zoom level 10 and more, those blank artifacts appear.

enter image description here

You can see this web-map deployed here:


This is my code so far:

   <!DOCTYPE html>
<html lang="en">
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
 <title>Asthma danger map</title>
   #map {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

   nav {
   position: fixed;
   height: 35px;
   top: 0;
   right: 0;
   left: 0;
   background: #611f53;
   text-align: center;
   line-height: 5px;

   body  {
   position: fixed;
   top: 35px;
   bottom: 0;
   right: 0;
   left: 0;
   vertical-align: top;


   <p style="color:white;">Asthma danger map</p>
 <div id="map"></div>



<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./data/hexgrid.js"></script>


 var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
   attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'

 var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
   subdomains: 'abcd',
   maxZoom: 19

 const extent = [34, -118.22]

   var map = L.map('map', {
       center: extent,
       zoom: 10,
   preferCanvas: true,
       layers: CartoDB_Positron

 function getColor(d) {
       return  d === 'HIGHEST' ? '#48194c' :
           d === 'HIGH'    ? '#8856a7' :
           d === 'LOWER'   ? '#8c96c6' :
           d === 'LOWEST'  ? '#b3cde3' :

 function style(feature) {
   return {
       fillColor: getColor(feature.properties.danger_level),
       fillOpacity: 0.5,
       weight: 0,

 var grid = L.geoJson(hexgrid, {
   style: style,



The JS data is here: https://guillermodangelo.com/grid_stack_exchange/data/hexgrid.js

The grid was made in QGIS (EPSG:3857), reprojected in geopandas and then exported to GeoJSON with CRS ESPG:4326. My hypothesis is that this reprojection generates tiny slivers of uncovered space, that is showed by leaflet at small zoom (10, 11 and so on).

I would like to hear your thoughts on this, and possible ways to fix this (a bigger cell grid?)

1 Answer 1


It seems like some kind of a bug. I didn't go into details why this happens, just found a workaround with modifying style.

Instead of stroke weight 0, it gets weight 1. Since polygons overlap, this gives undesired effect at borders if opacity is 0.5. So opacity is set to one, but the whole GeoJSON layer opacity is set to 0.5 with the help of separate map pane.

So relevant code could look something like this (tested):

 function style(feature) {
   var color = getColor(feature.properties.danger_level);
   return {
     fillColor: color ,
     fillOpacity: 1,
     color: color,
     opacity: 1,
     weight: 1,

 map.getPane('myPane').style.opacity = 0.5;
 var grid = L.geoJson(hexgrid, {
   style: style,
   pane: 'myPane'

This is the result:

enter image description here

  • Thanks TomazicM! I really appreciate your help, your code snippetts helped me a lot, and I managed to fix this issue. Also, I learned about "map panes", which didn't had used before. Sep 5, 2021 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.