Leaflet styling and interaction

100%

Leaflet styling and interaction

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 4, 2016

This example demonstrates interactive mouse behaviors on a world map using Leaflet. Hovering a country highlights it with a thicker border and increased fill opacity, while clicking zooms the map to fit that country’s bounds. The map uses Stamen Toner tiles and loads country polygons from a GeoJSON file. D3 fetches the data, and Leaflet’s `L.geoJson` renders the shapes, with `onEachFeature` attaching `mouseover`, `mouseout`, and `click` handlers to apply and reset styles.

AI-generated description

Basic mouse interactivity with Leaflet

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/a3342029863da04c6f70c679ba5edae4'>WWSD #2-b: Leaflet Choropleth</a>

mit Licensed

Similar vizzes

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example shows a basic Leaflet map of world countries loaded from a GeoJSON file, with each country rendered as a white, semi-transparent polygon. It demonstrates the first step of styling spatial data with Leaflet’s `L.geoJson` and a custom style function. The map uses an OpenStreetMap tile layer and a D3.js `d3.json` request to fetch the country boundaries. The code sets the map view to a global extent, applies a simple fill color and opacity, and adds the GeoJSON layer to the map, following the Leaflet choropleth guide.

AAlan McConchie

78% match

Loading thumbnail…

D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

This example combines D3 with the Leaflet mapping library to render U.S. state boundaries as an interactive choropleth-style overlay on top of a Stamen Toner tile map. The D3 geographic projection is configured to use Leaflet’s latLngToLayerPoint method, which projects each GeoJSON feature onto the map’s current view. State outlines are drawn as SVG paths with a semi-transparent black fill that turns brown on hover. The map responds to zoom and pan events, redrawing the state boundaries to match the new view, creating a seamless integration between D3’s data-driven rendering and Leaflet’s interactive tile-based mapping. The visualization demonstrates how to combine D3’s flexible data joins and projection system with Leaflet’s robust map interactions, rendered on an HTML5 canvas with smooth zoom animations.

AAlan McConchie

76% match

Loading thumbnail…

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

JJn1532

76% match

Loading thumbnail…

Cheap Tricks for interaction!

This example shows an interactive world map where hovering over a country turns it red and zooming with the mouse repositions the map. It uses D3.js v5 with `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for rendering, and `d3.zoom` to handle pan and zoom transforms on the SVG group. Country boundaries come from the `world-atlas` TopoJSON file, with names joined from a TSV file. The visualization demonstrates fundamental DOM selection and data binding, alongside simple CSS hover styling.

Mmeihaoming

75% match

Loading thumbnail…

Tricks for interactions

This example demonstrates interactive zooming and hover highlighting on a world map rendered with SVG. The map uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data enriched with country names from a TSV file. A zoom behavior updates the map’s transform on pan and zoom events, while CSS hover states turn countries red. The code relies on D3 v5 and the TopoJSON library to load and convert geographic features.

AAjit Singh

75% match

Loading thumbnail…

Cheap Tricks for Interaction - Hover, Tooltip, Zoomin

This example shows an interactive world map with hover highlighting, tooltips, and zoom capabilities. Hovering over a country turns it red and displays its name via SVG `<title>` elements. Users can zoom and pan the map using the d3.zoom behavior, which updates the map’s transform. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and render TopoJSON country boundaries from world-atlas, with country names loaded from a TSV file.

MMinwoo Pak

75% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example uses Leaflet with D3 to render an interactive world map from GeoJSON country boundaries. The map displays population estimates using a threshold color scale, ranging from light yellow to dark green. Mouseover highlights country borders, while clicking zooms to fit the selected country’s bounds. The map uses OpenStreetMap tile layers and loads data from a remote GeoJSON file containing administrative country polygons.

Aaleishanelson

75% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example displays a world map using Leaflet, with country boundaries rendered as interactive vector layers. It initializes a Leaflet map centered on the equator and adds an OpenStreetMap tile layer as the base. The code then loads GeoJSON data containing 50-meter-resolution country outlines from a hosted GitHub source and uses Leaflet’s `L.geoJson` API to draw them onto the map. D3.js handles the asynchronous JSON fetching, while Leaflet manages the map display and interaction.

Aaleishanelson

75% match