I have a dataset containing thousands of Car Parking Spaces I want to show on a map. However when I use the L.glify.shapes function the polygons do not render correctly? Is there any way I can resolve this issue?

Or can anyone recommend a different library that is more suitable for rendering large amounts of data on a leaflet map? Many thanks

You can see the code here: https://codepen.io/RayL1/pen/WNzbddJ

let map = L.map('map', {maxZoom: 30}).setView([ 51.524676, -0.181212], 22);

let data = {
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181100, 51.524730 ], [ -0.181155, 51.524703 ], [ -0.181169, 51.524714 ], [ -0.181114, 51.524741 ], [ -0.181100, 51.524730 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181158, 51.524702 ], [ -0.181212, 51.524676 ], [ -0.181226, 51.524687 ], [ -0.181172, 51.524713 ], [ -0.181158, 51.524702 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181214, 51.524675 ], [ -0.181268, 51.524649 ], [ -0.181282, 51.524660 ], [ -0.181228, 51.524686 ], [ -0.181214, 51.524675 ] ] ] } },
    { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [ -0.181271, 51.524648 ], [ -0.181325, 51.524622 ], [ -0.181339, 51.524633 ], [ -0.181285, 51.524659 ], [ -0.181271, 51.524648 ] ] ] } }
  ]
}

This is what it should look like:

L.geoJSON(data, {
  style:{
    "color": "black", 
    "weight":4, 
    "fill":false, 
    "opacity":0.8
  }
}).addTo(map);

This is how it comes out:

L.glify.shapes({
  map: map,
  data: data,
  border:true,
  color:{
    r:0,
    g:0,
    b:245
  }
});

Difference: