block by zjonsson 1263239

SVG slippy map using Viewbox with D3

Full Screen

(hold shift when scrolling the mouse-wheel for now)

This is a simple slippy map that keeps the absolute coordinates of all tiles/location static, but moves the SVG viewbox as the user pans and zooms around. We can then draw SVG objects directly on the coordinate system and do not have to update location when the viewBox is changed.

There are two components to this, both standalone.

1) svg_interact: provides pan and zoom to any svg-object by moving the viewBox 2) svg_map: a tiler that watches the viewbox location and size at regular intervals and fetches the appropriate cloudmake tiles to cover the viewbox with some extra padding. This tiler uses the .data() method to enter and exit tiles. Another alternative might be to keep an array and push old items out as new come in. We need to discard old tiles as number of visible tiles affects performance. The graphic contents are however automatically cached by the browser.

I would really appreciate helpful hints on making this better and more d3 compatible (i.e. using pv.behavior to get better mouse functions)

index.html

svg_interact.js

svg_map.js