d3 / d3-tile

Compute the quadtree tiles to display in a rectangular viewport.

Home Page:https://observablehq.com/collection/@d3/d3-tile

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some tiles do not render

tuckergordon opened this issue · comments

I opened up a question on Stackoverflow about this, but figured it might be worth posting about on here in case it's an actual bug. It seems like using D3-tile with Openstreetmaps is leaving me with some tiles that never render unless zoom or position is adjusted.

Here are some relevant code blocks:

// init tiles for map rendering
var tile = d3Tile.tile()
                    .size([width, height]);

// init zoom
var zoom = d3.zoom()
                // allow for zooming in very close
                .scaleExtent([1 << 12, 1 << 24])
                .on('zoom', zoomed);
function zoomed() {
    var transform = d3.event.transform;

    // scale tiles
    var tiles = tile.scale(transform.k)
                    .translate([transform.x, transform.y])
                    ();
// update map images
    var image = g_raster.attr('transform', stringify(tiles.scale, tiles.translate))
                        .selectAll('image')
                        .data(tiles, function(d) {return d;});

    image.exit().remove();

    image.enter().append('image')
        .attr('xlink:href', function(d) {return 'http://' + 'abc' [d.y % 3] + '.tile.openstreetmap.org/' + d.z + '/' + d.x + '/' + d.y + '.png';})
        .attr('x', function(d) { return d.x * 256; })
        .attr('y', function(d) { return d.y * 256 })
        .attr('width', 256)
        .attr('height', 256);
function stringify(scale, translate) {
    var k = scale / 256,
        r = scale % 1 ? Number : Math.round;
    return 'translate(' + r(translate[0] * scale) + ',' + r(translate[1] * scale) + ') scale(' + k + ')';
}

The original post seems to have moved to https://stackoverflow.com/questions/49161123/d3-tile-not-all-tiles-load
I can't reproduce the error, though.

commented

I ran into this issue as well. I solved it using the following block as a guide:

https://bl.ocks.org/EmbraceLife/efb531e68ce46c51cb1df2ca360348bb

What I understand of it is when updating DOM elements - SVG text elements in the above block - you have to make your changes, saving the resulting selection of the new elements. Next, merge the new selection with the initial selection. Once merged, reset your positioning, then remove the initially selected elements which are no longer visible.

Closing as this seems to be resolved outside d3-tile.