Leaflet starter with GeoJSON overlay

100%

Leaflet starter with GeoJSON overlay

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 4, 2016

A Leaflet map of the world with a GeoJSON overlay of populated places, loaded via D3. The map uses Stamen Toner tiles and points are plotted using Leaflet's `L.geoJson` layer. The example shows how to combine Leaflet with an external library to load geographic data, with the GeoJSON file containing point features for cities around the world.

AI-generated description

Notice here how we have to add another library (D3 in this case, but could be jQuery) to load the external GeoJSON file.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/44f910feb7babb73e07a9da12f8a1055'>WWSD #1-b: Leaflet starter</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Leaflet starter (Toner basemap)

This example shows a simple interactive world map with a Stamen Toner basemap, centered at coordinates [30, 0] with an initial zoom level of 2. The map is built using the Leaflet JavaScript library, which loads tile layers from Stamen’s tile server. The code initializes a Leaflet map object, sets its view, and adds a tile layer with the specified URL pattern and attribution. The page uses Leaflet’s CSS and JavaScript files from a CDN, with the map container styled to fill the entire viewport.

AAlan McConchie

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

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

76% match

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

75% match

Loading thumbnail…

Leaflet starter

This example displays a Leaflet map centered on the Pacific Northwest, using Stamen Toner tiles from OpenStreetMap data. It initializes the map with `L.map` and `setView`, adds a scale control via `L.control.scale`, and enables URL hash synchronization with `L.Hash`. The page loads Leaflet v0.7.7 from a CDN and styles the map container to fill the viewport. No interactive markers or additional layers are present; the visualization simply demonstrates a basic Leaflet setup with a zoomable, pannable tile layer.

Aandi-g

75% match

Loading thumbnail…

Leaflet styling and interaction

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.

AAlan McConchie

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

74% match

Loading thumbnail…

Basic D3 map (live mods) d3v4

This example shows a world map rendered with a stereographic projection, overlaid with populated places as scaled circles. The map uses D3 v4’s `d3.geoStereographic` projection and `d3.geoPath` to draw country outlines from GeoJSON world data. City points come from a second GeoJSON dataset, with circle radius proportional to `pop_max` and color indicating megacity status (dark green) versus other populated places (salmon). The code loads both datasets via `d3.json` and appends SVG circles with opacity for visual clarity.

AAlan McConchie

74% match