Raster reprojection with D3

Question

I'm trying to get my head around raster reprojection using D3's geo class and am a bit stuck. This is a copy of Mike Bostock's original code found here. When running on my localhost the map is only showing a small portion around Alaska and British Columbia but the rest is blank. When using D3's orthographic projection I get the same problem as well. Also, I've tried using a Geotif file but that didn't load. Does the image have to be in JPEG format? Thanks in advance, Tom

Answer 1

If you open the JavaScript console, you’ll see a SecurityError:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. bl.ocks.org:1
Uncaught Error: SecurityError: DOM Exception 18 

Canvas is subject to the same-origin policy. Unless the image you are loading has the Access-Control-Allow-Origin header set, as soon as you draw the image from eoimages.gsfc.nasa.gov into the canvas, the canvas becomes tainted. You are not allowed to read pixel values from a tainted canvas (because it could leak private information to a third-party).

You need to host a copy of this image on the same-domain as your page (e.g., the blue-marble.jpg used in the other example). Alternatively you could petition NASA to enable CORS on their server, but that might take a while.