The issue here is TopoJSON’s default quantization behavior; you need to increase the quantization precision if you want to preserve detail when zoomed in. Try -q 1e5 to increase the quantization factor from the default by 10, or -q 1e6 by 100.
The appropriate value of Q depends on the maximum effective size of your map and limited by the original precision of the geometry. Your map appears to have 11 zoom levels by powers of 2, so starting with the smallest size of 560×410 at zoom level 0, the effective size of the map at zoom level 10 is 573,440×419,840. If you want to maintain this precision, you will need Q = 1e6 (and a significantly larger TopoJSON file).
More details: the quantization factor Q determines the maximum number of differentiable points and defaults to 10,000. For best efficiency, Q should be a factor of 10 because digits are base-10 encoded in JSON. The default value is appropriate for displaying a map on a computer screen which typically has at most a resolution of 2,560×1,440 pixels, well under 10,000×10,000. (Q is an upper bound on differentiability; if points are not uniformly spaced, you may get fewer differentiable points.)
TopoJSON uses quantization to determine whether two points are coincident for the purpose of simplification. This is required because GeoJSON does not encode topology, and exact matches would be overly strict due to floating point error in GeoJSON coordinates. Also, quantization is a major factor in reducing the size of the TopoJSON encoding, especially in conjunction with the delta encoding.
Slightly related, here is an example of the Asia Lambert Conic Conformal projection used for Russia.
I guess your question is a bit confused because you mixed 2 notions which are not necessarily associated. To be clear :
- on one part, you can read and display geojson files with leaflet (geojson is a format). Following this URL, you will find basics examples : http://leafletjs.com/examples/geojson.html
- on the other part, leaflet is also able to understand and display tiles through the TileLayer object. Tiles are a way to optimize the map rendering (independently of the format).
On the given example, the map displays geojson polymaps tiles, mixing both geojson format and tiles mechanism.
According to your needs you can choose to :
- display the full geojson file (easy to implement, ok for small size files),
- create your own tiles with TileStache. Regarding geojson tiles creation a question was asked before, you may refer to the accepted answer and given links.
Best Answer
I'm not sure TopoJSON is the answer here. Under the covers leaflet-omnivore is converting the TopoJSON to GeoJSON and feeding that to Leaflet. Using d3js-topojson does exactly the same thing. In the end the polygons being rendered are the same wether sourced as TopoJSON or GeoJSON. You might need to consider simplifying your polygons. The only way you can really help the browser is to ask it to do less work. In this case that means fewer vertices so the browser has to draw fewer lines. Simplification can be done dynamically when requesting the data, but that introduces more latency. I'd suggest creating a second geometry columnn in your source table for storing simplified geometries.