Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Leaflet Timeline Slider

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed