block by mgold c2cc7242c8f800c736c4

Zoom Buttons I

Full Screen

This example shows how to implement zoom in and zoom out buttons on a map using D3 and SVG transforms. Once the target scale and translation are computed, the map transitions over 350ms.

This is a fork Mike Bostock’s Map Pan & Zoom I; you can diff the two to see my changes. The scaling math (which is quite tricky!) is derived from Wil Linssen.

If zooming by a hard-coded factor would push the scale beyond the scale extent, it is clipped. Importantly, this clipping also affects the translation. If you scale by 1.047 but translate as if you had scaled by 1.2, bad things happen.

See also Zoom Buttons II.

index.html