d3-tile

A layout for working with image-based map tiles. This can be used to create a simple slippy map, or to render standard map tiles (e.g., Mapbox, Mapzen, CloudMade, Bing) as a base layer behind a vector layer.

Raster & Vector I	Raster & Vector II	Raster & Vector III
Raster & Vector IV	Vector Tiles	Tile by Bounding Box
Cross Country Trip	Wrapping Example	Dynamic tileSize Example

Note on Migrating From v0.0.3 to v0.0.4

Previously in v0.0.3 of d3-tile, the following:

var tile = d3.tile();
tile();

Returned a two dimensional array data structure, where each the index of each inner array corresponded to z, x, and y:

[
  [273, 376, 10],
  [274, 376, 10],
  [275, 376, 10],
  // etc...
]

In the v0.0.4 of d3-tile, the data structured has become:

[
  {x: 273, y: 376, z: 10, tx: 69888, ty: 96256},
  {x: 274, y: 376, z: 10, tx: 70144, ty: 96256},
  {x: 275, y: 376, z: 10, tx: 70400, ty: 96256},
  // etc...
]

As a result, the examples listed above will need to be modified if using a version of d3-tile > v0.0.3.

Installing

If you use NPM, npm install d3-tile. Otherwise, download the latest release. You can also load directly from unpkg.com as a standalone library. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>

var tile = d3.tile();

</script>

Try d3-tile in your browser.

API Reference

# d3.tile()

Constructs a layout for determining which quadtree tiles to display in a rectangular viewport.

var tile = d3.tile();

# tile()

Computes the set of quadtree tiles to display given the current layout extent, scale, translate and tileSize. Returns an array of objects with the following properties:

• x The integer X coordinate of the tile address. Periodic if wrap is set to true.
• y The integer Y coordinate of the tile address.
• z The integer Z coordinate of the tile address (zoom level).
• tx The X translate to be applied to the tile. This is the x value multiplied by tileSize, but without wrapping logic applied.
• ty The Y translate to be applied to the tile. This is the y value multiplied by tileSize.

The returned array also has properties scale and translate that can be used to apply the correct transformation to the group of tile images. For example usage, see Raster & Vector III.

# tile.extent([extent])

If extent is specified, sets this tile layout’s extent to the specified array of points [[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 layout extent.

# tile.size([size])

If size is specified, sets this tile layout’s size to the specified two-element array of numbers [width, height] and returns this tile layout. If size is not specified, returns the current layout size. This is a convenience method equivalent to setting the extent to [[0, 0], [width, height]].

# tile.scale([scale])

If scale is specified, sets this tile layout’s scale to the specified number scale and returns this tile layout. If scale is not specified, returns the current layout scale.

# tile.translate([translate])

If translate is specified, sets this tile layout’s translate to the specified two-element array of numbers [x, y] and returns this tile layout. If translate is not specified, returns the current layout translate.

# tile.wrap([wrap])

If wrap is specified, sets this tile layout’s wrapping option to the specified boolean value and returns this tile layout. If wrap is not specified, returns the current wrapping option, which defaults to true.

wrap(true)

If wrap is true, wrapping logic will be applied to tile address x values when the layout is evaluated. This will cause map tiles to be displayed in a periodic manner, going beyond longitude values between -180 and 180.

wrap(false)

If wrap is false, wrapping logic will be disabled, limiting tiles to be within longitude values between -180 and 180.

# tile.tileSize([tileSize])

If tileSize is specified, sets this tile layout’s individual tile widths and heights 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, the most common tile size among tile service providers.