Sample_Leaflet_columns

100%

Sample_Leaflet_columns

✓ Published1🌍 Public

Last edited Mar 8, 2024

Created on Mar 8, 2024

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Sample_Leaflet_columnsFly

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.

FFrancesco Di Filippo

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

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

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

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

68% match

Loading thumbnail…

leaflet example

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

EEE2dev

67% 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…

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

66% match