Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Leaflet Timeline Slider

Public visualization

Viewing a saved revision (read-only)

8f20c0862bc24206a5bb4f7a33ae1f37

Leaflet Timeline Slider

0 stars0🌍 Public
SSam Hege
Last edited Feb 10, 2023
Created on Feb 10, 2023
Forked from HTML Starter

This example uses the Leaflet mapping library to visualize a collection of geographic points as markers on an OpenStreetMap base layer. A timeline slider enables navigation through different story titles, such as "Day 1" and "1776," filtering the displayed GeoJSON features by their title property. When the slider value changes, the code removes existing markers and adds new ones from the filtered data, fitting the map bounds to the marker group and binding popups that show story content and progress. The implementation relies on jQuery and Leaflet's map, tileLayer, geoJson, and featureGroup APIs.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.