Leaflet starter (new basemap)

100%

Leaflet starter (new basemap)

✓ Published0🌍 Public

Last edited Sep 15, 2017

Created on Sep 10, 2017

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.

AI-generated description

Getting started with Leaflet

Example using map tiles from Stamen

Built with blockbuilder.org

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/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/48ad757db4c4be5fee5cf046df0d94bc'>Leaflet starter (Toner basemap)</a>

mit Licensed

Similar vizzes

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

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

80% match

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…

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

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

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

75% match

Loading thumbnail…

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

NNPashaP

74% match