How get coordinates from polygons inside a Layer - javascript

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]);
}
}

Related

Leaflet - Creating LayerGroups Dynamically

Is it possible to create LayerGroups Dynamically? I'm developing an web map that shows the tree species that exists in the parks, an i'm trying to create a LayerGroup for each species so that with a LayerControl i can hide and show certain species, for the sake of testing, i have been creating LayerGroups like this:
l1 = new L.LayerGroup();
//...
l100 = new L.LayerGroup();
And i'm sure that there is a way to do it depending on the number of species that exists, i have tried:
for (var i = 0; i < numberOfSpecies ; i++) {
l[i] = new L.LayerGroup();
}
But this way, i cant do this:
l[0].addLayer(marker);
What is the best way to do something like this?
Yes, you can.
For example:
var layerGroups = {}
for (var i = 0; i < 3; ++i) {
layerGroups[i] = L.layerGroup().addTo(map);
}
for (var i = 0; i < 3; ++i) {
layerGroups[i].addLayer(L.marker([i,i]))
}
You can try it here : https://jsfiddle.net/mckbda9y/6/

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).

How would i iterate over a polygon?

I am reading a polygon using OpenLayers by
var features = format.read(strGML);
This is the GML string structure
<gml:featureMember xmlns:gml="http://www.opengis.net/gml xsi:schemaLocation="http://www.opengis.net/gml http://schemas.opengis.net/gml/3.1.1/profiles/gmlsfProfile/1.0.0/gmlsf.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<feature:feature xmlns:feature="http://example.com/feature">
<feature:geometry>
<gml:Polygon>
<gml:exterior>
<gml:LinearRing>
<gml:posList>591674.39 5022898.05 545682.5 4722908.1 571701.44 5322909.29 651691.25 5022904.6 591674.39 5022898.05
</gml:posList>
</gml:LinearRing>
</gml:exterior>
</gml:Polygon>
</feature:geometry>
</feature:feature>
After reading (which works) I need to iterate over each point of this polygon and read coordinates. I tried with various attempts with for...in, but can't get it to work. What would be the correct way to do this?
Anyways, I found a solution:
var newPoints = [];
var feature = features[0];
var points = feature.geometry.getVertices();
for (var i=0; i<points.length; i++) {
var lon = points[i].x;
var lat = points[i].y;
var point = new OpenLayers.Geometry.Point(lon, lat);
// do something with Points
newPoints.push(point);
}

Google Maps MarkerClusterer v3 Return Cluster of Marker

I am currently using the Google Maps MarkerClusterer v3 (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html) and have been very impressed with the functionality so far.
However, I now wish to add in an additional function to my map. When a user hovers over a list of the markers, the marker image is changed. This works great when the markers aren't clustered, but since I am also using the Clusterer, I need to be able to return the Cluster to which a specific marker belongs.
Does anyone know if this is possible? I checked the API documents, but couldn't find a method to return an array of the Clusters.
Essentially, here is a pseudo-code of what I need to do:
function changeClusterIcon(the_marker)
{
var clusters = _CLUSTERER.getClusters();
var clusters_length = clusters.length;
var marker_pos = the_marker.getPosition().toString();
for(var i = 0; i < clusters_length; i++)
{
var this_cluster = clusters[i];
var the_markers = this_cluster.markers.length;
for(var j = 0; j < the_markers; j++)
{
var this_marker = this_cluster.markers[i];
if(this_marker.getPosition().toString() == marker_pos)
{
return this_cluster;
}
}
}
return false;
}
The MarkerClusterer library does not provide a way to retrieve the clusters. But there is an enhanced version of the library, MarkerClustererPlus, which provides more capabilities. Using MarkerClustererPlusapi-doc, you may use the MarkerClusterer.getClusters() function to retrieve an Array of the Cluster class instances. Then, you may use the Cluster.getMarkers() function to retrieve an Array of the markers that are within that Cluster. And with that, you should have what you need to move forward.
Your function is almost correct, here the proper version:
function changeClusterIcon(the_marker)
{
var clusters = _CLUSTERER.getClusters();
var clusters_length = clusters.length;
var marker_pos = the_marker.getPosition().toString();
for(var i = 0; i < clusters_length; i++)
{
var this_cluster = clusters[i];
var the_markers = this_cluster.markers_.length;
for(var j = 0; j < the_markers; j++)
{
var this_marker = this_cluster.markers_[j];
if(this_marker.getPosition().toString() == marker_pos)
{
return this_cluster;
}
}
}
return false;
}
So the markers property should be called as markers_ and the second foreach uses j instead of i.

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.

Categories