rlugojr / d3-tile

Compute the quadtree tiles to display in a rectangular viewport.

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

Installing

If you use NPM, npm install d3-tile. Otherwise, download the latest release. You can also load directly from d3js.org 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 256x256 quadtree tiles to display in a rectangular viewport.

var tile = d3.tile();

# tile()

Computes the set of 256x256 quadtree tiles to display given the current layout extent, scale and translate. 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 256, but without wrapping logic applied.
• ty The Y translate to be applied to the tile. This is the y value multiplied by 256.

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.