d3.geom.tile

[mbostock]

I'd like to see something like pixymaps built-in to the d3.geom package. One possibility is that, given a rectangular display area (say, a DIV element accessed via selection.call) and a d3.geo.projection, d3.geom.tile could compute which image tiles should be visible in that area, fetch them via a queue, and render them to a canvas with a CSS transform.

I'm not 100% set on the d3.geo.projection dependency: I'm not sure exactly how coordinates get computed for projections other than spherical mercator, and d3.geom.tile should support arbitrary tile quadtrees rather than just maps. So perhaps there's another component needed which converts locations to coordinates, and d3.geom.tile could use that rather than the projection.

[natevw]

Still an interesting idea from all angles. I'd love to see a modular toolkit for completely bespoke map work, sort of a set "build your own slippy map" components. Some sort of middle ground between Polymaps (standard Mercator slippy map) and just hooking d3.geo.projection to d3.svg (building navigation from scratch).

I'm not sure how much use generic projections would be for d3.geom.tile. I've done a fair share of "R&D" going beyond Mercator and there are some significant challenges. Interrupted projections, flexible meridians, oblique/polar situations, etc. all end up being very difficult to capture in an approachable, "simple" API. (That said, I'd love to see it done or have opportunity to work on it. Problems worthy of attack…)

Need to spend some more time with the existing geo stuff in d3, but watching this ticket with anticipation :-)

[natevw]

One other thing, been curious working with Polymaps, and seeing it come up again here: why implement a queue on the JavaScript side, rather than simply letting the browser to handle connections as it sees fit?

[natevw]

For those of us following along at home, looks like this is progressing here: https://github.com/d3/d3-plugins/tree/master/geo/tile

[mbostock]

Need to cook up a demo next that shows how to determine the appropriate scale & translate for the d3.geo.tile given a (typically mercator) projection… overlaying a GeoJSON / TopoJSON on static map tiles.

[mbostock]

Boom!

[RandomEtc]

Exciting!

@natevw regarding the javascript queue for loading images in tile-based maps, it's because:

• image downloading and decoding, especially on mobile, can harm framerate so it's good to throttle it a little bit
• it's not always possible to cancel loading of images once you've set image.src from JS (some browsers will cancel the load but not all)
• and because of both of the above, if you're panning and zooming quickly (or animating the pan and zoom) you don't always want to request every single tile that would be visible

Basically, a client-side queue allows for fine control over canceling images and allows you to throttle/pause loading when you're animating or interacting.

Mine are always a bit of a hack but I think @mbostock has it down to about 5 lines now ;)