map - 正距円筒図法のオフセット

Question

three.js を使用して、いくつかの都市の位置をプロットする必要がある単純な 3D マップを作成しています。

これまでの進行状況を確認できますhttp://e.harrynorthover.com/map/、ピンの上にマウスを移動して、それがどの都市であると想定されているかを確認してください。

私は正距円筒図法の方法を使用していますが、私が抱えている問題は、都市を正しく配置できないように見えることです。

プロジェクションの私のコードは次のとおりです。

RunGenerator.Utils.prototype.equirectangularPosition = function(lat, lng)
{
    var newX = ((lng + 180) * (RunGenerator.Utils.MAP_WIDTH  / 360));
    var newY = (((lat * -1) + 90) * (RunGenerator.Utils.MAP_HEIGHT  / 180));

    return {
        x:newX,
        y:newY
    };
}

3D マップを作成するためのコードは次のとおりです。

RunGenerator.prototype.createMap = function()
{
    var that = this;

    var mapGeometry,
        mapTexture,
        mapMaterial,
        mapMaterial2,
        mapTexture2,
        mat;

    mapGeometry             = new THREE.PlaneGeometry( 1024, 794, 10, 10 );
    mat                     = new THREE.Matrix4();

    mapMaterial             = new THREE.MeshLambertMaterial( { map:this.mapTexture[0], transparent: true, color:0xFFFFFF } );
    mapMaterial2            = new THREE.MeshLambertMaterial( { map:this.mapTexture[1], transparent: true, color:0xFFFFFF, wireframe:false, opacity:.5 } );

    this.map                = new THREE.Mesh( mapGeometry, mapMaterial );
    var map2                = new THREE.Mesh( mapGeometry, mapMaterial2 );

    map2.position.z         = -5;

    //this.map.position.x     = -30;
    //this.map.position.y     = 80;
    this.map.position.z     = 0;

    this.map.scale.x        = this.map.scale.y = this.map.scale.z = 1;

    //mat.makeTranslation( 0, 100, 0 );
    //mapGeometry.applyMatrix( mat );

    //this.map.rotation.z     = 90;

    this.map.add(map2);
    this.scene.add(this.map);
};

私のデータ:

{
    name: 'Southampton',
    waypoint: {
        latitude: '50.9039500',
        longitude: '-1.4042800'
    }
},
{
    name: 'LA',
    waypoint: {
        latitude: '34.0522300',
        longitude: '-118.2436800'
    }
}

投影が機能しない理由がわかりません。どんなアイデアでも大歓迎です！