GeoJSON Clustering Example¶

This notebook demonstrates how to create clustered point layers in MapLibre. Clustering automatically groups nearby points at lower zoom levels and expands them as you zoom in.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Clustering¶

In [ ]:

from anymap_ts import Map

# Load earthquake data from USGS
earthquake_url = (
    "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
)

m = Map(center=[-98, 38], zoom=3)
m.add_cluster_layer(earthquake_url, name="earthquakes")
m

from anymap_ts import Map # Load earthquake data from USGS earthquake_url = ( "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson" ) m = Map(center=[-98, 38], zoom=3) m.add_cluster_layer(earthquake_url, name="earthquakes") m

Custom Cluster Colors and Sizes¶

In [ ]:

import random

# Generate random point data
features = []
for i in range(1000):
    features.append(
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -122.4 + random.uniform(-2, 2),
                    37.8 + random.uniform(-2, 2),
                ],
            },
            "properties": {"id": i, "value": random.randint(1, 100)},
        }
    )

geojson = {"type": "FeatureCollection", "features": features}

m2 = Map(center=[-122.4, 37.8], zoom=8)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_cluster_layer(
    geojson,
    name="random-points",
    cluster_colors=["#00ff00", "#ffff00", "#ff0000"],  # Green -> Yellow -> Red
    cluster_steps=[50, 200],  # Color changes at 50 and 200 points
    cluster_radius=60,
    cluster_min_radius=18,
    cluster_max_radius=40,
    unclustered_color="#00ffff",
    unclustered_radius=6,
)
m2

import random # Generate random point data features = [] for i in range(1000): features.append( { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -122.4 + random.uniform(-2, 2), 37.8 + random.uniform(-2, 2), ], }, "properties": {"id": i, "value": random.randint(1, 100)}, } ) geojson = {"type": "FeatureCollection", "features": features} m2 = Map(center=[-122.4, 37.8], zoom=8) m2.add_basemap("CartoDB.DarkMatter") m2.add_cluster_layer( geojson, name="random-points", cluster_colors=["#00ff00", "#ffff00", "#ff0000"], # Green -> Yellow -> Red cluster_steps=[50, 200], # Color changes at 50 and 200 points cluster_radius=60, cluster_min_radius=18, cluster_max_radius=40, unclustered_color="#00ffff", unclustered_radius=6, ) m2

Clustering with More Color Steps¶

In [ ]:

m3 = Map(center=[-98, 38], zoom=3)
m3.add_basemap("CartoDB.Voyager")
m3.add_cluster_layer(
    earthquake_url,
    name="earthquakes-styled",
    cluster_colors=["#2dc4b2", "#3bb3c3", "#669ec4", "#8b88b6", "#a2719b"],
    cluster_steps=[10, 50, 100, 500],
    cluster_min_radius=12,
    cluster_max_radius=35,
    unclustered_color="#e55e5e",
    unclustered_radius=5,
)
m3

m3 = Map(center=[-98, 38], zoom=3) m3.add_basemap("CartoDB.Voyager") m3.add_cluster_layer( earthquake_url, name="earthquakes-styled", cluster_colors=["#2dc4b2", "#3bb3c3", "#669ec4", "#8b88b6", "#a2719b"], cluster_steps=[10, 50, 100, 500], cluster_min_radius=12, cluster_max_radius=35, unclustered_color="#e55e5e", unclustered_radius=5, ) m3

Disable Zoom on Click¶

In [ ]:

m4 = Map(center=[-122.4, 37.8], zoom=8)
m4.add_cluster_layer(
    geojson,
    name="no-zoom",
    zoom_on_click=False,  # Disable click-to-zoom behavior
    cluster_colors=["#3388ff", "#ff8833"],
    cluster_steps=[100],
)
m4

m4 = Map(center=[-122.4, 37.8], zoom=8) m4.add_cluster_layer( geojson, name="no-zoom", zoom_on_click=False, # Disable click-to-zoom behavior cluster_colors=["#3388ff", "#ff8833"], cluster_steps=[100], ) m4

Remove Cluster Layer¶

In [ ]:

# Create map and add cluster layer
m5 = Map(center=[-122.4, 37.8], zoom=8)
layer_id = m5.add_cluster_layer(geojson, name="removable")
print(f"Layer ID: {layer_id}")
m5

# Create map and add cluster layer m5 = Map(center=[-122.4, 37.8], zoom=8) layer_id = m5.add_cluster_layer(geojson, name="removable") print(f"Layer ID: {layer_id}") m5

In [ ]:

# Remove the cluster layer
m5.remove_cluster_layer("removable")

# Remove the cluster layer m5.remove_cluster_layer("removable")

Export to HTML¶

In [ ]:

m3.to_html("clustering_example.html")

m3.to_html("clustering_example.html")