Using D3.js to convert map projections on canvas

Question

What I'm doing:

I have a way to upload an image onto a canvas. Then, I'm using d3's map projections to allow the selection of a different map projection to convert the image to.

The problem:

The conversion only works if the original image is an equirectangular projection. For example, if I upload an equirectangular Earth map, then tell it to convert it to a Robinson projection, it works fine. If I upload a Robinson map image, then try to convert to an equirectangular projection, all it does is fill in the transparent data with color (i.e. it doesn't work).

The code I'm using:

function updateMapProjection(selection) {
    var projection = options[selection.selectedIndex].projection;
    //projection var will be something like 'd3.geo.robinson()`
    var projCanvas = document.getElementById('projectionCanvas');
    var projCtx = projCanvas.getContext('2d');
    projCtx.clearRect(0, 0, projCanvas.width, projCanvas.height);
    var tempImage = new Image();
    if (mapFile.indexOf("imgur.com") > -1) {
        tempImage.crossOrigin = "Anonymous";
    }
    tempImage.onload = function() {
        projCtx.drawImage(tempImage,0,0, projCanvas.width, projCanvas.height);

        var dx = projCanvas.width;
        var dy = projCanvas.height;

        var sourceData = projCtx.getImageData(0, 0, dx, dy).data;
        var target = projCtx.createImageData(dx, dy);
        var targetData = target.data;

        for (var y = 0, i = -1; y < dy; ++y) {
            for (var x = 0; x < dx; ++x) {
                var p = projection.invert([x, y]);
                if (!p) {
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    targetData[++i] = 0;
                    continue;
                }
                var λ = p[0],
                    φ = p[1];
                if (λ > 180 || λ < -180 || φ > 90 || φ < -90) {
                    i += 4;
                    continue;
                }
                var q = ((90 - φ) / 180 * dy | 0) * dx + ((180 + λ) / 360 * dx | 0) << 2;
                targetData[++i] = sourceData[q];
                targetData[++i] = sourceData[++q];
                targetData[++i] = sourceData[++q];
                targetData[++i] = 255;
            }
        }
        projCtx.clearRect(0, 0, dx, dy);
        projCtx.putImageData(target, 0, 0);
    }
    tempImage.src = mapFile;
    $(".loaderWrapper").hide();
}

See this jsfiddle for a working example. Notice that instead of actually converting the map, it's just filled in the previously transparent areas with white. The converted image should look like this.

Using D3.js to convert map projections on canvas

0 Answers0