FGBMate manages FlatGeoBuf's in LeafletJS. Update FGB's in zoom level range with user defined feature styling. Uses a paneZIndex option for painlessly stacking vector layers. This is a wrapper around flatgeobuf-geojson and it is required. Documentation at the bottom.

(Click on country. Population >= 100 million, country is in color)

Most basic usage, click for country population:

var map = L.map('map', {
   center: { lat: 39, lng: -95 }
   ,zoom: 4
   ,maxZoom: 5
});
      
let landlow = new FGBMate(map, {
   url: "https://www.femafhz.com/map/data/vector/ne_10m_admin_0_countries_low.fgb"
   ,minZoom: 1
   ,maxZoom: 5
   ,style: { color: '#5577aa', weight: 1, fillColor: '#ffffff', fillOpacity: 0 } 
   ,onEachFeature: function (feature, layer) {
      layer.bindPopup(L.Util.template(
         'Name: {name}<br>Region: {REGION_UN}<br>Sub-Region: {SUBREGION}<br>Population (est): {POP_EST}', feature.properties)
         ,{autoPan: false }
      )
   }
});
landlow.addLayer();

More complete example. This is the interactive map above. Country borders blue, color filled when population >= 100 million, custom click function, custom style function:

var map = L.map('map', {
   center: { lat: 39, lng: -95 }
   ,maxBounds: [[-90, -180], [90, 180]]
   ,maxBoundsViscosity: 1.0
   ,zoom: 4
   ,maxZoom: 18
   ,zoomControl: false
   ,doubleClickZoom: false
});
L.control.scale().addTo(map);
L.control.zoom({position: 'topright'}).addTo(map);

let cfg = {
   url: "https://www.femafhz.com/map/data/vector/ne_10m_admin_0_countries_low.fgb"
   ,minZoom: 1
   ,maxZoom: 5
   ,style: function (feature, layer) { 
      return feature.properties.POP_EST >= 100000000 
         ? { color: '#5577aa', weight: 1, fillColor: '#cc9090', fillOpacity: .5 }
         : { color: '#5577aa', weight: 1, fillColor: '#ffffff', fillOpacity: 0 };
   }
   ,onEachFeature: function (feature, layer) {
      layer.bindPopup(L.Util.template(
         'Name: {name}
Region: {REGION_UN}
Sub-Region: {SUBREGION}
Population (est): {POP_EST}', feature.properties)
         ,{autoPan: false }
      )
   }
};
let landlow = new FGBMate(map, cfg);
landlow.addLayer();

cfg.url = "https://www.femafhz.com/map/data/vector/ne_10m_admin_0_countries.fgb";
cfg.minZoom = 6;
cfg.maxZoom = 18;
let land = new FGBMate(map, cfg);
land.addLayer();

Documentation
Requires flatgeobuf-geojson

• Options
  
• url: required. Path to FlatGeoBuf vector data (FGB)
• minZoom: minimum zoom level to display
• maxZoom: maximum zoom level to display
• paneZIndex: stacking order. Just like CSS z-index. Largest number on top.
• style: object using JavaScript style syntax or a function returning JavaScript style syntax object
• minFetch: minimum size in bytes of FGB file to fetch. Default 500. Otherwise, no data is fetched.
• maxFetch: maximum size in bytes of FGB file to fetch all at once. Default 1,000,000. Otherwise, fetch in viewport size chunks as needed.

• Methods
  
• addLayer(): adds layer after instance creation or re-adds after removeLayer()
• removeLayer(): removes layer from DOM after addLayer().

That's it!