100%

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

✓ Published0🌍 Public

Last edited Jun 26, 2016

Created on Jun 26, 2016

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.

AI-generated description

Working with spatial data

Example #1

Getting started 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/5c780d3df8da2ecceebf117a9ac7be38'>WWSD #1: Leaflet starter</a>

forked from <a href='http://bl.ocks.org/aleishanelson/'>aleishanelson</a>'s block: <a href='http://bl.ocks.org/aleishanelson/0fa46e4eb3366854218935f0fbc73912'>WWSD #1: Leaflet starter</a>

Similar vizzes

Loading thumbnail…

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

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.

Aaleishanelson

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

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

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

88% match

Loading thumbnail…

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

This example displays global river centerlines on an interactive Leaflet map with a dark gray stroke style. It loads GeoJSON data from a hosted world rivers dataset and renders it as vector features over OpenStreetMap tiles. The code uses Leaflet’s `L.map`, `L.tileLayer`, and `L.geoJson` APIs, with D3’s `d3.json` to fetch the external data file asynchronously. The map is centered on the world with an initial zoom level of 2.

Aannabsmylie

85% match