Tile by Bounding Box

100%

Tile by Bounding Box

✓ Published0🌍 Public

Last edited Mar 9, 2019

Created on Mar 9, 2019

This example demonstrates how to automatically position map tiles from OpenStreetMap to fit a specified geographic bounding box, using a Mercator projection. The code calculates the necessary scale and translation to center the bounding box, adjusts the projection with `d3.geoMercator()`, and generates the appropriate tile URLs via `d3.tile()`. A vector outline of US states, rendered with `d3.geoPath()`, is overlaid on the raster tiles to show the projection's alignment.

AI-generated description

A demo of d3-tile when projecting to fit a bounding box.

Tiles copyright OpenStreetMap contributors.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/eb0c48375fcdcdc00c54a92724733d0d'>Tile by Bounding Box</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Tile by Bounding Box

This example demonstrates map tiles clipped to a geographic bounding box, showing California with a vector overlay of state boundaries. It uses the d3-tile library to load OpenStreetMap raster tiles, positioning them with an adjusted Mercator projection from d3.geoMercator. The projection scale and translation are computed from the bounding box, then snapped to the nearest power of two for crisp tile rendering. The SVG overlay draws a topojson mesh of U.S. states using d3.geoPath, while the tile images are appended as absolutely-positioned img elements.

Mmbostock

88% match

Loading thumbnail…

Raster & Vector 4.0

This example shows an interactive map of the United States with OpenStreetMap raster tiles overlaid by a vector outline of US counties. It combines zooming and panning with a Mercator projection. The code uses D3 v4.0 alpha, the d3-tile library for tile loading, and d3.geoPath with TopoJSON to render county boundaries. As the user zooms, the vector path’s stroke-width adjusts to maintain a constant screen-space width, while the raster tiles dynamically load from OpenStreetMap servers.

CCurran Kelleher

77% match

Loading thumbnail…

d3-tile wrapping

This example displays an interactive SVG world map using tiled raster images from OpenStreetMap, with tile-wrapping toggled by a checkbox. The visualization relies on the `d3-tile` library’s `tile.wrap` method to generate tile coordinates, and `d3.geoMercator` with `d3.geoPath` for the projection. An HTML form checkbox controls the `wrap` flag, triggering a `loadTiles` function that rebuilds the image layer. Each tile is fetched from the `a.b.c.tile.openstreetmap.org` subdomains. The map’s scale and translation are computed and applied via SVG group transforms.

CCurran Kelleher

76% match

Loading thumbnail…

Clipped Map Tiles

This example clips MapBox Natural Earth II raster tiles to the outline of the United States, which is loaded as TopoJSON. Using the d3.geo.tile plug-in and a d3.geo.mercator projection, it generates a grid of image tiles and applies a clipPath referencing the land outline. The stroke class adds a black outline, and the code dynamically selects tile URLs from MapBox subdomains.

Mmbostock

76% match

Loading thumbnail…

d3-tile tileSize

This example demonstrates how the `tileSize` method of the d3-tile library controls the pixel dimensions of individual map tiles. It renders a zoomable, pannable Mapbox map as SVG, with a form control to toggle between different tile sizes. The map uses `d3.tile()` to generate tile coordinates and `d3.geoMercator()` for projection, while tile images are fetched from Mapbox’s tile server. The code shows how changing `tile.tileSize` directly affects the resolution and number of tiles displayed at a given zoom level.

CCurran Kelleher

75% match

Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Mmbostock

73% match

Loading thumbnail…

Raster & Vector III

This example demonstrates pan and zoom interactions on a map of US counties, combining raster OpenStreetMap tile images with vector boundaries rendered as red outlines. The code uses d3-tile to load and position raster tiles, and d3.zoom to manage the user-driven transformations. A d3.geoPath with a Mercator projection draws a TopoJSON mesh of counties, while the zoom handler updates both the tile positions and the vector’s transform and stroke-width for efficient performance. The vector data is fetched from a GitHub-hosted TopoJSON file.

CCurran Kelleher

73% match

Loading thumbnail…

Raster & Vector II

This example presents a hybrid vector-raster map of the United States, seamlessly blending OpenStreetMap raster tiles with red vector state boundaries. The visualization handles interactive pan and zoom, reprojecting the TopoJSON geometry in real time to maintain alignment with the underlying tiles. The implementation leverages d3.geoMercator for projection, d3.tile for raster tile management, d3.zoom for interaction, and d3.geoPath for rendering vector paths. The raster layer is populated with images from OSM’s tile server, while the vector layer uses TopoJSON data from a gist source.

CCurran Kelleher

72% match