100%

Leaflet Maps Side by Side

✓ Published0🌍 Public

Last edited Aug 27, 2014

Created on Aug 25, 2014

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.

AI-generated description

Side by side leaflet (Toner comparison)

Comparison of Stamen Design's previous Toner style with new Toner data as of 2014.

Borrowed from Andrew Harvey's gist here and his live demo.

Extended with Leaflet-hash by Michael Evans

Adapted to function on bl.ocks.org by Alan McConchie

Similar vizzes

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

71% match

Loading thumbnail…

Firef.ly style swipe

Two full-screen Mapbox GL maps are stacked on top of each other, showing before-and-after Firefly-style raster styles. A swipe comparison tool, implemented with `mapboxgl.Compare`, lets viewers drag a vertical divider to reveal the other style on the same world view. Both maps share the same center and zoom, created with `new mapboxgl.Map`, using custom style URLs from `fireflyexperience`. The code loads the `mapbox-gl-compare` plugin and initializes two maps in separate `<div>` elements, each with the same geographical extent.

SStephen

70% match

Loading thumbnail…

Firef.ly style swipe

Two Mapbox GL maps display different Firef.ly styles side by side, with a draggable vertical swipe divider that lets viewers compare the visualizations. The before map uses one style URL, while the after map uses another, both centered on coordinates [0, 0] at zoom level 0. The code loads the Mapbox GL JS library and its compare plugin, then instantiates two map objects and connects them with `mapboxgl.Compare`.

Aandyrutkowski

69% match

Loading thumbnail…

Leaflet with scale bar and URL hash

This example demonstrates a Leaflet map with a scale bar and URL hash synchronization, allowing the map’s zoom level and center coordinates to be reflected in the page URL. The map uses Stamen Toner tiles with an OpenStreetMap attribution, and the scale bar is added via `L.control.scale()`. The `leaflet-hash.js` plugin updates the hash (e.g., `#2/30.0/0.0`) on map moves and restores the view from the hash on load, using the `moveend` and `hashchange` events. The code also includes a fallback interval for older browsers without hashchange support.

AAlan McConchie

69% match

Loading thumbnail…

mapbox example

Two interactive maps render 10,000 randomly generated GeoJSON points around London, comparing Mapbox GL JS and Leaflet performance. The left panel uses Mapbox GL JS with a custom map style, rendering circle layers with hover popups via `queryRenderedFeatures`. The right panel uses Leaflet 1.0.1 with Mapbox raster tiles, employing `L.circleMarker` for points and mouseover-bound popups. Both visualizations share identical fake data and styling, highlighting differences in marker rendering and interaction between the two libraries.

AAlan McConchie

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

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

67% match

Loading thumbnail…

Swipe no texture

Two map views of the world sit side by side, each styled with a different Mapbox Studio basemap so viewers can compare their visual textures. A swipe interaction, enabled by the `mapbox-gl-compare` plugin, lets a user drag a vertical divider to reveal one style over the other. Both maps use `mapbox-gl-js`, are centered at [0,0] with zoom 0, and share the same geographic content. The comparison highlights subtle differences in land color, labeling, and water rendering between the two custom styles.

SStephen

67% match