Leaflet starter

100%

Leaflet starter

✓ Published0🌍 Public

Last edited Nov 4, 2016

Created on Nov 4, 2016

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.

AI-generated description

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/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/6d632572739217d2804fd2d429b9fa23'>Leaflet starter</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/523173ee7193b78ce8307b4a79ddfeef'>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

83% match

Loading thumbnail…

Leaflet starter

This example demonstrates a basic interactive map centered on Vancouver, Canada, using the Leaflet JavaScript library. It initializes a map view with coordinates [49, -123] at zoom level 10, then adds a tile layer from Thunderforest’s “spinal-map” style. The map renders OpenStreetMap data as background tiles, with the `L.map` and `L.tileLayer` APIs handling map creation and layer management. The page is styled to fill the entire viewport, and the map div occupies full height. No additional data or interactions are included beyond the base map display.

LLiddler

82% match

Loading thumbnail…

Leaflet starter MM

This example demonstrates a minimal interactive map centered on coordinates [49, 50, 3], rendered with the Leaflet JavaScript library. It displays a Stamen Terrain tile layer with OpenStreetMap attribution, filling the entire viewport via a styled `#mapdiv` element. The code sets up the map instance using `L.map().setView()` and adds the tile layer with `L.tileLayer().addTo()`. The map supports standard pan and zoom interactions, relying on Leaflet’s core API rather than additional plugins or data sources.

CCartophile

81% match

Loading thumbnail…

Leaflet starter (new basemap)

This example displays an interactive street map centered on Bellingham, Washington, using the Leaflet JavaScript library. It sets the initial view with `L.map` and `setView`, then adds a tile layer from Esri’s World Street Map service via `L.tileLayer`. The map uses standard Leaflet v0.7.7 and renders full-screen tiles with attribution, demonstrating a minimal starter template for embedding a basemap with custom tile providers.

AAlan McConchie

80% match

Loading thumbnail…

Leaflet starter

A simple interactive map displays California’s terrain using Leaflet’s `L.map` and `L.tileLayer`, with a centered view at latitude 37 and longitude -120 at zoom level 10. The map pulls raster tiles from Stamen’s terrain service via OpenStreetMap data, styled with the Leaflet CSS. The code initializes a full-viewport map element and adds the tile layer with attribution, demonstrating a minimal Leaflet setup for embedding geographic data.

AAlan McConchie

79% match

Loading thumbnail…

Leaflet starter (UTM grid basemap)

This example displays an interactive map centered on the San Francisco Bay Area at zoom level 14, using a UTM grid basemap. The map is built with Leaflet 0.7.7 and loads tile layers from Stamen Design, which provide the UTM-projected imagery with OpenStreetMap data. The code initializes a Leaflet map instance via `L.map`, sets the view with `setView`, and adds a tile layer using `L.tileLayer` pointing to Stamen’s UTM tile server. The map fills the entire viewport through CSS, and attribution is included for both Stamen and OpenStreetMap.

AAlan McConchie

78% match

Loading thumbnail…

Leaflet starter MM2

This example displays a close-up terrain map of Paris, centered on coordinates [48.8566, 2.3522] at zoom level 15. It uses the Leaflet JavaScript library (v0.7.7) to create a map instance and add a tile layer from Stamen’s terrain tiles, with attribution to OpenStreetMap contributors. The page is styled with a fixed full-screen layout, and the map fills the entire viewport. The code loads Leaflet’s CSS and JS from a CDN and then calls `L.map` and `L.tileLayer` to render the map.

CCartophile

75% match

Loading thumbnail…

Leaflet starter with GeoJSON overlay

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.

AAlan McConchie

75% match