{"id":15760453,"url":"https://github.com/d3/d3-tile","last_synced_at":"2025-10-11T12:22:22.357Z","repository":{"id":47990078,"uuid":"61729784","full_name":"d3/d3-tile","owner":"d3","description":"Compute the quadtree tiles to display in a rectangular viewport.","archived":false,"fork":false,"pushed_at":"2022-07-20T12:08:48.000Z","size":195,"stargazers_count":126,"open_issues_count":13,"forks_count":25,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-29T20:05:33.668Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://observablehq.com/collection/@d3/d3-tile","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-22T15:22:44.000Z","updated_at":"2024-10-13T20:57:54.000Z","dependencies_parsed_at":"2022-08-12T16:01:07.074Z","dependency_job_id":null,"html_url":"https://github.com/d3/d3-tile","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3%2Fd3-tile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3%2Fd3-tile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3%2Fd3-tile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d3%2Fd3-tile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d3","download_url":"https://codeload.github.com/d3/d3-tile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430966,"owners_count":20937875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-04T10:58:04.713Z","updated_at":"2025-10-11T12:22:17.315Z","avatar_url":"https://github.com/d3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# d3-tile\n\nQuadtree tiles are common for representing large, multi-resolution geometry and images, as in “slippy” maps. d3.tile provides a convenient mechanism for computing which tile coordinates should be visible in the given viewport. Unlike dedicated libraries for slippy maps, such as [Leaflet](https://leafletjs.com/), d3.tile’s tiny, low-level API is agnostic about how the tiles are presented and offers greater flexibility. d3.tile works well with [d3-geo](https://github.com/d3/d3-geo) for geographic maps and [d3-zoom](https://github.com/d3/d3-zoom) for interaction.\n\nFor examples, see the [d3-tile collection](https://observablehq.com/collection/@d3/d3-tile) on Observable.\n\n## Installing\n\nIf you use NPM, `npm install d3-tile`. Otherwise, download the [latest release](https://github.com/d3/d3-tile/releases/latest). You can also load directly as a [standalone library](https://cdn.jsdelivr.net/npm/d3-tile). ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a `d3` global is exported:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/d3-tile@1\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\nconst tile = d3.tile();\nconst tiles = tile({k: 256, x: 480, y: 250});\n\n\u003c/script\u003e\n```\n\n## API Reference\n\n\u003ca href=\"#tile\" name=\"tile\"\u003e#\u003c/a\u003e d3.\u003cb\u003etile\u003c/b\u003e() · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js), [Examples](https://observablehq.com/collection/@d3/d3-tile)\n\nConstructs a new tile layout with the default settings.\n\n```js\nconst tile = d3.tile();\n```\n\n\u003ca href=\"#_tile\" name=\"_tile\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e(…*arguments*) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js), [Examples](https://observablehq.com/collection/@d3/d3-tile)\n\nComputes the set of tiles to display given the current settings, computing the [scale](#tile_scale) and [translate](#tile_translate) by invoking the corresponding accessors with the given *arguments*. Returns an array of [*x*, *y*, *z*] arrays representing the *x*- (horizontal), *y*- (vertical) and *z*- (zoom) integer coordinates of any tiles which intersect the current viewport; these are the “visible” tiles. The returned tiles array also has tiles.*scale* and tiles.*translate* properties which together with an individual tile’s *x* and *y* determine the intended location of the tile in the viewport.\n\nFor example, the following function computes the pixel coordinates of the top-left corner of the given tile in the current viewport:\n\n```js\nfunction position(tile, tiles) {\n  const [x, y] = tile;\n  const {translate: [tx, ty], scale: k} = tiles;\n  return [(x + tx) * k, (y + ty) * k];\n}\n```\n\nAnd in use:\n\n```js\nconst tile = d3.tile();\nconst tiles = tile({k: 256, x: 480, y: 250});\nfor (const t of tiles) {\n  console.log(`tile ${t} is at ${position(t, tiles)}`);\n}\n```\n\nSee [Zoomable Tiles](https://observablehq.com/@d3/zoomable-tiles) for more information on tile coordinates.\n\n\u003ca href=\"#tile_extent\" name=\"tile_extent\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003eextent\u003c/b\u003e([\u003ci\u003eextent\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *extent* is specified, sets this tile layout’s viewport extent to the specified array [[*x0*, *y0*], [*x1*, *y1*]], where [*x0*, *y0*] is the top-left corner and [*x1*, *y1*] is the bottom-right corner, and returns this tile layout. If *extent* is not specified, returns the current viewport extent, which defaults to [[0, 0], [960, 500]].\n\n```js\nconst tile = d3.tile().extent([[100, 200], [300, 400]]);\n```\n\nSetting the viewport extent implicitly sets the [viewport size](#tile_size).\n\n\u003ca href=\"#tile_size\" name=\"tile_size\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003esize\u003c/b\u003e([\u003ci\u003esize\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *size* is specified, sets this tile layout’s viewport size to the specified array of numbers [*width*, *height*] and returns this tile layout. If *size* is not specified, returns the current viewport size, which defaults to [960, 500].\n\n```js\nconst tile = d3.tile().size([200, 200]);\n```\n\nThis is a convenience method for setting the [viewport extent](#tile_extent) to [[0, 0], [*width*, *height*]].\n\n\u003ca href=\"#tile_scale\" name=\"tile_scale\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003escale\u003c/b\u003e([\u003ci\u003escale\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *scale* is specified, sets this tile layout’s scale function and returns this tile layout. If *scale* is a function, it is invoked when the [tile layout](#_tile) is invoked, being passed the same arguments as the tile layout; this function must return a number indicating the desired width and height of the world tile [0, 0, 0].\n\n```js\nconst tile = d3.tile().scale(t =\u003e t.scale).translate(t =\u003e t.translate);\nconst tiles = tile({scale: 1024, translate: [100, 200]});\n```\n\nIf *scale* is not a function, it assumed to be a constant number, and is wrapped in a function.\n\n```js\nconst tile = d3.tile().scale(1024).translate([100, 200]);\n```\n\nIf *scale* is not specified, returns the current layout scale function, which defaults to:\n\n```js\nfunction scale(transform) {\n  return transform.k;\n}\n```\n\nThis default is compatible with a [d3-zoom transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms).\n\n\u003ca href=\"#tile_translate\" name=\"tile_translate\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003etranslate\u003c/b\u003e([\u003ci\u003etranslate\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *translate* is specified, sets this tile layout’s translate function and returns this tile layout. If *translate* is a function, it is invoked when the [tile layout](#_tile) is invoked, being passed the same arguments as the tile layout; this function must return an array of numbers [*x*, *y*] indicating the desired coordinates the center of the world tile [0, 0, 0].\n\n```js\nconst tile = d3.tile().scale(t =\u003e t.scale).translate(t =\u003e t.translate);\nconst tiles = tile({scale: 1024, translate: [100, 200]});\n```\n\nIf *translate* is not a function, it is assumed to be a constant array [*x*, *y*] and is wrapped in a function.\n\n```js\nconst tile = d3.tile().scale(1024).translate([100, 200]);\n```\n\nIf *translate* is not specified, returns the current layout translate function, which defaults to:\n\n```js\nfunction translate(transform) {\n  return [transform.x, transform.y];\n}\n```\n\nThis default is compatible with a [d3-zoom transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms).\n\n\u003ca href=\"#tile_clampX\" name=\"tile_clampX\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003eclampX\u003c/b\u003e([\u003ci\u003eclamp\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js), [Examples](https://observablehq.com/@d3/wrapped-tiles)\n\nIf *clamp* is specified, sets whether or not the visible tiles will be clamped in the *x*-dimension and returns this tile layout. If *clamp* is not specified, returns whether *x*-clamping is enabled, which defaults to true. If *x*-clamping is disabled, then the tile layout may return tiles that are outside the normal bounds 0 ≤ *x* \u003c 2^*z* of the “world” tile [0, 0, 0].\n\n```js\nconst tile = d3.tile().clampX(false);\n```\n\n See [d3.tileWrap](#tileWrap) for converting these coordinates to wrapped in-world coordinates, and [Wrapped Tiles](https://observablehq.com/@d3/wrapped-tiles) for example.\n\n\u003ca href=\"#tile_clampY\" name=\"tile_clampY\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003eclampY\u003c/b\u003e([\u003ci\u003eclamp\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *clamp* is specified, sets whether or not the visible tiles will be clamped in the *y*-dimension and returns this tile layout. If *clamp* is not specified, returns whether *y*-clamping is enabled, which defaults to true. If *y*-clamping is disabled, then the tile layout may return tiles that are outside the normal bounds 0 ≤ *y* \u003c 2^*z* of the “world” tile [0, 0, 0].\n\n```js\nconst tile = d3.tile().clampY(false);\n```\n\n See [d3.tileWrap](#tileWrap) for converting these coordinates to wrapped in-world coordinates, and [Wrapped Tiles](https://observablehq.com/@d3/wrapped-tiles) for example. See also [*tile*.clampX](#tile_clampX).\n\n\n\u003ca href=\"#tile_clamp\" name=\"tile_clamp\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003eclamp\u003c/b\u003e([\u003ci\u003eclamp\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js)\n\nIf *clamp* is specified, sets [*tile*.clampX](#tile_clampX) and [*tile*.clampY](#tile_clampY) to the specified boolean *clamp* and returns this tile layout. If *clamp* is not specified, returns true if *tile*.clampX and *tile*.clampY are both true, and false otherwise.\n\n```js\nconst tile = d3.tile().clamp(false);\n```\n\n\u003ca href=\"#tile_tileSize\" name=\"tile_tileSize\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003etileSize\u003c/b\u003e([\u003ci\u003etileSize\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js), [Examples](https://observablehq.com/@d3/tile-tilesize)\n\nIf *tileSize* is specified, sets this tile layout’s tile width and height to the specified number *tileSize* and returns this tile layout. If *tileSize* is not specified, returns the current layout tile size, which defaults to 256. 256 and 512 are the most common tile sizes.\n\n```js\nconst tile = d3.tile().tileSize(512);\n```\n\n\u003ca href=\"#tile_zoomDelta\" name=\"tile_zoomDelta\"\u003e#\u003c/a\u003e \u003ci\u003etile\u003c/i\u003e.\u003cb\u003ezoomDelta\u003c/b\u003e([\u003ci\u003ezoomDelta\u003c/i\u003e]) · [Source](https://github.com/d3/d3-tile/blob/master/src/tile.js), [Examples](https://observablehq.com/@d3/tile-zoomdelta)\n\nIf *zoomDelta* is specified, sets this tile layout’s zoom offset to the specified number *zoomDelta* and returns this tile layout. If *zoomDelta* is not specified, returns the current zoom offset, which defaults to 0. The zoom offset affects which *z*-coordinate is chosen based on the current [scale](#tile_scale); the default zoom offset of 0 will choose the *z* that is closest the displayed size; a zoom offset of -1 will use *z* - 1, giving tiles that are twice as big (lower resolution); a zoom offset of +1 will use *z* + 1, giving tiles that are twice as small (higher resolution). The latter might be appropriate for showing 256×256 tiles in a 128×128 space on a high-resolution screen.\n\n```js\nconst tile = d3.tile().zoomDelta(2);\n```\n\n\u003ca href=\"#tileWrap\" name=\"tileWrap\"\u003e#\u003c/a\u003e d3.\u003cb\u003etileWrap\u003c/b\u003e(*tile*) · [Source](https://github.com/d3/d3-tile/blob/master/src/wrap.js), [Examples](https://observablehq.com/@d3/wrapped-tiles)\n\nGiven *tile* coordinates [*x*, *y*, *z*], where *x* and *y* may be outside the “world” tile [0, 0, 0], returns the wrapped tile coordinates [*x′*, *y′*, *z*] where *j* = 2 ^ *z*, *x′* = *x* - ⌊*x* / *j*⌋ * *j* and *y′* = *y* - ⌊*y* / *j*⌋ * *j*. This function is most commonly used in conjunction with [*tile*.clampX](#tile_clampX) to allow horizontal wrapping of web Mercator tiles.\n\n```js\nd3.tileWrap([-1, 0, 1]) // [1, 0, 1]\nd3.tileWrap([-1, 0, 2]) // [3, 0, 2]\n```\n\nSee [Wrapped Tiles](https://observablehq.com/@d3/wrapped-tiles) for example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3%2Fd3-tile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd3%2Fd3-tile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd3%2Fd3-tile/lists"}