Skip to main content
SimilarExport ZIP
100%

Leaflet Timeline Slider

✓ Published0🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Map id 11 & slider v1

This example combines a Google Map with a D3.js time slider to explore a single timestamped location. A map centered on Lyon (map id 11) displays terrain, while the slider beneath it spans a time interval on December 7, 2014. Dragging the slider’s handle updates the displayed date and changes the SVG background color using `d3.hsl`. The implementation uses the Google Maps JavaScript API for the map and D3 v4’s `d3.drag` and `d3.scaleTime` for the interactive time axis, with SVG rendering for the slider.

LLucLafond
69% match
Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok
67% match
Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Ccharliemok
67% match
Loading thumbnail…

time slider

This example showcases various interactive slider configurations built with D3 v5 and the d3-simple-slider library. It demonstrates core functionalities like simple continuous sliders, step-based sliders for discrete values, and time-based sliders using the `d3.timeFormat` and `d3.timeScale` for date handling. Additional features include filled sliders, range selection, vertical orientation, customized handles, and smooth transitions. The visualization also presents practical applications, such as a New York Times-style slider and a color picker, all rendered as SVG elements with Bootstrap styling for layout.

Mmanoj-soft
66% match
Loading thumbnail…

Leaflet Map Example

This example shows a Leaflet map with interactive markers and a circle overlay, plotting applicant counts per country from a CSV dataset. Using the Leaflet JavaScript library, it renders an OpenStreetMap base layer and adds markers for each data point, binding popups to display country-specific information. The code also demonstrates adding a styled circle geometry to the map, and it imports utilities from TopoJSON for potential geospatial operations.

Kklumng
66% match
Loading thumbnail…

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets
66% match
Loading thumbnail…

Leaflet.js × D3.js × geojson-vt.js - Redraw Canvas Tiles Map

This example shows a slippy map interface using Leaflet.js alongside D3.js to render geographic boundaries from a GeoJSON dataset. Canvas tiles are generated in the frontend, converting vector data into raster tiles on demand. The core function `addCanvasTile` leverages the `geojson-vt.js` `tileIndex.getTile` API to extract features for a given zoom level and coordinate. Drawing occurs directly on HTML5 canvas elements, and the code uses Canvas `getImageData` to enable click detection on rendered polygons, with D3 selection handling mouse events for property feature identification.

HHirosaji
66% match
Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Aashpradhan01123
66% match