D3 + Leaflet with Albers USA Projection

1
votes

I'd like to use D3 + Leaflet with the Albers USA projection.

I used Mike Bostock's D3 + Leaflet demonstration as a starting point (found here: http://bost.ocks.org/mike/leaflet/). I'm not sure how to properly use the Albers USA projection. I've encountered a couple problems while trying to figure out how to do this:

  1. I'm not sure how to make Leaflet use the Albers USA projection. I think I might be able to do it using the Proj4Leaflet plugin, but I've been unable to find the parameters that I need to pass to it when creating the CRS that specify Albers USA. I've found some potential configuration strings on spatialreference.org, but I don't know what to specify for origin or resolutions and haven't found anything out there that explains it.
  2. D3's Albers USA projection is returning null for some points in the collection and for the bounds. I'm using the us-states.json file that Mike Bostock used. I found the explanation for that here: https://github.com/mbostock/d3/issues/1287. "[...]it will now return null for points outside the composite projection’s clip extent, since such points would not be displayed when using the projection stream". I'm not sure how to proceed from here. Should I be using a different data set?

If anyone has any advice on how to proceed, I'd greatly appreciate it!

1
javascriptd3.jsleaflet
Do you have a specific reason for using AlbersUSA? If it's working with another projection, it will be much easier to use that. - Lars Kotthoff
Yes, I need to show Alaska and Hawaii closer to the continental US. Do you know of another way to do that? I also need to be able to place markers in them, not just display them. - Jim Lahey
AFAIK Leaflet doesn't have a albersUSA projection, so I don't think you'll be able to do that particular combination. - Lars Kotthoff

1 Answers

0
votes

You may have two separate questions, so here are brief answers to both -

1.) Your source data doesn't need to be in Albers-US (which isn't strictly speaking a projection anyway - AK and HI aren't in Mexico) in order to bring it into Leaflet. Here's the US States dataset as GeoJSON, in geographic coordinates: https://gist.github.com/wboykinm/6979292

2.) Whatever the projection of the source data, Leaflet only renders in the Google Mercator projection (The projection you see in the example you started from). If you absolutely must have Albers US, it shouldn't really be a pan-able/zoomable map for reasons of context distortion. Just use Mike's D3 example for a static map: http://bl.ocks.org/mbostock/6320825

If you're determined to make a slippy map for Leaflet using Albers US, who am I to stop you? But that process would require a.) moving of feature geometry in a GIS program, and b.) fooling Tilemill into using the wrong projection as it creates tiles for you to use in Leaflet. Not a recommended course of action.

I would also be remiss if I didn't mention that you can always make your D3 graphic zoomable with d3.behavior.zoom()