block by shawnbot e6a857780ec2fe6002f7

Leaflet + D3 Albers USA projection

Full Screen

This is an attempt to get Leaflet working with D3’s Albers USA projection.

This first stab works deceptively well: the coordinates are at least self-consistent, so centering, panning and zooming work as expected. There are some problems, though:

  1. The d3.geo.albersUsa() projection appears to return null for coordinates that don’t fall within its parallels, which Leaflet doesn’t like.
  2. Likely related, something in Leaflet’s bounding box calculation for the US GeoJSON produces NaNs and fails.
  3. The D3 projection’s scale(.25) is a stab in the dark that makes the US approximately the right size at zoom 3, but is most certainly wrong.

In general, it’s not clear whether we should be transforming D3’s projection (which, according to the docs, doesn’t support translation anyway) or Leaflet’s transformation (currently a noop).

index.html

map.js