100%

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

✓ Published0🌍 Public

Last edited Jun 26, 2016

Created on Jun 26, 2016

This example shows a world map rendered with Leaflet, displaying country boundaries from a GeoJSON file of Natural Earth data. The map uses OpenStreetMap tiles as the base layer. The code loads the GeoJSON with d3.json and applies basic styling—white fill with partial opacity and thin borders—to each country polygon via Leaflet’s `L.geoJson` style option. The visualization demonstrates a minimal setup for combining D3 data loading with Leaflet’s interactive mapping capabilities.

AI-generated description

Working with spatial data

Example #2

Basic styling with Leaflet. Following this Choropleth guide.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/5c780d3df8da2ecceebf117a9ac7be38'>WWSD #1: Leaflet starter</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/208dd99b6ed6a424513524d963880700'>WWSD #1-a: Leaflet Rivers</a>

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

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/14d410e0a52909684bc020dccd08c591'>WWSD #2: Leaflet Basic Styling</a>

Similar vizzes

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

95% match

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

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

92% match

Loading thumbnail…

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

This example shows a world map with country boundaries and river centerlines rendered as dark gray vector layers over an OpenStreetMap tile base. It demonstrates how to combine Leaflet’s interactive map with D3’s `d3.json` to load GeoJSON data. The map initializes with a global view centered at [30, 0], and each dataset is added as a `L.geoJson` layer with a uniform fill and stroke weight. The code uses Leaflet 0.7.7 and D3 3.5.5, pulling from Natural Earth datasets hosted on GitHub.

Aannabsmylie

90% match

Loading thumbnail…

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

This example displays a world map using Leaflet with an OpenStreetMap tile layer, overlaid with country boundaries from a GeoJSON file. The visualization begins by initializing a Leaflet map centered on coordinates [30, 0] at zoom level 2. The code then loads geographic data from a static GeoJSON URL hosted on GitHub and adds it to the map via `L.geoJson()`. The integration uses Leaflet 0.7.7 alongside D3 3.5.5 for fetching the remote JSON data, demonstrating a straightforward workflow for combining interactive map tiles with custom spatial datasets.

KKristinHenry

90% match

Loading thumbnail…

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

A blank world map uses Leaflet to display OpenStreetMap tiles, with the view centered at coordinates [30, 0] at zoom level 2. The page loads Leaflet’s CSS and JavaScript from a CDN alongside D3, and initializes the map in a full-height div. This example serves as a minimal starter for spatial data visualization, showing how to set up a basic interactive tile layer without additional data or custom rendering.

Aaleishanelson

89% match

Loading thumbnail…

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

This example demonstrates a basic interactive map using Leaflet, with a full-screen OpenStreetMap tile layer centered on the world. The code initializes a Leaflet map with `L.map` and adds a tile layer via `L.tileLayer`, pulling raster tiles from `http://{s}.tile.osm.org`. The page loads Leaflet and D3 from CDNs, but only Leaflet’s API is used for rendering. No additional data or custom layers are present; the visualization simply shows how to set up a zoomable, pannable base map.

AAlan McConchie

87% match

Loading thumbnail…

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

A world map displays countries and populated places from GeoJSON data, with hover interactions that highlight shapes. The visualization uses d3.geoPath with a d3.geoMercator projection to render country boundaries as SVG paths, while circles represent cities positioned via the projection. Mouseover and mouseout events toggle an "active" class, turning countries pink and cities blue. The code loads two GeoJSON files from external URLs and applies d3.v4 selections with .on() event handlers for the interaction.

AAlan McConchie

85% match