Skip to main content
100%

Firef.ly style swipe

✓ Published0🌍 Public
Aandyrutkowski
Last edited Oct 7, 2018
Created on Oct 7, 2018

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`.

AI-generated description

forked from <a href='http://bl.ocks.org/TheMapSmith/'>TheMapSmith</a>'s block: <a href='http://bl.ocks.org/TheMapSmith/b9b4a46967462cdbc7f6'>Firef.ly style swipe</a>

mit Licensed

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
94% 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
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
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
68% match
Loading thumbnail…

Focusable Maps

Two interactive maps sit side-by-side, each in its own `div` element, and each can be focused independently via the `tabindex` attribute. Using the Polymaps library, each map renders a CloudMade tile layer (styles 998 and 999) served from OpenStreetMap data, with the `org.polymaps` API handling map display and `po.interact()` enabling pan and zoom. The `tabindex` on the containing `div` elements makes each map a separate focusable region, so keyboard navigation can target one map without affecting the other.

Mmbostock
66% match
Loading thumbnail…

04: Custom Map Controls

This example demonstrates a map with two toggleable layers—hexbins and crash points—overlaid on a Mapbox GL base map. The hexbins are generated from a GeoJSON dataset of NYC crashes using Turf.js to create a hex grid and count incidents per cell, colored with a Jenks natural breaks classification. Custom UI buttons let users toggle each layer on and off, with active states highlighted. The code also shows how to filter invalid geometries and style layers dynamically.

55un
63% match
Loading thumbnail…

Lots of points in Mapbox Basemap - Test

This example demonstrates a Mapbox GL map with a tilted and rotated view centered on the New York City area. It shows how the map’s basemap style can be dynamically switched via a custom control panel overlaid on the map. The page uses the Mapbox GL JS API to initialize the map with a specific style, pitch, bearing, and zoom level, while the `switchLayer` function updates the map’s style based on user input. A transparent title box with radio buttons allows selection among different style layers, and the Navigation control adds zoom and rotation controls.

WWill Carter
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