Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Sample_Leaflet_scrollytelling2

Public visualization

Viewing a saved revision (read-only)

b47f6b5a7a624983a6098e54a8f3d115

Fork of Sample_Leaflet_scrollytelling2

0 stars0🌍 Public
FFrancesco Di Filippo
Last edited Mar 11, 2024
Created on Mar 9, 2024

This example demonstrates a scrollytelling interaction where scrolling through text sections triggers corresponding map views in a fixed panel. It uses a scrollable column with content sections and a fixed column containing a Leaflet map, along with hidden alternative fixed content. The JavaScript listens to scroll events on the scrollable column, checks section visibility with `getBoundingClientRect()`, and calls `map.flyTo()` to animate the map to different coordinates and zoom levels for each section. The map itself uses Leaflet with CartoDB Voyager tiles, and the interaction is built with vanilla JavaScript and CSS, without additional frameworks like React.

AI-generated description

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

See also React Starter.