Create array of polygon coordinates from the xml

Question

I have polygon coordinates in XML file to display the polygon shapes on Google map and I just want to get them from the xml and needs to create array like below.

 var triangleCoords = [
                              new google.maps.LatLng(51.055221725218054, -3.1630325317382812),
                              new google.maps.LatLng(51.010961025187314, -3.1359100341796875),
                              new google.maps.LatLng(51.043135193868025, -3.063812255859375)

                          ];

Thanks for your reply. Here is the below code and it's not displaying polygon shapes.

var bermudaTriangle;


                        var points = "(51.055221725218054, -3.1630325317382812),(51.010961025187314, -3.1359100341796875),(51.043135193868025, -3.063812255859375)";


                        points = points.substr(1, points.length - 2).split("),(");
                        var triangleCoords = points.map(function (pointString) {
                            var latlon = pointString.split(", ");
                            return { lat: latlon[0], lon: latlon[1] };
                        });


                        // Construct the polygon
                        bermudaTriangle = new google.maps.Polygon({
                            paths: JSON.stringify(triangleCoords),
                            strokeColor: '#FF0000',
                            strokeOpacity: 0.8,
                            strokeWeight: 2,

                            fillColor: '#FF0000',
                            fillOpacity: 0.35
                        });

                        bermudaTriangle.setMap(map);

                    });

XML code get the coordinates.

   $(xml).find('Location').each(function () {


                        var points= $(this).find('Coodinates').text();

// here I will get the points successfully but needs to create the array as above (51.055221725218054, -3.1630325317382812),(51.010961025187314, -3.1359100341796875),(51.043135193868025, -3.063812255859375)

}

Ultimate Gobblement · Accepted Answer · 2013-08-26T13:42:43.123

0

If my understanding of your post is correct, this:

var points= $(this).find('Coodinates').text();

Produces the following string:

"(51.055221725218054, -3.1630325317382812),(51.010961025187314, -3.1359100341796875),(51.043135193868025, -3.063812255859375)"

Which you could convert to an array Google Maps LatLon values with a script like this:

var points = points.substr(1, points.length-2).split("),(");
var triangleCoords = points.map(function(pointString){
    var latlon = pointString.split(", ");
    return  new google.maps.LatLng(latlon[0], latlon[1]);
});

The first line strips out the brackets and splits the string into an array with each entry containing the data for one point. The array mapping function after that converts each string element to a LatLng which get added to the result array.

I put an example here, substituting the google maps LatLng with an anonymous object: http://jsfiddle.net/Jsv3x/

edited Aug 26 '13 at 13:42

answered Aug 25 '13 at 13:04

Ultimate Gobblement

1,851
16
23

Excellent. Let me try this. Thanks for your help. – user2703381 Aug 25 '13 at 18:49
There will be small issue on the above code. I have integrated and not able to create the array. coord = (51.055221725218054, -3.1630325317382812), (51.010961025187314, -3.1359100341796875), (51.043135193868025, -3.063812255859375); var points = coord.substr(1, points.length - 2).split("),("); var triangleCoords = points.map(function (pointString) { var latlon = pointString.split(", "); return new google.maps.LatLng(latlon[0], latlon[1]); }); – user2703381 Aug 26 '13 at 07:04
What error do you get? I added a link to my original post that shows an example of the data transformation - hopefully that may help. – Ultimate Gobblement Aug 26 '13 at 13:44
Thanks Ultimate Gobblement. I am still facing the issue after integrating your code. I knew am doing somewhere wrong and could you please correct it. I have placed the code in my original post. – user2703381 Aug 26 '13 at 18:13
You shouldn't be converting triangleCoords to a JSON object. There is an example of how to initialise google.maps.Polygon here: https://developers.google.com/maps/documentation/javascript/overlays#Polygons – Ultimate Gobblement Aug 27 '13 at 19:58
See my intention is to get the polygon coordinates dynamically from the xml, but I'm not able to replace the static coordinates as it's not creating the array and requires helps of coding snippets. – user2703381 Aug 28 '13 at 18:16

Create array of polygon coordinates from the xml

1 Answers1