Leaflet with scale bar and URL hash

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

Leaflet Maps Side by Side

Two Leaflet maps are displayed side by side, comparing Stamen Design's old and new Toner tile styles. The maps are synchronized so that panning and zooming on one map updates the other, with a custom cursor indicator tracking mouse position across both views. The visualization uses OpenStreetMap data and incorporates the Leaflet-hash plugin to sync the URL hash with the map state. Animated interaction is provided by the mouse-following cursor and synchronized map movements, making it easy to spot differences in the two styles.

69% match

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.

69% match

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.

68% match

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.

Leaflet - heatmap

A grid of manually collected coordinates animates into a Leaflet heatmap, gradually revealing clusters of activity around a metro station. The example demonstrates the `addLatLng` method of the Leaflet.heat plugin, which adds points one by one every 200 milliseconds. A styled gradient from blue to red encodes intensity, while the map uses OpenStreetMap tiles. The static dataset, defined as a JavaScript array, is fed incrementally into the plugin’s heat layer, showcasing its redraw behavior without explicit calls.

11Cr18Ni9

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

Simple Leaflet Map

This simple Leaflet map displays a geographic area centered on coordinates [-41.2858, 174.78682] at zoom level 14. It uses Leaflet 1.6.0 to create a map object via `L.map` and renders OpenStreetMap tile imagery from `http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`. The map includes an attribution link to OpenStreetMap contributors, with a maximum zoom of 18. The example demonstrates basic map initialization and tile layer addition using Leaflet’s `tileLayer` API.

Dd3noob