Fill array with a for loop in JavaScript

Question

I am trying to get the area of a polygon using JavaScript. To do this I need to convert the longitude and latitude points in my JSON array over to Cartesian x and y coordinates. This loop and function converts the longitude value to x for each longitude value in the array. I now need to make a new array with all of these values. At the moment it is making a new array for every value in the JSON array. Here is the result in the console:

[445.555480625]                                mapChoropleth.html:280
[1, 445.55897]                                 mapChoropleth.html:280
[2, 2: 445.62943062500005]                     mapChoropleth.html:280
[3, 3: 445.63478375]                           mapChoropleth.html:280
[4, 4: 445.64964499999996]                     mapChoropleth.html:280
[5, 5: 445.6483775]                            mapChoropleth.html:280
[6, 6: 445.61210562499997]                     mapChoropleth.html:280
[7, 7: 445.612394375]                          mapChoropleth.html:280
[8, 8: 445.6023443750001]                      mapChoropleth.html:280
[9, 9: 445.604339375]                          mapChoropleth.html:280
[10, 10: 445.571159375]                        mapChoropleth.html:280

This is how I am trying to fill the new array at the moment:

for (var i=0;i<areaData.coordinates[0].length;i++){
        var lng = areaData.coordinates[0][i][1];
        var x = XLngToPixel(lng, '#map');
            function XLngToPixel(lng,elem){

                var array = new Array();
                var containerWidth=($(elem).width());
                    lng=lng+180;
                    array[i] = $(elem).offset().left+((lng*containerWidth)/360);
                return array;
            }
            console.log(YLatToPixel(lng, '#map'));
    }

Any help would be much appreciated!

Answer 1

To create a single array containing your results, the array needs to be created outside of your loop:

var array = new Array();
for (var i=0;i<areaData.coordinates[0].length;i++){
    var lng = areaData.coordinates[0][i][1];
    var x = XLngToPixel(lng, '#map');
        function XLngToPixel(lng,elem) {
            var containerWidth=($(elem).width());
            lng=lng+180;
            array[i] = $(elem).offset().left+((lng*containerWidth)/360);
            return array[i];
        }
        console.log(YLatToPixel(lng, '#map'));
}

To create arrays of lat and lng:

var lats = new Array();
var lngs = new Array();
for (var i=0;i<areaData.coordinates[0].length;i++){
    var lng = areaData.coordinates[0][i][1];
    var x = XLngToPixel(lng, '#map');
        function XLngToPixel(lng,elem) {
            var containerWidth=($(elem).width());
            lng=lng+180;
            lngs[i] = lng;
            lats[i] = $(elem).offset().left+((lng*containerWidth)/360);

            return lats[i];
        }
        console.log(YLatToPixel(lng, '#map'));
}

Is this something like what you are looking for?