Clipped Map Tiles

100%

Clipped Map Tiles

✓ Published0🌍 Public

Last edited Jul 20, 2019

Created on Nov 26, 2012

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.

AI-generated description

Demonstrates the d3.geo.tile plug-in used in conjunction with the d3.geo.mercator projection to clip MapBox Natural Earth II raster tiles. The outline of the United States is loaded in TopoJSON format.

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

81% match

Loading thumbnail…

Polygon Clipping II

This example shows how to clip a geographic polygon to a rectangular extent, displaying the original US nation outline in red and its clipped counterpart in black over a blue background. It uses `d3.geoIdentity` with `clipExtent` and `d3.geoProject` to precompute the clipped polygon from TopoJSON data, while `d3.geoPath` renders both the original and clipped features as SVG paths.</svg>

Mmbostock

78% match

Loading thumbnail…

Polygon Clipping I

This example shows the United States rendered twice using a red fill, with a black-and-white clipped version superimposed on top. A blue rectangle marks the clipping boundary, and a white-stroked path displays the nation clipped to that rectangular extent. The visualization uses TopoJSON data from `us-10m.v1.json` and renders with `d3.geoPath`. The clipping is performed by `d3.geoIdentity().clipExtent`, which restricts the geographic projection to pixel coordinates between [100, 100] and [860, 500], demonstrating how to constrain a polygon’s visible area in an SVG context.

Mmbostock

76% match

Loading thumbnail…

Tile by Bounding Box

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.

CCurran Kelleher

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

75% match

Loading thumbnail…

Polygon Clipping III

This example demonstrates Sutherland–Hodgman polygon clipping by clipping the exterior rings of the United States map to a convex hexagonal region. A blue hexagon serves as the clip boundary, while red paths show the original map rings and black paths display the clipped results. The implementation uses a custom `d3.polygonClip` function from the provided `d3-polygon-clip.js` file, operating on TopoJSON data loaded via `d3.json` and rendered as SVG paths.

Mmbostock

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

73% match

Loading thumbnail…

Clipped Conic Conformal

A map of the world is rendered using the Clipped Conic Conformal projection, showing landmasses in dark gray with country borders in white over a graticule of light gray lines. The visualization clips the map to the projection's extent so that only the relevant region is visible. It uses d3.geoConicConformal, d3.geoPath, and d3.geoGraticule, with vector data from the `world-50m.v1.json` TopoJSON file, and the world land and country meshes are drawn via `topojson.feature` and `topojson.mesh` into the SVG canvas.

Mmbostock

73% match