This is basically more of a logical and arithmetic problem than pure programming : I have an SVG drawing in my webpage (the map of France) where I want to position a blue dot as a nested SVG. The dot is a <circle r="10.7"/>.
The blue dot represents a place for which I possess both the latitude and longitude coordinates.
I know that the center of the map has the following SVG coordinates :
<circle cx="103.5" cy="103.5"> // outer circle
The blue dot SVG tag is, therefore, positionned as such :
<svg x="92.8" y="92.8"> // blue dot svg tag
Those values are calculated like so : 103.5 - 10.7 = 92.8 that are the center of the map minus the radius of the blue dot. So it is perfectly centered as such :
I have roughly gotten the latitude and longitude coordinates of the center of France thanks to one of the multiple website that allow this operation. Those are :
Latitude : 46.561941
Longitude : 2.468983
So I know that
46.561941 = 92.8
2.468983 = 92.8
Therefore, I was wondering to get some help to calculate the correspondance between those two values that would make me able to position the blue dot wherever I need to, given new latitude and longitude coordinates.
I sense that a simple rule 3 would not suffice (I've given that a try already). Also, I need to take the 10.7 circle radius into account.
What would be the new x and y SVG positionning values for, let's say, those new coordinates ?
Latitude : 43.227284
Longitude : 3.243921
Also, the whole SVG viewport is (207, 207) and the outer SVG tag has width="90px" and height="90px".
Thanks!
Related
I'm trying to calculate the point marked in red (to create a line between the circle and the corner of the box)
It's a similar problem to this A JavaScript function that returns the x,y points of intersection between two circles?
However this is for 2 circles.
I know the position of both, circle radius etc, how do I calculate the nearest point to that corner on the circle?
const shapeTop = this.shape.getAttribute('position').clone()
//I want to apply the position here
const geo = this.button.children[0].getAttribute('geometry')
if(!geo)
return
const halfWidth = geo.width * 0.5
const halfHeight = geo.height * 0.5
const buttonEdge = {
x: buttonPos.x + (buttonPos.x > 0 ? - halfWidth : halfWidth),
y: buttonPos.y + (buttonPos.y > 0 ? - halfHeight : halfHeight),
z: buttonPos.z,
}
In three.js, you can calculate the desired point like so:
var vector = new THREE.Vector3(); // or Vector2
vector.copy( corner ).sub( center ).setLength( radius ).add( center );
three.js r.93
The core question is, how to find a point on the circle which has the shortest distance to a given rectangle.
After my thought, we can split the whole 2D-plane into two areas, one is where the rectangle can be moved to by translating with the direction of its' borders, the other is where the rectangle can't be moved in that way. The first area paints like a crossing road (the colored area), and the second area is the rest of the 2D-plane (the white area).
If the center of this circle is inside the first area, then the requested point is the intersecting point of ((the circle) and (the perpendicular line from (the center of circle) to (the nearest border of the rectangle))). Else if the center is inside the second area, then the requested point is the nearest corner of the rectangle.
Update: Another thought is to consider just these 6 points: 4 is the intersection of ((the circle) and (the line between circle center and the 4 corner of rectangle)), another 2 is the intersection of ((the circle) and (the perpendicular line from (the center of circle) to (the borders of rectangle))).
As #WestLangley's answer correctly points out, it is easy to find the nearest point of the circle, once the nearest point on the rectangle is known.
However, there are two different types of "nearest point" possibile on the rectangle: a corner or a side. The figure below illustrates both possibilities:
To determine which case you have, project the center of the circle onto each of the four lines (for example, as in this Q&A). If you do a normalized projection, a value <0 or >1 indicates that your nearest point for that segment is a corner. You are then left with the four corners and any projections that resulted in a value between 0 and 1 as candidates.
Once you have found which candidate is nearest the center of the circle, apply the accepted answer.
For example , it assumes that the black rectangle is a square.
and The gps coordinates of the red circle , which is in the square is lat 126.993611 long 37.5727
i want to know the yellow circle and blue circle coordinates displayed on the screen.
Units of length are all M(meter)
please let me know best calculate formula!
You can use geofence for this.
https://developer.android.com/training/location/geofencing.html
or you write a method which calculates your distance by coordinates.
Then you can use a rise and this method to get the new location.
I want to achieve the following:
I have some polygons projected in D3:
Each of these polygons represents a different neighborhood, with streets and buildings and topography, all of which could be nicely represented with a vector tile. I'd like that as a background for each polygon.
However, each projection is transformed and scaled to its own SVG -- they're not on a larger background.
The way I know to use vector tiles is against a large rectangular background:
How could I only project the tile inside the area of the neighborhood polygon(which is defined by the appropriate lon/lat). The background outside of each polygon should be null.
I have an application that is using bing maps.
I can get the boundary of the current show map - for example, if my map is on Canada, then I will get the boundary of Canada (A rectangle):
LocationRect bounds = map.Bounds;
bounds has - Height, Width, East(point of type double), West, North, South, Center.
How can I get the bounds * 2? (In math I think it's Area * 2).
Explanation:
I have the bounds of the map (A rectangle).
I want to enlarge this bounds to be bigger twice.
If my rectangle was 2cm, 5cm -> it will become 4cm, 10cm.
If I understand it right it is a simple question if not... :-)
You have a Black rectangle that you know the ABCD coordinates.
Calculate the distance between AD Which will be your Y and the distance between AB that will be your X.
In order to get get the EFHG coordinates of a new rectangle that you need to follow the sketch, just add or subtract from vertexes coordinates of the Black rectangle in order to get the Blue rectangle.
Of course, you need to check all the time that the coordinates of the blue rectangle do not exceed the maximum coordinates of the map.
I am trying to determine the accuracy of my object detection system so I am putting in rotated images of the original image(below) at 90 deg, 45 deg, 135 deg, 180 deg etc for the system to detect and convert the points of the detection for each rotated image with their respective frame of reference to the original image's frame of reference(in green) so that i can combine the respective detections to determine the accuracy.
Original image link:
http://i1116.photobucket.com/albums/k572/Ruihong_Zhou/37024-Tabby-cat-white-background.jpg
For example: System read in a rotated 90 deg clockwise image of the original image
http://i1116.photobucket.com/albums/k572/Ruihong_Zhou/37024-Tabby-cat-white-background2.jpg
Using the rotated image, the system detects something as indicated by the red dot. However this is with reference to the purple frame of reference. How do i convert the coordinates of the red point back to the original image's frame of reference in green for comparison?
I considered using rotation matrices for points however it seems that these matrices only work for fixed frame of reference only.