We Keep Coding

How get coordinates from polygons inside a Layer

I have a LayerGroup
var mapLayer = new L.layerGroup();
This is how I add several polygons to this LayerGroup:
var buffered = turf.buffer(polyline, path_alarmweight, 'meters');
bufferedPolygon = L.geoJson(buffered, bufferedOptions).addTo(mapLayer);`
How can I get the coordinates from a single or several polygons which I added to the mapLayer?

First of all you need to get all layers from LayerGroup, use getLayers() function, in documentation. You will get layers in LayerGroup:
var arrayOfLayers = mapLayer.getLayers();
Then you can iterate over arrayOfLayers and for every layer you can get coordinates of polygon with getLatLngs() function. See the reference:
for(var i=0; i < arrayOfLayers.length; i++) {
// first get array of coordinates
var arrayOfPoints = arrayOfLayers[i].getLatLngs();
//then iterate over coordinates
for(var j=0; j < arrayOfPoints.length; j++) {
console.log(arrayOfPoints[j]);
}
}

Leaflet: How to add multiple markers onto featureGroup

I am trying to do something like : https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/blob/master/demo-group.gif
where I have multiple markers.
In the example code https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/blob/master/demo-group.html
each location has been manually added using
var trd = [63.5, 11],
mad = [40.5, -3.5],
lnd = [51.5, -0.5],
ams = [52.3, 4.75],
vlc = [39.5, -0.5];
var route = L.featureGroup([
L.marker(trd),
L.polyline([trd, ams]),
L.marker(ams),
L.polyline([ams, lnd]),
L.marker(lnd),
L.polyline([lnd, mad]),
L.marker(mad),
L.polyline([mad, vlc]),
L.marker(vlc)
]);
My question is, if I have many markers (e.g. 500 markers), how can I create the route without manually adding each marker and polyline to the L.featureGroup.
var bounds = new L.LatLngBounds();
for (var i = 0; i < mTool.length; i++) {
var loc = new L.LatLng(mTool[i].lat, mTool[i].lon);
bounds.extend(loc);
var marker = new L.Marker(loc);
map.addLayer(marker);
}
map.fitBounds(bounds);

EDIT: What you want to do is provided by the same github project of IvanSanchez. Please read demo.html instead of demo-group.html
This is easily done by looping through an array of markers, as you rightly hinted at it. The code could be as below:
var markers = [[63.5, 11],
[40.5, -3.5],
[51.5, -0.5],
[52.3, 4.75],
[39.5, -0.5]];
var route = L.featureGroup().addTo(map);
var n = markers.length;
for (var i = 0; i < n-1; i++) {
var marker = new L.Marker(markers[i]);
var line = new L.polyline([markers[i],markers[i+1]]);
route.addLayer(marker);
route.addLayer(line);
};
route.addLayer(new L.Marker(markers[n-1]));
map.fitBounds(route.getBounds());
I created a working example on gist (here).

Converting string of coordinates to lat long array for google maps api v3 returning longitude as 0

I've taken a look at all the other questions but basically, I have a long list of coordinates as a string that looks like this: "42.2723998, -81.23239 ... 42.84099, -81.3990398" which I have use javascript .split(" , "); on so that its now an array called coordinate[] of strings each holding one coordinate and then using the below code:
// create a coordinate Array
var polygonCoords = [];
// creates a new LatLng
var j = 0;
var z = j + 1;
while (z < coordinate.length) {
if ((j%2) === 0) {
var co1 = parseFloat(coordinate[z]);
//document.write(coordinate[j]);
var co2 = parseFloat(coordinate[j]);
//document.write(co2);
var newLatLng = new google.maps.LatLng(co1,co2);
polygonCoords.push(newLatLng);
} else {
var co2 = parseFloat(coordinate[z]);
var co1 = parseFloat(coordinate[j]);
var newLatLng = new google.maps.LatLng(co1,co2);
polygonCoords.push(newLatLng);
}
z++;
j++;
}
but when I print out the polygonCoords array, it always returns the longitude as 0 and I've also parsed it from a string as well using parseFloat(). Also when I explicitly return the longitude by its own, it returns the actual number. I just need it to work so that I can create an array of LatLngs that I can later use as a path for a polygon.

Ok, I've fixed it, somehow when I grabbed the longitude from the kml file, it would be in the form of 0 -81.290390... and so whenever i parsed it into float, it would recognize it as 0 instead of -81.293848. Now its done properly, and printing out the correct floats.

How do I create an array of Points?

How to create point object containing x,y and creating its array?
so that i can loop over those points, add/remove points dynamically.

var points = [{x:45, y:64}, {x:56, y:98}, {x:23, y:44}];
var len = points.length;
for(var i = 0; i < len; i++) {
alert(points[i].x + ' ' + points[i].y);
}
​
// to add more points, push an object to the array:
points.push({x:56, y:87});
Demo: http://jsfiddle.net/gjHeV/

You can create a constructor for a Point object like this:
function Point(x, y) {
this.x = x;
this.y = y;
}
Now you can create Point objects using the new keyword:
var p = new Point(4.5, 19.0);
To create an array of Point objects you simply create an array, and put Point objects in it:
var a = [ new Point(1,2), new Point(5,6), new Point(-1,14) ];
Or:
var a = [];
a.push(new Point(1,2));
a.push(new Point(5,6));
a.push(new Point(-1,14));
You use the . operator to access the properties in the Point object. Example:
alert(a[2].x);
Or:
var p = a[2];
alert(p.x + ',' + p.y);

I suggest you read about JavaScript arrays to learn all that. It is important that you know the basics.
Example for adding:
var points = [];
points.push({x:5, y:3});

Faster, more efficient:
var points = [ [45,64], [56,98], [23,44] ];
for(var i=0, len=points.length; i<len; i++){
//put your code here
console.log( 'x'+points[i][0], 'y'+points[i][1] )
}
// to add more points, push an array to the array:
points.push([100,100]);
The efficiency will only really be noticeable in a very large array of points.

Creating new markers from an array in Javascript google maps API

I am trying to add markers onto a google map to identify the states using:
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-25.641526,134.472656), 4);
map.setMapType(G_NORMAL_MAP);
map.setUIToDefault();
var states =["-35.083236,138.503909","-24.607069,144.667969","-18.229351,133.417969","-24.686952,123.574219","-32.398516,146.953125","-35.46067,149.150391","-37.020098,143.701172","-42.682435,146.733398"];
for (i = 0; i == states.length; i++) {
var point = new GLatLng(parseFloat(states[i]));
map.addOverlay(new GMarker(point));
}
}
But no markers come up when I load the map (which loads fine, properly centered and of the correct map type). What am I doing wrong here?
EDIT: I changed it to this and now it works:
var lats =[-35.083236,-24.607069,-18.229351,-24.686952,-32.398516,-35.46067,-37.020098,-42.682435];
var longs =[138.503909,144.667969,133.417969,123.574219,146.953125,149.150391,143.701172,146.733398];
for (i = 0; i <= lats.length; i++) {
var point = new GLatLng(lats[i],longs[i]);
map.addOverlay(new GMarker(point));

It looks like a typo in your for loop. Try it as follows:
for (i = 0; i < states.length; i++) {
Also note the float problem that Tomas pointed out.

You are parsing a single float value and try to use that as both latitude and longitude.
This ...
var point = new GLatLng(parseFloat("-35.083236,138.503909"));
won't parse two distinct float values and pass them to the GLatLng. One solution is to split the values in the array:
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-25.641526,134.472656), 4);
map.setMapType(G_NORMAL_MAP);
map.setUIToDefault();
var states =[-35.083236, 138.503909, -24.607069, 144.667969, ...
for (i = 0; i < states.length; i+=2) {
var point = new GLatLng(states[i], states[i+1]);
map.addOverlay(new GMarker(point));
}
}
Also note that your for loop was incorrect as Daniel pointed out.