Gist 6b515fcc2b7c6479d9c31059140eb611

100%

Gist 6b515fcc2b7c6479d9c31059140eb611

✓ Published0🌍 Public

Last edited Mar 8, 2024

Created on Mar 8, 2024

This example displays a full-screen interactive map of the contiguous United States, centered on the country’s geographic midpoint using Mapbox GL JS. The map uses a custom Mapbox style and includes a navigation control for zoom and rotation. The viewport is constrained to the bounding box spanning from the Southwest to the Northeast corners of the lower 48 states. The code sets an initial zoom level and center coordinates derived from that bounding box, but does not load or visualize any external data layers.

AI-generated description

Similar vizzes

Loading thumbnail…

h3 Hexagon Basemap

This example displays a Mapbox GL-based interactive map of the United States, centered on the continental bounds with zoom controls. It shows a blank basemap initially, but the code includes a `zoomend` event listener, suggesting the map updates dynamically on zoom changes. The map uses Mapbox GL JS v1.3.1 and a custom Mapbox style, with a bounding box defined by southwest and northeast coordinates. Navigation controls are added, and the map is rendered in a full-screen container. The data source is a Mapbox-hosted style, and the interaction is handled through Mapbox’s API.

WWill Carter

81% match

Loading thumbnail…

Leaflet - default

This example displays a full-screen interactive map of the United States, centered on the country with an initial zoom level of five. It uses the Leaflet JavaScript library to create the map view and a tile layer from Esri’s NatGeoWorldMap, providing detailed geographic and political boundaries. The map relies on the `L.map` and `L.tileLayer` APIs, with tile URLs and attribution sourced from the vizjs.org helper library. The page sets the map container to occupy the entire viewport, allowing users to pan and zoom freely across the rendered tiles.

NNPashaP

76% match

Loading thumbnail…

Zoom to Bounding Box II - test

This example demonstrates a zoomable and pannable map of U.S. states, where clicking a state smoothly transitions the view to center and scale that state’s bounding box. It shows how to combine free-form zooming and panning with programmatic animated transitions. The visualization uses D3 v3 with the `d3.geo.albersUsa` projection, `d3.geo.path` for rendering GeoJSON features, and `d3.behavior.zoom` for user interaction. Clicking a state triggers a 750-millisecond zoom transition, while a background click resets the view. State boundaries are drawn as a TopoJSON mesh, and the map data comes from a TopoJSON file of U.S. states.

IIgathi

74% match

Loading thumbnail…

Zoom to Bounding Box II

This interactive map of the United States lets users click any state to zoom smoothly to its bounding box, while also supporting free pan and zoom via mouse or touch. The visualization uses D3.js v3 with an AlbersUSA projection and TopoJSON state boundaries, rendered as SVG paths. Clicking a state triggers a 750-millisecond zoom transition, adjusting the zoom behavior’s scale and translate to fit the selected feature, while the active state highlights in orange. The zoomed function updates the group’s transform and stroke width inversely with scale, and the background rectangle resets the view when clicked.

EEvertLagerberg

74% match

Loading thumbnail…

Zoom to Bounding Box II

This example demonstrates smooth zooming and panning over a map of the United States using Albers equal-area projection. Users click individual states, triggering a 750-millisecond animated transition to a bounding box around that state, while the map remains freely navigable via mouse drag and wheel zoom. The visualization uses `d3.geo.albersUsa` for projection, `d3.behavior.zoom` for interactive and animated transformations, and `d3.geo.path` to render state boundaries and a mesh overlay from the US TopoJSON data file. Active states highlight in orange, and stroke widths adjust dynamically during zoom.

Mmbostock

73% match

Loading thumbnail…

Mapbox GL Zoom-in Population map

This zoomable choropleth map of the United States visualizes population at the state level when zoomed out, then transitions to county-level population data when zoomed in past a threshold of zoom level 4. Built with Mapbox GL JS v0.27.0, the map uses two vector layers from a Mapbox-hosted source, each with its own color stops and legend. A `zoom` event toggles the visibility of the state and county legends dynamically. The map uses a light basemap style and is centered on the contiguous US.

JJn1532

73% match

Loading thumbnail…

Gist 6414125

This example demonstrates interactive panning and zooming over a map of U.S. states and counties using SVG. It uses `d3.behavior.zoom` to control the map’s transform, while `d3.geo.path` renders the TopoJSON data from the `us.json` file. The zoom event updates the map’s translate and scale attributes, and stroke widths adjust inversely to the zoom level. Buttons also allow resetting the view or disabling the zoom event entirely.

11wheel

73% match

Loading thumbnail…

A simple map

This example shows a basic interactive map centered on a view of New York City, with the Mapbox streets basemap displayed at zoom level 9. The map is rendered in a full-screen HTML page using the Mapbox.js library, which initializes the map object via `L.mapbox.map` and sets the geographic coordinates and zoom level with `.setView`. The map uses a public access token from the author Jn1532 to load the tiles.

JJn1532

73% match