Convert latitude/longitude to pixel if 1 point is known - javascript

I have a specific task and after doing some research, I feel a little stuck and confused. Here is my point:
I have a raster image with known dimensions (800 x 800 px)
I know two point inside this image with her pixel AND geographical coordinates eg: (200,200 in pixel represent 20.5,14.57 in geo and 300,300 represent 21.4,16.01) - measured on place with GPS
I need an idea how to calculate X,Y in pixel on other point with geo-coordinates 21.71,15.01
Java Script is my environment.

Before taking care of the programming part, you have to care about transforming the WGS84 coordinate system (used by GPS) into plane grid system coordinates.
That's trigonometry, and depending on the size of the system you will be using, the precision you need, and your location (the earth is not a perfect sphere), you will have to choose a projection, or use an approximation. In France, we generally use the Lambert projection.
Then, using this new local plane grid, you can just scale it to pixels and fill your image.
edit : I found this question on stackoverflow very similar, and the accepted answer is well explained

You need to know the extent of the image. Then, when you know the image is eg. 20 degrees long, you also know that 800 pixels equal 20 degrees.

Related

how to get real measurements of two points from a 360 image in a-frame?

how to get a real measure of two points in a 360 picture of an interior using a-frame.io framework?
we tried converting the unit system of a-frame to centimeter and took two points where the dimensions were known and set it as default. and estimated that any other points we take would be relatively correct but it isn't.
any other suggestions or formula that could help?
thank you
That can't work. At least unless you have a depth-image as well. What you can easily get from a single 360° image are two angles for pan and tilt. If you add a third value, the distance from the camera (also called depth), you have so called spherical coordinates which can be converted to cartesian coordinates (x, y, z).
Without knowing that distance you can only reconstruct a ray, but not a single point. You need one more piece of information to determine where along that ray the point is (which is what you need to know for any measurements in the image).

How can I convert map into 10 mile square tiles and find out which tile lat/long falls in?

This is turning out to be more complicated than I thought... map projections, mercator coordinates, something about EPSG:4326, and so on.
What I want to do.
Given lat, long find which tile they belong to.
Given a tile find its bounds in lat,long.
Tile should be ~ 10 miles long.
I can't simply divide lat/long by some number to get 10 mile tiles as distance between longitude changes from equator to poles.
If I let go notion of 10 mile block and just roll with virtual blocks then it's fine.
Tried Looking at how google maps does it, it didn't make sense.
They basically somehow convert lat/long to 0-256, 0-256. Then take calculate some sort of value called pixel value not sure what is that, coords * 2 ^ zoom level. Then divide it by 256 to get tile number.
if you are working with spheric coordinates you should have a third parameter, the radius.
First you have to do is to mesh your map, plane, square, parametric equation, etc... within the radius you should be able to know the triple integral of your 3D plane.
otherwise take a look at this image:
I will suggest you to use sageMath, it is a python library for mathematical computation very useful to see your mathematical work.
Conclusion: Get the area of the plane, mesh it with a parameter of units ( 1 cm, 1m, 1km, etc...), see if 10 mile tiles fit in your area.

Relative position of latlon points

I'm currently involved in a project where it'd be useful to display geographical points as overlays on top of a VIDEO element (size 512x288).
The VIDEO element contains a live broadcast, and I also have a real time feed of bearing, latitude, longitude and altitude that's fed into the site as JavaScript variables.
I also have an array of POI's (Points of Interest) that's included in the site. The POI's are in the following format:
var points = [['Landmark name', 'latitude', 'longitude'], […]];
Every five seconds or so, I want to loop through the array of POI's, and check to see if any of them are within the video's current viewport - and if true, overlay them on top of the VIDEO element.
Could someone point me in the right direction as to what I should be looking at? I assume I have to map the points to a 2D plane using e.g. Mercator projection.
But I'm a bit lost when it comes to mapping the POI's relative pixel position to the video's.
Looking forward to getting some tips!
Having done this before, the most critical element is to determine the field-of-view of the camera accurately (at least to the hundredth of a degree) in either the vertical or horizontal direction. Then, use the aspect ratio (512/288 = 1.78) of the video to determine the other angle (if needed) using atan formula (do not make the common mistake of multiplying the vertical field of view by the aspect ratio to get the horizontal field of view. Field of view is angular, aspect ratio is linear). Think of it in terms of setting up a camera, for example, in OpenGL except your camera is in the real world. Instead of picking field-of-view and camera orientation, you are going to have to measure it.
You will need to know the attitude of the camera (pan/tilt or pitch/roll/yaw) in order to overlay graphics properly.
You won't need a Mercator projection. I am assuming that the field of view of the camera is relatively small (ie. 40 deg H or so) so you can usually assume the projected surface is a rectangle (technically, it is a small patch from a sphere).

Google maps - Near positions

On my website members are tagging photo position on Google maps API. Longitude and latitude are saved in database (SQL).
Does anyone know how to find tagged photos that are in radius 100km of tagged photo?
Let say that latitude and longitude are 46.03765154061627 | 14.5404052734375. Is there any kind of math formula that would check 100km radius position or any other way?
Thank you!
You could calculate the great-circle distance between two points. Luckily this is relatively easy with the haversine formula, assuming a spherical representation of the earth. You may want to read further and check out the JavaScript implementation at Calculate distance, bearing and more between Latitude/Longitude points by Chris Veness.
If you will only have a handful of photos, you can simply calculate the great-circle distance from the user submitted point to each photo point. Then simply sort the result list by the distance, and filter only the photos with a distance below the 100km threshold.
However, if you will be having many photos, you should probably consider filtering these from the database. You could use a database with geo-spatial indexing capabilities. For example MySQL, PostgreSQL and SQL Server 2008 all have geo-spatial features (either natively or via extensions), which include spatial indexing and implementations of the haversine formula.
Google Maps API includes methods for handling Latitude and Longitude coordinates. If you're dealing with a small number of coordinates it would be easy to use its GLatLng class and call the distanceFrom method.
You can also use the GLatLngBounds, which is designed to see if certain coordinates are within a defined rectangular boundary.
to define a circle of 100km radius may be a bit complex (great circle calculation, distance between two points, etc.) ... it's easier to define a "square shape" of 100km (or 200km) length with your point (M) in the middle:
without being too scientific, asuming
the earth is a sphere (I know it isn't, but ...)
the circumference at aequator is ca. 40.000km - so a 100km portion (of longitude) is aequivalent to 0,9 angle degrees
neglecting the fact that for latitude this is varying the closer you come to the poles
rounding the 0.9 to 1 degree
we can say that you want to search for pictures in an area where its picture coords (P) meet the criteria
lon(M)-1 <= lon(P) <= lon(M)+1
lat(M)-1 <= lat(P) <= lat(M)+1
(all in degrees). I would think that - for a WEB service - this is accurate enough and very easy to implement.

map geo coordinates (lat, lng) to map (x, y)

I have the geo-coordinates (latidute & longitude) of some cities and would like to get the x,y coordinates so can plot them into a map.
The map is a standart one, just like http://www.wordtravels.com/images/map/Spain/Fuerteventura_map.jpg for example.
I tried several formular I found, but none seems to really work :(. Simple javascript code or ruby would be best :)
There are many ways to approach this problem with varying degrees of precision. However, they all boil down to performing a projection that corresponds with that of your map.
If you know that your map is of the Mercator projection variety, then the lat/long coordinates can simply be treated as X/Y, scaled and translated appropriately. That is, you would find a simple ax+b and cy+d that do the job.
If your map is not Mercator-projection (as it probably isn't if it tries to get the scale consistent, as this one appears to do) then your best bet is to assume it's an "earth-tangent" projection. (This works out OK for small landmasses.) In that case, you need to first project the Lat/Long into a three-dimensional coordinate system.
z=sin(lat)
x=cos(lat)*sin(long)
y=cos(lat)*cos(long)
Positive z points to the north pole. Positive y points to 0, 0, and positive x points to lat 0 long 90 (east) and positive lat/long are north and east. Of course you must convert to radians first.
All of this assumes a spherical Earth, which isn't exactly true but it's close enough unless you're firing long-range mortar rounds.
Anyway, once you have your XYZ, then you'll need to rotate and scale for the map. To rotate around the Z axis, just subtract the base longitude before you project into three dimensions. Do this to center your map on zero-longitude for easiest math.
Once you've done this, you'll only need to rotate the globe forward until your original map is face-front. Do this with a 2-d rotation in the y-z axis. Use http://en.wikipedia.org/wiki/Coordinate_rotations_and_reflections to figure that part out.
Finally, your x,z coordinates are going to line up pretty well with your map's x,y coordinates, for an appropriate scale/translate as described earlier.
in addition to the above answers, there is the open source proj4js library which performs transforms between various map projections. it is used internally by OpenLayers for this kind of thing, and supports a number of popular projections and coordinate systems.
perhaps this will help, i've done a implementation for the US using just javascript.
demo/code: http://the55.net/_11/sketch/us_map
Use the Google Maps API, you can overlay your jpg on the map and position it correctly.
Here is an example
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-hideshow.html
and here is the api page about overlays
http://code.google.com/apis/maps/documentation/javascript/overlays.html
You won't find it easy unless you're working on a very small scale (and close to the Equator). Wikipedia's Geographic coordinate system is a good start...
The easier path could be to make use of something like web mapping and stick with your latitudes and longitudes.

Categories