Which 3 marker creates a triangle that contains specified point? - javascript

I have a map with ~50 markers on it (Google maps api v3) and I'd like to click a random point and get which 3 markers surrounds it.
I've found this example, but it doesn't really do the thing i want alone.
Here's an image of my markers and what I'm trying to accomplish:
[IMAGE]
According to image;
When I click to red point, the script should return me the coordinates of those 3 markers connected with yellow lines.
Same for blue point and green lines.
It has to be the narrowest, smallest triangle.
I've tried finding closest 3 markers, it works for most situations but doesn't cover all. (Like when there's 3 markers in the same line with a close range.)
Any advice? Thanks in advance!
Edit
ps. I can use PHP with ajax calls if it helps.

Did it using PHP, by looping all marker coordinates.
First I checked if a point is in the triangle using this class
Then checked if its' area is smaller than the last one.
/* 3 foreach loops{ */
$pointLocation = new pointLocation();
$polygon = array($A['y'].' '.$A['x'], $B['y'].' '.$B['x'], $C['y'].' '.$C['x'], $A['y'].' '.$A['x']);
$point = $P['y'].' '.$P['x'];
if(($pointLocation->pointInPolygon($point, $polygon)=='inside' || $pointLocation->pointInPolygon($point, $polygon) == 'vertex'))
// Here I check the area using another function and save this coordinates if this is the smallest triangle. Then it continues to loop
/* } */
This is probably not the most efficient way, but unless I find another way, this'll do the job.

Related

In Leaflet how can I calculate the distance to the furthest marker from a clicked marker?

My map allows a user to draw circles around a clicked marker. To keep it in bounds of the furthest marker I need to know where that furthest marker is. How do I find the furthest marker from a clicked marker? But to complicate things I need to read the furthest marker title information to make sure it's the correct type of marker. It would have a special 3 letter code in the title to test if it's the correct marker to use. I can only check if it's there not what it says.
The simplest answer was to calculate the furthest distance in all directions at the get go. I did this by first finding a bounding box by calculating the:
$minLat = $rowCorners[minLat]-0.25;
$maxLat = $rowCorners[maxLat]+0.25;
$minLng = $rowCorners[minLng]+0.25;
$maxLng = $rowCorners[maxLng]-0.25;
In this case I gave myself a little room to work in, exact distance were not that critical. By using that information it was easy to draw the circles needed by the users.

Drawn line - picking up random point on it

I am using JavaScript to draw on HTML Canvas.
I have a polygon represented as array of [x,y] coordinates. In my situation (game focused on expanding player's area) I want periodically expand the area represented by the polygon. I have two random possibilities - expand one of existing vertexes, or split one of the line.
My method works kinda good, but I have problem with splitting the lines. I can pick random line (or to be more precise two random neighboring polygons) and I can insert new polygon into my array of polygons. That works fine.
To find where the new polygon shall be, I tried to use midpoint formula. In my code it goes like this:
var x_mid = Math.round((globalMap[v1][0] + globalMap[v2][0]) / 2);
var y_mid = Math.round((globalMap[v1][1] + globalMap[v2][1]) / 2);
But I found it is not always picking up the correct spot on the line. Sometimes it ends up inside my polygon, which is a problem, because for expansion, my script is looking for free (not colored) pixels around and it finds none here.
I blame the round() function, but can't figure out how to make sure, I end up on the line that is actually drawn on canvas?
It doesn't have to be exact middle of the line, if someone knows other technique, it just needs to be somewhere on the edge, so it can expand later without flaws. Thanks a lot!

Setting click priority on google maps polygon array

I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!
The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).

How to add square tiles to leaflet map with hovering effect?

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.
This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},

Google Maps: Checking if a polyline passes thru a circle

I would like to ask how do I check if a certain Polyline passes thru a Circle? In the image below, the red polyline passes inside the green circle. I know it is possible to determine if a marker is within a circle but i don't know how to do it or if it is feasible for polylines.
I still have 8 reputation points so I can't post images, here's the link to the image: http://i.stack.imgur.com/0fzXu.png
Thanks in advance! :)
I'd probably do the following:
Get bound of circle.
Filter the polyline coordinates and find the points that fall into that bound.
Calculate distance between circle center and each of those points. (circle/bound center can be easily obtained by some built-in method)
If any distance < circle radius, it gives you result.
Only problem with this algo is, if your polyline goes through the circle but your list of popyline coordinates does not contain one that falls in the bound. I haven't come up with a solution for that yet :)

Categories

Resources