d3-tile | quadtree tiles to display in a rectangular viewport | Map library

The issue is how you add the paths to the map:

This is similar to your other question, just it is on the forward projection & zoom rather than the inverts. (I started writing this before the update, but had to run, I'll continue with your original code).

As with the paths, you append your labels as expected:

In your example you're applying a transformation directly to the parent SVG. In the bl.ocks example they created a group g inside the svg to apply the transformation to.

In your zoom function you're using css transformations as does the bl.ocks click zoom example. Updating to css transformation functions in the clickHandler and the same scale calculations as in the example, the click scaling works correctly.

https://jsfiddle.net/bamboo/m7cn0p47/3/

The scaling works better on states or more atomic sections. Places like USA, France Spain all have remote islands or Alaska. Which can give the effect of zooming out when its actually just including the surrounding areas.

All tiles are drawn from what I can see. If you look at the DOM, there are the proper number of tiles, it is just that the first tile appears as though it never exits properly (as it should); nonetheless, it is assigned the new datum. However, as you don't use an update selection, it never updates remaining where it is first drawn. This results in either overlapping images if you scroll west, or a hidden image off screen if you scroll east.

A solution, would be to use a complete exit/enter/merge/update cycle, but that leaves the unsatisfactory outcome of not knowing why the unexpected behavior occurred in the first place:

Issue

It appears that the documentation and linked examples for d3 tile use v0.0.3; however, using 0.0.4 breaks the documentation and examples (see this issue report). Since it appears as though you are using one of the examples that the documentation links to as a template, your code will be broken when using the newest version of d3.tile.

You can see the symptom of this break by looking the tiles you are requesting, as you note, you are requesting an image at something like this for each tile:

"http://undefined.tile.openstreetmap.org/undefined/undefined/undefined.png"

Changes in v0.0.4

In v0.0.3, an array representing the x,y,z values for each tile was produced by d3.tile: [1,2,3]

In v0.0.4, an object with properties for the x,y,z values is produced by by d3.tile: {x:1,y:2,z:3}

Fix

So you can change:

You can use the npm ls --depth=0 to list the installed packages for a project.

Run it on PC_A and PC_B, then compare the versions of the packages listed on both machines to those specified in package.json. That will allow you to find any discrepancies.

You can also lock packages to exact versions by removing ^, >=, etc. from version numbers in package.json dependencies to ensure that the exact version specified in the package.json file is the one that gets installed.

Refer to the semver documentation for more info on versioning standards.