d3.geoTile

[curran]

The geo tile plugin would be a stellar addition in the 4.0 world.

• https://github.com/d3/d3-plugins/tree/master/geo/tile
• http://bl.ocks.org/mbostock/4132797

Related: d3/d3#486

[mbostock]

Make a d3-geo-tile module? It is pretty tiny though.

[curran]

It is tiny, and I'd love to be able to use Rollup with it. Maybe it could be included as-is in d3-geo?

It also seems like there's room for building a higher level module on top of the existing tile code for working with images. Currently each of the examples re-implements image loading logic separately, along the lines of the following (from Raster & Vector II):

var raster = svg.append("g");
...
function zoomed() {
  ...
  var image = raster
      .attr("transform", "scale(" + tiles.scale + ")translate(" + tiles.translate + ")")
    .selectAll("image")
      .data(tiles, function(d) { return d; });

  image.exit()
      .remove();

  image.enter().append("image")
      .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .attr("width", 1)
      .attr("height", 1)
      .attr("x", function(d) { return d[0]; })
      .attr("y", function(d) { return d[1]; });
}

I wonder if it might make sense to try to encapsulate this logic into an API similar to that of Leaflet. The API could take as input the raster g element and A URL pattern for tiles, and expose methods for setting the scale and translate. Examples of features that could be added into such a module include:

• Tile URL template strings like 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'. This would make it easy to use different tile providers based on declarative data, like in this Leaflet Providers Demo.
  • Caching tiles. As an example, Raster & Vector II has the behavior of re-loading the same tiles again and again, due to the randomness introduced in the URL generation. I think this issue would be solved by deterministic URL generation, leaving the actual caching up to the browser.
• Showing larger, blurry tiles in the background as smaller tiles load in the foreground. This would vastly improve the user experience when zooming. The current behavior in the examples is that the larger tiles disappear, and the user is looking at empty white space until the higher zoom level tiles are loaded. This would however introduce complexity to the code. The exiting of tiles would be contingent upon all of their "child" tiles having loaded.

The higher-level API idea may justify setting up a separate d3-geo-tile package that can start as the pure and simple tile code as it exists, and be built up over time towards the higher-level API for working with images.

[curran]

Here's an example that demonstrates d3.geoTile working on 4.0 Alpha 49: Raster & Vector 4.0.

[curran]

Related library for using D3 on map tiles (Leaflet integration) https://github.com/Telefonica/submarine Hat tip to @micahstubbs for pointing out this library.

[curran]

Perhaps one upgrade to geoTile could be to accept a zoom transform rather than setting the translate and scale separately.

[curran]

The Raster & Vector 4.0 example was actually using D3 3.X functions before for zooming. I just updated the example to actually work on the 4.0 API only (Alpha 50).

[mbostock]

Nice. A little comment. When you call zoom.transform, it will invoke your zoom event listeners. So there’s no reason to call zoomed manually here, and there’s also no reason to call d3.zoomTransform to retrieve the (unused) transform. On load, you can just say:

svg.call(zoom.transform, initialTransform); // Calls zoomed!
vector.attr("d", path(topojson.mesh(us, us.objects.counties)));

And then in zoomed, you don’t need to use d3.zoomTransform because you can use d3.event.transform to get the current transform:

console.log(d3.event.transform);

Updated fork:

http://bl.ocks.org/mbostock/e94d145a60278eada9945de3d630680e

[curran]

Oh sweet! Awesome improvements. Thanks so much for the code review.

[curran]

Embarking on creating a plugin. Is this still up to date? https://bost.ocks.org/mike/d3-plugin/

https://github.com/curran/d3-tile

[mbostock]

Yes. I’ve been keeping it up-to-date. Do you mind transferring it over the D3 organization and restoring my original LICENSE? You’ve substituted your name for mine, and it’s still my code. Thanks!

[mbostock]

(You’ll still be an owner after the transfer; it’ll make it easier for both of us to maintain it.)

[mbostock]

Also, if you could add me as an owner so that I can publish to npm, that would be nice.

npm owner add mbostock d3-tile

[curran]

• Changed name in LICENSE (oops! sorry about that)
• npm owner add mbostock d3-tile
• Attempted to transfer ownership to D3 organization. I got an error "You don’t have admin rights to d3"

• transfer ownership to D3 organization

[mbostock]

I think that error is misleading—you just need to be a member of the d3 organization to create new repositories. I’ve just set you an invite. Let me know if that works. If not, you might need to transfer for it to me first, and then I can transfer it over to d3 and add you as an owner.

[curran]

Ah ok, thanks! Will try again.

[curran]

Voila https://github.com/d3/d3-tile

[mbostock]

Nice!