Tile Viewer

100%

✓ Published0🌍 Public

Last edited Aug 7, 2019

Created on Oct 31, 2014

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.

Mmbostock

86% match

Loading thumbnail…

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

Mmbostock

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

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

76% match

Loading thumbnail…

Raster & Vector IV

This example shows U.S. state capitals as red points on an interactive pan-and-zoom map of the United States, with raster map tiles from OpenStreetMap displayed beneath the vector data. Using d3-tile to load and position the image tiles, d3-zoom to handle pan and zoom gestures, and a d3.geoMercator projection with d3.geoPath to render the point locations from a CSV dataset, the map updates the tile layer and redraws the points on every zoom event, supporting scale levels from 2^11 to 2^14.

Mmbostock

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

74% match

Loading thumbnail…

Map Zooming

This example demonstrates a map zooming animation that alternates between San Francisco and New York, using D3’s zoom transitions. The code renders simplified U.S. state boundaries on a Canvas element via `d3.geo.path` with a custom `d3.geo.transform` for adaptive simplification. It uses `d3.behavior.zoom` to compute translations and scales, and `topojson.presimplify` to preprocess the TopoJSON data source. The continuous back-and-forth zoom is driven by chained transitions with a repeating `jump` function.

Mmbostock

73% match

Loading thumbnail…

MB zoom circles in and out

This example demonstrates a zoomable map interface where clicking a circle smoothly scales and pans the view to center on that circle, with a reset option to return to the initial state. It uses D3 v4 with SVG rendering and animation, relying on `d3.zoom` and `d3.zoomIdentity` for transform handling and `transition.call(zoom.transform)` for the animated effect. The data is a static array of circle objects with coordinates, radius, and colors, while a topojson feature layer provides the underlying map context. The background rectangle enables click-to-reset functionality, and strokes adjust dynamically based on zoom scale.

IIgathi

73% match