Time Slider¶

Filter map data by a temporal property using an interactive slider control.

Features:

• Slider to filter data by numeric/temporal property
• Play/pause button for auto-animation
• Customizable range, step, and speed

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Time Slider¶

Filter earthquake data by year.

In [ ]:

import random

from anymap_ts import Map

# Generate sample earthquake data with years
random.seed(42)
earthquakes = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -120 + random.gauss(0, 15),
                    35 + random.gauss(0, 10),
                ],
            },
            "properties": {
                "year": random.randint(2000, 2024),
                "magnitude": round(random.uniform(3.0, 8.0), 1),
            },
        }
        for _ in range(200)
    ],
}

m = Map(center=[-120, 35], zoom=3)
m.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#ff4444")
m.add_time_slider(
    layer_id="quakes",
    property="year",
    min_value=2000,
    max_value=2024,
    step=1,
    label="Year",
)
m

import random from anymap_ts import Map # Generate sample earthquake data with years random.seed(42) earthquakes = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -120 + random.gauss(0, 15), 35 + random.gauss(0, 10), ], }, "properties": { "year": random.randint(2000, 2024), "magnitude": round(random.uniform(3.0, 8.0), 1), }, } for _ in range(200) ], } m = Map(center=[-120, 35], zoom=3) m.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#ff4444") m.add_time_slider( layer_id="quakes", property="year", min_value=2000, max_value=2024, step=1, label="Year", ) m

Auto-Playing Time Slider¶

Set auto_play=True to automatically animate through time steps.

In [ ]:

m2 = Map(center=[-120, 35], zoom=3)
m2.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#ff8800")
m2.add_time_slider(
    layer_id="quakes",
    property="year",
    min_value=2000,
    max_value=2024,
    step=1,
    label="Year",
    auto_play=True,
    interval=300,
)
m2

m2 = Map(center=[-120, 35], zoom=3) m2.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#ff8800") m2.add_time_slider( layer_id="quakes", property="year", min_value=2000, max_value=2024, step=1, label="Year", auto_play=True, interval=300, ) m2

Filter by Magnitude¶

In [ ]:

m3 = Map(center=[-120, 35], zoom=3)
m3.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#cc00ff")
m3.add_time_slider(
    layer_id="quakes",
    property="magnitude",
    min_value=3,
    max_value=8,
    step=0.5,
    label="Max Magnitude",
)
m3

m3 = Map(center=[-120, 35], zoom=3) m3.add_geojson(earthquakes, name="quakes", circle_radius=5, circle_color="#cc00ff") m3.add_time_slider( layer_id="quakes", property="magnitude", min_value=3, max_value=8, step=0.5, label="Max Magnitude", ) m3

Remove Time Slider¶

In [ ]:

m.remove_time_slider()

m.remove_time_slider()