Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Sample_Leaflet_columnsFly

Public visualization

Viewing a saved revision (read-only)

cd356ce266124cfb89c5997a74757a60

Fork of Sample_Leaflet_columnsFly

0 stars1🌍 Public
FFrancesco Di Filippo
Last edited Mar 8, 2024
Created on Mar 8, 2024

This example demonstrates a linked interaction between an HTML list and an interactive Leaflet map. Hovering over list items triggers the map to fly between two distinct geographic locations using the `map.flyTo` method. The visualization pairs a simple, unstyled list with a CartoDB Voyager tile layer rendered via the Leaflet JavaScript library. The code shows how DOM events, such as `mouseover`, can directly control map animations, offering a lightweight pattern for coordinating non-spatial UI elements with geospatial views. The map is initialized with a center point and zoom level, and the interaction resets colors after a short delay.

AI-generated description

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

See also React Starter.