How To Load Only Visible Markers In Leaflet?

I am connecting to a json url to pull back properties onto the Leaflet map. There's about 2,000 coming in as markers (using Marker Cluster as well). Each marker has a popup with

Solution 1:

What you think is correct. It would be a nice idea to request only the points that will be visible. Of course, this requires server-side work as well (e.g. setting a WFS service in GeoServer or a custom API that will response with points inside your bounding box).

With this solution, you have to listen to 'moveend' event, to get the Bounding Box, each time your map moves (zoom / pan).

map.on('moveend', () => {
    const bounds = map.getBounds().toBBoxString();
    /* now send your bounds to the server, requesting only the visible markers */
})

Another solution would be to use a WMS service (serving your points as tiles), in combination with the WMS GetFeatureInfo method for being able to fetch information by clicking on them. Again, server-side work is required (e.g. setting a GeoServer).