These are my coordinates of Selected diagonal points, will be more when selected points are more.
1: 25.312063043186914 2: 55.30672073364258
1: 25.24096949112138 2: 55.40525436401367
1: 25.224509592006314 2: 55.3462028503418
1: 25.22513076073063 2: 55.281314849853516
1: 25.27822894908031 2: 55.25899887084961
below is my current mysql query not giving me perfect result between selected diagonal.any help??
SELECT
*
FROM
tbl_custom
WHERE latitude <= 25.312063043186914
AND latitude >= 25.224509592006314
AND longitude <= 55.40525436401367
AND longitude >= 55.25899887084961
To eliminate the points within your bounding box query but not within polygon you require to use Point in Polygon algorithm.
The easiest way to do this is to have the coordinates in arrays. These can be used to find max and min coordinates for the query and for parameters for pointInPolygon() function.
function pointInPolygon(polySides,polyX,polyY,x,y) {
var j = polySides-1 ;
oddNodes = 0;
for (i=0; i<polySides; i++) {
if (polyY[i]<y && polyY[j]>=y || polyY[j]<y && polyY[i]>=y) {
if (polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x) {
oddNodes=!oddNodes;
}
}
j=i; }
return oddNodes;
}
In your Map code using jQuery getJSON()
var polySides = 4;//number of points in polygon
//horizontal Latitude coordinates of polygon
var polyLat = new Array();
polyLat[0] = 51.5;
polyLat[1] = 51.5;
polyLat[2] = 52.5;
polyLat[3] = 53;
polyLat[4] = 51.5;//First point repeated to close polygon
//vertical Longitude coordinates of polygon
var polyLng = new Array();
polyLng[0] = 0.5;
polyLng[1] = -1.9;
polyLng[2] = -1;
polyLng[3] = 0.6;
polyLng[4] = 0.5;
//Coordinates for bounding box
var maxLat = Math.max.apply(null,polyLat);
var minLat = Math.min.apply(null,polyLat);
var maxLng = Math.max.apply(null,polyLng);
var minLng = Math.min.apply(null,polyLng);
//Using jQuery
var url = "yourFile .php";
url +="?maxLat="+maxLat +"&minLat="+minLat +"&maxLng="+maxLng +"&minLng="+minLng;
$.getJSON(url,function(data) {
$.each(data.marker,function(i,dat){
if (pointInPolygon(polySides,polyLat,polyLng,dat.lat,dat.lng)){
var latlng = new google.maps.LatLng(dat.lat,dat.lng);
addMarker(latlng,dat.name);
bounds.extend(latlng);
}
});
map.fitBounds(bounds);
});
Map obtained using Bounding Box and Point in Polygon.
Related
I have a JSON with different points. Each point has a different fields, like lon1 , lat1, lon2, lat2.
For each point I draw a line from point 1 to point 2.
By means of a for I perform this operation for each point and I draw different polylines in the map.
The problem is that when I activate or deactivate the layer, only the last drawn line is hidden, not all lines.
In the map you can see all the lines, but it seems that in the layer it overwrites and deletes the last line generated.
Code:
for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {
var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];
// array of coordinates
var mylatlngs = [
[Lat1, Lon1],
[Lat2, Lon2]
];
// draw a polyline in the map
var polilineas = L.polyline(mylatlngs, {
color: 'blue'
});
polilineas.addTo(map);
// add " polilineas" into other layer
var Velocidad2D = new L.LayerGroup();
Velocidad2D.addLayer(polilineas);
// Velocidad2D.addLayer(cabezas); Possibility to add arrow head
}
// Code to LAYER CONTROL
var gropedOverlayslehen = {
"Vel 2D": Velocidad2D
}
var layerControl = L.control.layers(basemaps, gropedOverlayslehen);
layerControl.addTo(map);
You need to put var Velocidad2D = new L.LayerGroup(); to the outside of the loop, else you overwrite it everytime.
var Velocidad2D = new L.LayerGroup();
for (var i = 0; i < json_ARAPointsPRU_0.features.length; i++) {
var Lon1 = json_ARAPointsPRU_0.features[i].properties['Lon(d.dd)'];
var Lat1 = json_ARAPointsPRU_0.features[i].properties['Lat(d.dd)'];
var Lon2 = json_ARAPointsPRU_0.features[i].properties['LON2'];
var Lat2 = json_ARAPointsPRU_0.features[i].properties['LAT2'];
// array of coordinates
var mylatlngs = [
[Lat1, Lon1],
[Lat2, Lon2]
];
// draw a polyline in the map
var polilineas = L.polyline(mylatlngs, {
color: 'blue'
});
polilineas.addTo(map);
// add " polilineas" into other layer
Velocidad2D.addLayer(polilineas);
// Velocidad2D.addLayer(cabezas); Possibility to add arrow head
}
// Code to LAYER CONTROL
var gropedOverlayslehen = {
"Vel 2D": Velocidad2D
}
var layerControl = L.control.layers(basemaps, gropedOverlayslehen);
layerControl.addTo(map);
I want to find all clipping mask layer from psd. but problem is how can we identify clipping mask layers in psd currently I'm using below code.
I tried this How to identify clipping masks in Photoshop using JavaScript
But it is not working.
for (var x = 0; x < layers.length; x++) {
var layerindex = layers[x];
doc.activeLayer = doc.artLayers[x];
var ref = new ActionReference();
ref.putEnumerated( charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );
var desc = executeActionGet(ref);
if(desc.hasKey(charIDToTypeID('GrpL'))){
alert("this is Clipping Mask Layer");
}
}
var doc = activeDocument,
layers = activeDocument.layers;
for (var x = 0; x < layers.length; x++)
{
doc.activeLayer = doc.layers[x];
var ref = new ActionReference();
ref.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
var desc = executeActionGet(ref);
if (desc.hasKey(charIDToTypeID('Grup')) && desc.getBoolean(charIDToTypeID('Grup')))
{
alert("this is Clipping Mask Layer: " + doc.activeLayer.name);
}
}
I wish to determine if a given point(latitude and longitude) is found within a drawn polygon on a Bing map or not. The polygon is drawn by the user.
This is what I already have
<script type='text/javascript'>
var map, drawingManager;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {});
//Load the DrawingTools module
Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
//Create an instance of the DrawingTools class and bind it to the map.
var tools = new Microsoft.Maps.DrawingTools(map);
//Show the drawing toolbar and enable editing on the map.
tools.showDrawingManager(function (manager) {
//Store a reference to the drawing manager as it will be useful later.
drawingManager = manager;
//Create a shortcut to the DrawingBarAction to minimize code.
var da = Microsoft.Maps.DrawingTools.DrawingBarAction;
//Limit which tools appear in the drawing toolbar.
manager.setOptions({
drawingBarActions: da.polyline | da.polygon | da.erase,
fillColor: 'rgba(255, 0, 0, 0.5)'
});
});
});
}
function IsPointInPolygon() {
var shapes = drawingManager.getPrimitives();
if (shapes && shapes.length > 0) {
for (i = 0; i < shapes.length; i++) {
var points = shapes[i].getLocations();
//Get all locations from DB
$.ajax({
url: 'http://localhost:53851/Locations/ReturnLocationsList',
type: 'POST',
dataType: 'json',
success: function (response) {
//do something with data
//alert(JSON.stringify(response.data));
arrayLocations = response.data;
//alert(arrayLocations.length);
var columns = ['IdLocation', 'Name', 'Latitude', 'Longitude'];
//Convert gotten locations to Maps.Locations in order to ease calculations
var allLocations = [];
alert("are you here ?");
for (i = 0; i < arrayLocations.length; i++) {
var coordinates = new Microsoft.Maps.Location(arrayLocations[i].Latitude, arrayLocations[i].Longitude);
allLocations.push(coordinates);
}
alert(allLocations[0]);
//Add pushpin to each location coming from DB
var pinLocation = new Microsoft.Maps.Pushpin(origin, {
color: 'blue'
});
for (i = 0; i < allLocations.length; i++) {
map.entities.push(pinLocation);
if (pointInPolygon(points, allLocations[i].Latitude, allLocations[i].Longitude)) {
alert("Point is inside polygon");
}
else {
alert("Point is not found in polygon");
}
}
function pointInPolygon(points, lat, lng) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var inside = false;
for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
var intersect =
points[i].latitude > lat != points[j].latitude > lat &&
lng <
((points[j].longitude - points[i].longitude) *
(lat - points[i].latitude)) /
(points[j].latitude - points[i].latitude) +
points[i].longitude;
if (intersect) inside = !inside;
}
return inside;
}
},
error: function (error) {
//log or alert the error
alert("There's an error !");
//alert(error);
}
});
}
//return locations;
} else {
alert("No shapes in the drawing manager.");
}
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[Bing Map key]' async defer></script>
<div class="row">
<div class="col-lg-12">
<div id="myMap" style="position:relative;width:950px;height:500px;"></div>
<input type="button" class="btn btn-primary" value="Get Shapes" onclick="IsPointInPolygon()" />
</div>
</div>
The arrayLocations are locations actually coming from the database and within these locations are at least one found in the drawn polygon area, but I definitely get the "Point not found in polygon" message, for all the locations.
I even tried adding pushpins to each of the locations coming from the database, but the pushpins won't display on the map.
I'm completely lost. Please for any help!
It appears you adapted the Polygon Search algorithm from official documentation, right? If so, their implementation is appears to be buggy and is not working as expected.
Instead i would propose to utilize the following one to determine whether the point is actually inside the polygon:
function pointInPolygon(points, lat, lng) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var inside = false;
for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
var intersect =
points[i].latitude > lat != points[j].latitude > lat &&
lng <
((points[j].longitude - points[i].longitude) *
(lat - points[i].latitude)) /
(points[j].latitude - points[i].latitude) +
points[i].longitude;
if (intersect) inside = !inside;
}
return inside;
}
Demo
var map, drawingManager, point;
function GetMap() {
map = new Microsoft.Maps.Map("#myMap", {});
point = map.getCenter();
var pin = new Microsoft.Maps.Pushpin(point, {
title: "Center point"
});
map.entities.push(pin);
//Load the DrawingTools module
Microsoft.Maps.loadModule("Microsoft.Maps.DrawingTools", function() {
//Create an instance of the DrawingTools class and bind it to the map.
var tools = new Microsoft.Maps.DrawingTools(map);
//Show the drawing toolbar and enable editing on the map.
tools.showDrawingManager(function(manager) {
//Store a reference to the drawing manager as it will be useful later.
drawingManager = manager;
//Create a shortcut to the DrawingBarAction to minimize code.
var da = Microsoft.Maps.DrawingTools.DrawingBarAction;
//Limit which tools appear in the drawing toolbar.
manager.setOptions({
drawingBarActions: da.polyline | da.polygon | da.erase,
fillColor: "rgba(255, 0, 0, 0.5)"
});
});
});
}
function getShapes() {
var shapes = drawingManager.getPrimitives();
if (shapes && shapes.length > 0) {
for (i = 0; i < shapes.length; i++) {
var points = shapes[i].getLocations();
if (pointInPolygon(points, point.latitude, point.longitude)) {
alert("Point is inside polygon");
} else {
alert("Point is not found in polygon");
}
}
//return locations;
} else {
alert("No shapes in the drawing manager.");
}
}
function pointInPolygon(points, lat, lng) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var inside = false;
for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
var intersect =
points[i].latitude > lat != points[j].latitude > lat &&
lng <
((points[j].longitude - points[i].longitude) *
(lat - points[i].latitude)) /
(points[j].latitude - points[i].latitude) +
points[i].longitude;
if (intersect) inside = !inside;
}
return inside;
}
<div id="myMap" style="position:relative;width:640px;height:320px;"></div>
<input type="button" class="btn btn-primary" value="Get Shapes" onclick="getShapes()" />
<script
type="text/javascript"
src="https://www.bing.com/api/maps/mapcontrol?key=Ap12Gwv9esg5iXgfAh5Ehlbf36MZ-O8051Sl66Zm6glGwq7PSaaKgGPpcOUEGICy&callback=GetMap"
async
defer
></script>
I want to calculate the coordinates round a circle.
i can not get it to print the coordinates and i am unsure whether it calculates them at all.
My code:
HTML:
<p>Here is the coordinates: </p>
JS:
#screen size will use screen.width and screen.height later
var sW = 1920;
var sH = 1080;
#Two arrays with the coordinates stored in them
var XcircleCoordinates;
var YcircleCoordinates;
#rows should be rows in database. I will use php to get the information, but assume 4 for now.
var rows = 4;
#radius and center of circle.
var radius = 200;
var center = [sW/2,sH/2];
function xCord(i){
XcircleCoordinates[i] = radius*Math.cos((2.0*Math.PI*i)/rows)+center[0];
return XcircleCoordinates[i];
}
function yCord(i){
YcircleCoordinates[i] = radius*Math.sin((2.0*Math.PI*i)/rows)+center[1];
return YcircleCoordinates[i];
}
for (var i = 0; i < 10; i++){
$('p').prepend(xCord(i));
}
Your code have few syntax error, below should work.
//screen size will use screen.width and screen.height later
var sW = 1920;
var sH = 1080;
//two arrays with the coordinates stored in them
var XcircleCoordinates = new Array();
var YcircleCoordinates = new Array();
//rows should be rows in database. I will use php to get the information, but assume 4 for now.
var rows = 4;
//radius and center of circle.
var radius = 200;
var center = [sW/2,sH/2];
function xCord(i){
XcircleCoordinates[i] = radius*Math.cos((2.0*Math.PI*i)/rows)+center[0];
return XcircleCoordinates[i];
}
function yCord(i){
YcircleCoordinates[i] = radius*Math.sin((2.0*Math.PI*i)/rows)+center[1];
return YcircleCoordinates[i];
}
for (var i = 0; i < 10; i++){
$('p').prepend(xCord(i));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Here is the coordinates: </p>
I want to get back the elevation values from the code on the alert pop up like i am able to get the values of lat and lng. i am trying to get the three values (lat, lng and elevation heights) in an array so that i can later display the values using OpenGL but i am stuck on this part only as everything is working fine. This is the code i am using. thanks
var bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var nw = new google.maps.LatLng (ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());
for(var i = 0 ; i<= (ne.lat() - sw.lat()); i+=0.01)
{ for(var j =0 ; j<=(ne.lng() - sw.lng());j+=0.01)
{
var tmpele; //temp variable for elevation<br/>
lt.push(sw.lat()+i);<br/>
ln.push(sw.lng()+ j);<br/>
var d = new google.maps.LatLng((sw.lat()+i),(sw.lng()+ j));
loca.push(d);
el.push(pospoint(loca));
} }
alert(lt);
alert(ln);
alert(el);
}
function disp()
{
alert(el);
}
function pospoint(loca)
{
var tmp;
var positionalRequest = {
'locations': loca
}
elevationService.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
tmp=results;
// alert('got:'+tmp);
// return tmp;
}
});
return tmp;
}
The elevation service is asynchronous. You can't return anything from it, you can only use the data (when it is available) in the callback function.