I have an array where my all polylines are stored.
var polyArrayCollection = [polyline1, polyline2, polyline3]
Now when I click on map I get LatLng values of that point.
Now I want to compare that point LatLng value with points which are in each polyline.
How can I do ?
You can get the points in a polyline using getLatLngs method of the polyline. Next, you can loop the resulting array and compare it elements with your LatLng. Something like this :
for (var pl in polyArrayCollection){
var pts = polyArrayCollection[pl].getLatLngs();
for (var pt in pts){
//compare it with your LatLng, assuming it is stored in myPt variable
if (pts[pt].equals(myPt)){
//do something if the points are equal
}
}
}
Related
I'm having trouble creating a new circle on a Leaflet map with a variable as the latlng.
I have a form that contains and input for radius and a select box that contains a few locations with options looking like this:
<option value="52.10953576, -0.498735399999987">Place Name</option>
When the save button is clicked the following code is run:
$('#drawcircle').click(function() {
var radius = document.getElementById("circleRadius").value;
var e = document.getElementById("locationcoord");
var latlng = e.options[e.selectedIndex].value;
var radiusinmeters = cr * 1609.344;
var circle = L.circle([latlng], radiusnmeters).addTo(map);
drawnItems.addLayer(circle);
});
I have done some debugging with console.log and can see that the latlng variable does contain the correct information from the select box.
However, I get
Uncaught TypeError: Cannot read property 'lng' of null
The value you get from var latlng = e.options[e.selectedIndex].value; is a string, not a pair of coordinates.
Split this string to get your coordinates in an array, cast the values to numbers, and feed that to L.circle. For example,
var radiusinmeters = cr * 1609.344;
var latlng_string = e.options[e.selectedIndex].value;
var latlng_array = latlng_string
.split(/,\s*/) // split the value
.map(function(v) { return +v; }); // cast to numbers
var circle = L.circle(latlng_array, radiusnmeters).addTo(map);
In your code, the variable latlng is a string, and L.circle accepts a LatLng Object, i.e. one of these:
L.latLng(<Number> latitude, <Number> longitude)
L.latLng(<Array> coords) // [Number, Number]
L.latLng(<Object> coords) // {lat: Number, lng: Number}
Your latlng variable is ["52.10953576, -0.498735399999987"]
You have to parse your string to get the correct values
more info in the Circle Documentation
google.maps.event.addListener(map, 'idle', function (event)
{
var ne = map.getBounds().getNorthEast();
//northeast lat and long
var sw = map.getBounds().getSouthWest();
//southwest lat and long
var x = document.getElementById('hdnControl').value;
// x contains all the markers retrived from database
// code part to filter markers withing bounds
}
var x contains all the markers and I want to place markers that are within bounds.how can i filter the markers which are within bounds?
any help will be appreciated
x contains value as
[
{"Latitude":19.2094000000,"Longitude":73.0939000000},
{"Latitude":19.2244070000,"Longitude":73.1545760000},
{"Latitude":19.1659242536,"Longitude":82.2436523438},
{"Latitude":18.3336694458,"Longitude":80.4309082031}
]
//as it has been serialized with
//dt is datatable retrived from database
JavaScriptSerializer oSerializer = new JavaScriptSerializer();
var Result = (from c in dt.AsEnumerable()
select new
{
Latitude = c.Field<Decimal>("Latitude"),
Longitude = c.Field<Decimal>("Longitude")
}).ToList();
hdnControl.Value = oSerializer.Serialize(Result);
The LatLngBounds object comes with a contains() method which takes a LatLng point and returns true if the point happens to be within the bounds, or false if outside.
Here's a sample code to point if the marker is within the bound:
function check_is_in_or_out(marker){
return map.getBounds().contains(marker.getPosition());
}
Here's a related SO ticket which discuss how to use bounds.contains(): check if map markers are within selected bounds
I would like to know how to calculate the centre of a polygon created with this code from Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/
I would like to place a marker on the centre of the polygon after it's been created.
Thanks in advance.
To calculate the center of a polygon you first need to get it's bounds, that can be done using the getBounds method of L.Polygon which it enherits from L.Polyline:
Returns the LatLngBounds of the polyline.
http://leafletjs.com/reference.html#polyline-getbounds
It returns a L.LatLngBounds object which has a getCenter method:
Returns the center point of the bounds
http://leafletjs.com/reference.html#latlngbounds-getcenter
It returns a L.LatLng object which you can use to create a L.Marker:
var polygon = new L.Polygon(coordinates).addTo(map);
var bounds = polygon.getBounds();
var center = bounds.getCenter();
var marker = new L.Marker(center).addTo(map);
Or you can shorthand it:
var polygon = new L.Polygon(coordinates).addTo(map);
var marker = new L.Marker(polygon.getBounds().getCenter()).addTo(map);
Using that in the Mapbox example would look something like this:
function showPolygonArea(e) {
featureGroup.clearLayers();
featureGroup.addLayer(e.layer);
// Here 'e.layer' holds the L.Polygon instance:
new L.Marker(e.layer.getBounds().getCenter()).addTo(featureGroup);
e.layer.bindPopup((LGeo.area(e.layer) / 1000000).toFixed(2) + ' km<sup>2</sup>');
e.layer.openPopup();
}
You can use turf library.turf.center(features) gives you a point feature at the absolute center point of all input features. where features in your case will be the polygon selected which you can get using mapboxDraw.getAll()
I have a map with various markers and i need to be able to draw a rectangle on the map and select the markers which are within the rectangle bounds.
So far i have found some great info here: How to get markers inside an area selected by mouse drag?
I have implemented the keymapzoom plugin ok. like so
$('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
boxStyle: {
border: "dashed black",
//backgroundColor: "red",
opacity: 0.5
},
paneStyle: {
backgroundColor: "gray",
opacity: 0.2
}
});
var dz = $('#dispatcher').gmap3({action:'get'}).getDragZoomObject();
google.maps.event.addListener(dz, 'dragend', function (bnds) {
alert(bnds);
});
This gives me the following
((lat,long),(lat,long)) format from the alert(bnds);
I need to know how i can now check if any markers are within this?
I already have an object that is storing the markers for another reason. like:
markers[name] = {};
markers[name].lat = lati;
markers[name].lng = longi;
which might be useful?
I don't understand how to use the GLatLngBounds and containsLatLng(latlng:GLatLng) as suggested.
Your question is tagged with the v3 version of the Maps API, so I'll assume you are using that version (which you should as v2 is deprecated). Note that some classes and methods are named different than in your question.
Bounds are represented with the LatLngBounds class. You can perform the contains method on an instance of that class to determine if a point lies within those bounds.
If you have an object with all your markers, you can loop through them and check each marker, for example:
var bounds = new google.maps.LatLngBounds(sw, ne);
for (var a in markers) {
if (bounds.contains(new google.maps.LatLng(markers[a].lat, markers[a].lng)) {
// marker is within bounds
}
}
On a side note, I would store the LatLng object in the markers object when creating them. That way you don't have to create them wherever you need.
Box/Rectangle Draw Selection in Google Maps
This was my solution..
google.maps.event.addListener(dz, 'dragend', function(e) { //important listener
for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection
if(e.contains(markers[i].position))
console.log("Marker"+ i +" - matched");
}
});
I was trying to follow this example http://code.google.com/p/gmaps-samples/source/browse/trunk/fusiontables/custom_markers.html?spec=svn2515&r=2515, to create custom markers.
I tried to change the example to use my data. The difference is that my data is already geocoded. I had trouble trying to figure why it didnt work when I changed the table id and the columns on the code.
So i printed the 'Address' on the original code and the one with my data.
The original code with the sample fusion-table, outputs the location like this
(37.4471132, -122.1602044)
Because my table is already geocoded I took away most of the function
function codeAddress(row) {
alert(row[1]);
var marker = new google.maps.Marker(
{
map : map,
position : row[1],
//this is where the magic happens!
icon : new google.maps.MarkerImage(icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}
But the alert only diplays the coordinate a little bit different
<Point><coordinates>-78.423652,-0.203057,0.0</coordinates></Point>
So yeah, that is what I think it is not working
My opinion is that position : has to be followed by a google.maps.LatLng.
It looks like the row data is from KML, you need to extract the first two numbers to create the LatLng.
Mia DiLorenzo is right, the MarkerOption position expects a LatLng object.
Look at this example, which is very similar to yours, but it uses the Coordinates field to create the marker.
The example assumes, that the data in the Coordinates field is comma-separated "lat,lng"
e.g. 47.7672,-3.2022
But if your data happens to be in KML format then you can just extract the lat/lng values. The values are in order: longitude, latitude, and altitude (see the KML reference for details about KML coordinates):
function createLatLngObject(kmlString) {
//remove XML tags from input
var xmlRegEx = /<\/?\w+>/;
var kmlValue = kmlString.replace(xmlRegEx,'');
// now kmlValue contains e.g. -78.423652,-0.203057,0.0
//extract latitude and longitude
var coordinates = kmlValue.split(",");
var lat = coordinates[1];
var lng = coordinates[0];
return new google.maps.LatLng(lat, lng);
}
function createMarker(row) {
var latlng = createLatLngObject(row[1]);
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: new google.maps.MarkerImage("http://www.google.com/images/icons/product/fusion_tables-32.png")
});
}