Fork of Sample_Leaflet_columnsFly

100%

Fork of Sample_Leaflet_columnsFly

✓ Published1🌍 Public

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.

Similar vizzes

Loading thumbnail…

Sample_Leaflet_columns

This example pairs an interactive Leaflet map with an HTML list to demonstrate coordinated highlighting. The left column contains list items, while the right column shows a CartoDB basemap centered on Syria. Hovering over a list item triggers the map to fly to a corresponding geographic location, such as zooming to a specific point near Crete. The code uses Leaflet’s `flyTo` method and the map’s tile layer from CartoDB’s Voyager style, with mouse events on the list elements controlling the map’s view.

FFrancesco Di Filippo

87% match

Loading thumbnail…

Fork of Sample_Leaflet_scrollytelling2

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.

FFrancesco Di Filippo

80% match

Loading thumbnail…

Sample_Leaflet_starter

This example displays a map centered on a region in Syria, with an overlay of a list of three text items. It shows a map visualization using the Leaflet JavaScript library, with CartoDB’s Voyager tile layer providing the basemap. The page layout is constructed with HTML and CSS flexbox, placing the map and the list side by side. The code initializes the map with a specific latitude and longitude, sets the zoom level, and adds the tile layer. No interactive features are demonstrated beyond the static map display, and the list items are placeholders without associated map interactions.

FFrancesco Di Filippo

71% match

Loading thumbnail…

Fork of Hello VizHub

This example displays an interactive Leaflet map centered on a global view, with markers for Germany, India, and San Jose, plus a red circle highlighting the Golden Gate Bridge. It loads Leaflet from UNPKP and uses its `L.map`, `L.tileLayer`, `L.marker`, and `L.circle` APIs with CartoDB’s light basemap tiles. Popups bound to each feature show location names, while an ES6 module exports a companion message displayed separately.

Kklumng

67% match

Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo

65% 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

65% match

Loading thumbnail…

Fork of Cheap tricks for interaction

This example shows a world map rendered with SVG paths that change color on hover. It demonstrates basic DOM manipulation and interaction using D3.js, with a natural Earth projection and zoom behavior. The code loads world atlas TopoJSON and TSV data from unpkg, converts the TopoJSON to GeoJSON using `topojson.feature`, and uses `d3.geoPath` for rendering. Zooming is handled via `d3.zoom`, and country names appear as SVG `<title>` tooltips.

MMajaha21

64% match

Loading thumbnail…

Fork of Flight Map

This visualization presents a world map with animated flight paths between continents, using a Mercator projection created with `d3.geoMercator()`. The map is rendered as SVG paths via `d3.geoPath()`, with each intercontinental link colored differently and its stroke width proportional to monthly passenger counts. A slider allows users to select a month (1–12), updating the path widths accordingly from CSV data files. Hovering over a path reveals its exact value via a tooltip, and the map itself uses `d3.json()` to load world GeoJSON data. The code relies on D3 v4 APIs including `d3.select`, `d3.transition`, and `d3.event` for interaction, with styling applied through CSS.

RRudi Poepsel Lemaitre

64% match