Skip to main content
100%

Firef.ly style swipe

✓ Published0🌍 Public
SStephen
Last edited Mar 22, 2016
Created on Mar 6, 2016

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.

AI-generated description

Similar vizzes

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
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
79% 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
70% 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
67% 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…

Firefly Cartography

This example shows a dark, starry map of cities with populations over 50,000, using glowing points that mimic fireflies. It loads city data from a CSV and renders the points over an inverted Stamen toner basemap with OpenLayers. The glowing effect is created with a custom Canvas sprite, a radial gradient, and a Gaussian curve in `generateSprite.js`, while React manages the map lifecycle and D3 loads the data.

CCurran Kelleher
65% match
Loading thumbnail…

Firefly Earthquakes

Firefly Earthquakes plots global earthquake epicenters as glowing, firefly-like halos on a dark, inverted OpenLayers basemap. Each point is a sprite generated with canvas radial gradients and a cubehelix color scheme, rendered via an OpenLayers vector layer with icon styles. The map view and layers are managed through React hooks, while earthquake coordinates load from a CSV via d3.csv.

JJerfaas
64% match
Loading thumbnail…

Firefly Earthquakes

A world map rendered with a light basemap displays earthquakes as glowing teal points that flicker with a firefly-like intensity. Each point is positioned by its latitude and longitude, with the glow generated by a radial gradient sprite whose opacity follows a Gaussian distribution. The visualization uses OpenLayers for map navigation and layer management, React for the interface, and D3’s `csv` loader to fetch earthquake data from a GitHub-hosted CSV file.

CCurran Kelleher
64% match