Swipe no texture

100%

Swipe no texture

✓ Published0🌍 Public

Last edited Mar 22, 2016

Created on Mar 22, 2016

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.

AI-generated description

Similar vizzes

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

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

77% match

Loading thumbnail…

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.

AAlan McConchie

67% match

Loading thumbnail…

Swipe between layers

This example presents a map of Victoria, British Columbia, with two tile layers: an OpenStreetMap basemap and a satellite imagery overlay from MapQuest. A horizontal slider, implemented as an HTML range input, controls the clipping boundary of the satellite layer, revealing the underlying map on one side. The code uses the Leaflet JavaScript library, calling `map.containerPointToLayerPoint` and applying a CSS `clip` rectangle to the overlay container, with updates triggered by the slider’s input event and the map’s move event.

TThomasG77

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

62% match

Loading thumbnail…

TileJSON.io - test

This example demonstrates a tile-based map comparison interface that layers two different tile sources over a base map, with adjustable opacity to blend between them. The visualization uses a WebGL-enabled map library to render Esri World Imagery as the base layer and Azavea’s NLCD land cover tiles as an overlaid layer, controlled by a slider. The code initializes a TileJSON 2.2.0 configuration, sets a default center and zoom level, and enables sharing the setup via a gist. It does not show any custom data processing or interaction beyond the basic tile loading and opacity control.

Aandrewbt

62% match

Loading thumbnail…

Swipe

This example uses the ArcGIS API for JavaScript 4.15 and D3 v5 to create a map view of the Kilauea volcano eruption site. The Swipe widget compares two TileLayers—shortwave infrared and near-infrared satellite imagery from the WV03 satellite—by dividing the view at a draggable position. Layer visibility is controlled through the widget, while a LayerList provides additional map layer management. The map displays a satellite basemap centered on the volcano with constrained zoom levels.

Aala-wahibi

61% match

Loading thumbnail…

Map & Globe

Two interactive views of geographic data are linked: a Leaflet map on the left and a D3 orthographic globe on the right, both rendered with Canvas and animated. Panning and zooming the map updates the globe's rotation and zoom, and vice versa. The globe uses a black-and-white TopoJSON world map, while the map shows a monochrome tile layer. A visible circular outline on the globe indicates the map's current viewport. The linking is implemented using Chiasm plugins: `layout` for box layout, `links` for data binding between the two components, `leaflet` for the map, and `globe` for the D3 Canvas globe renderer.

CCurran Kelleher

61% match