Expose all Leaflet.markerCluster() options to datasette-cluster-map config

README.md

@@ -85,6 +85,27 @@ from [USGS_WC_eartag_deployments_2009-2011]
 
 The map defaults to being displayed above the main results table on the page. You can use the `"container"` plugin setting to provide a CSS selector indicating an element that the map should be appended to instead.
 
+### Customizing marker cluster group options
+
+You can customize the [Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster?tab=readme-ov-file#options) options by supplying a `cluster_map_options` dictionary in your plugin configuration. These options are merged with the plugin's defaults (`chunkedLoading: true`, `maxClusterRadius: 50`); your values override the defaults.
+
+For example, to make fewer, larger clusters, you can increase [`maxClusterRadius`](https://github.com/Leaflet/Leaflet.markercluster?tab=readme-ov-file#other-options):
+
+```json
+{
+    "plugins": {
+        "datasette-cluster-map": {
+            "cluster_map_options": {
+                "maxClusterRadius": 80    
+            }
+        }
+    }
+}
+```
+
+See the [Leaflet.markercluster options documentation](https://github.com/Leaflet/Leaflet.markercluster?tab=readme-ov-file#options) for all available options.
+
+
 ## Custom tile layers
 
 You can customize the tile layer used  by the maps using the `tile_layer` and `tile_layer_options` configuration settings. For example, to use the [OpenTopoMap](https://opentopomap.org/) you can use these settings:

datasette_cluster_map/__init__.py

@@ -44,6 +44,12 @@ def extra_body_script(database, table, columns, view_name, datasette):
             json.dumps(config.get("tile_layer_options") or TILE_LAYER_OPTIONS)
         )
     )
+
+    # Add cluster_map_options if present
+    if "cluster_map_options" in config:
+        js.append(
+            f"window.DATASETTE_CLUSTER_MAP_OPTIONS = {json.dumps(config['cluster_map_options'])};"
+        )
     if config.get("container"):
         js.append(
             "window.DATASETTE_CLUSTER_MAP_CONTAINER = {};".format(

datasette_cluster_map/static/datasette-cluster-map.js

@@ -298,10 +298,17 @@ const addClusterMap = (latitudeColumn, longitudeColumn) => {
   let progressDiv = document.createElement("div");
   progressDiv.style.marginBottom = "2em";
   el.parentNode.insertBefore(progressDiv, el.nextSibling);
-  let markerClusterGroup = L.markerClusterGroup({
+  // Merge user-supplied cluster_map_options with defaults
+  const defaultClusterOptions = {
     chunkedLoading: true,
     maxClusterRadius: 50,
-  });
+  };
+  const userClusterOptions = (typeof window.DATASETTE_CLUSTER_MAP_OPTIONS === 'object' && window.DATASETTE_CLUSTER_MAP_OPTIONS !== null)
+    ? window.DATASETTE_CLUSTER_MAP_OPTIONS
+    : {};
+  let markerClusterGroup = L.markerClusterGroup(
+    Object.assign({}, defaultClusterOptions, userClusterOptions)
+  );
   map.addLayer(markerClusterGroup);
   let path = location.pathname + ".json" + location.search;
   const qs = "_size=max&_labels=on&_extra=count&_extra=next_url&_shape=objects";

tests/test_cluster_map.py

@@ -98,6 +98,12 @@ def db_path(tmp_path_factory):
                 'window.DATASETTE_CLUSTER_MAP_LONGITUDE_COLUMN = "lng";',
             ],
         ),
+        # Test cluster_map_options emits correct JS
+        (
+            {"cluster_map_options": {"spiderfyOnMaxZoom": False}},
+            "places",
+            ['window.DATASETTE_CLUSTER_MAP_OPTIONS = {"spiderfyOnMaxZoom": false};'],
+        ),
     ],
 )
 async def test_plugin_config(db_path, config, table, expected_fragments):