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

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.

Related

How do I get the lat long values from an X, Y pixel position, in a Robinson projected map, using JavaScript?

I would like to resolve pixel X,Y positions, on a Robinson projected map, to lat longs.
I have a found a JavaScript function that can resolve lat longs to pixels - https://github.com/afar/robinson_projection - but I cannot work out (or find an implementation of) pixels to lat longs.
I have found various articles about how Robinson projection works, such as https://simplemaps.com/flash/robinson-projection-in-as3-gpl/
I'm basically stuck at this point - the maths required to work out lat long from pixel X,Y is well beyond my terrible maths ability - and despite reading these things quite a few times, the logic isn't clear to me either.
I assumed the logic is in the d3-geo or d3-geo-projection source code somewhere, but couldn't find anything when searching through it.
Looking at Wikipedia, there is this:
Coordinates of points on a map are computed as follows:
..but I don't really understand how to put it into Javascript, or work out "the central meridian chosen for the map", and even then are these "coordinates" the same as pixel values?
Background info:
I'm trying to make a very lightweight, simple javascript function, that can do lat long to pixel X,Y and vice versa, for both Mercator and Robinson projections - without using d3 etc.. I want it to be less then 2kb minified and gzipped, no deps.
I've got Mercator working OK - there's lot of examples. But still struggling with Robinson projection.
The full code, if it helps, is here: https://github.com/sc0ttj/component/pull/53
(Side note, which may affect the solution I need:
For some reason I had to change latSign = getSign(lat) to latSign = 0-getSign(lat) to get the map to show the right way up, vertically - see https://github.com/sc0ttj/component/pull/53/files#diff-dc34d0b1b3b6f92f7c3e71af717cf56a5f98923980b859c128d793991690ebdcR64.)
I'm shamelessly standing on the shoulders of these two projects:
https://github.com/nunobaldaia/mercatormap
https://github.com/afar/robinson_projection

Create a polygon around each point in geojson from geojson

Creating a map similar to the one found here:
https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardiness-map.php
Have all the data needed.
Create polygons around each one without distance inbetween. No overlapping or similar.
Drawing it all by hand on geojson.io, seems impossible.
I want to create polygons around each [point] and make sure there is no distance between them.
What you're describing here is a tessellation. Depending on your data, you might opt for a regular tessellation (i.e. creating a grid of squares or hexagons, paying a modicum of attention to the units of your coordinate system) or the well-known-among-GIS-people Voronoi tessellation. Note that a Voronoi tessellation created over a regular grid of points will result in a regular grid of polygons.
There are plenty of tools for Voronoi tessellations. For javascript and GeoJSON, my tool of choice would be turf.js's voronoi module.
Here are some things to consider:
creating polygon from a point is simple enough. For example you use the point as the center of a regular polygon and devide 2PI by the number of sides and step through the points to create the polygon. But, what is the radius? That depends on the projection you are using. I happen to use OpenLayers and really like this map control. It's default projection it EPSG:3857. So, the coordinates are already in meters - so easy. But if your points are in long/lat then you have to do some math. it may be easier to transform to a different projection temporarily. An opensource library that is really nice for gis calculations if you need one is Turf.
You mentioned also about having non-overlapping polygons? Well, in this case you will have a lot of gaps if you use regular polygons. To have non-overlapping polygons with, as you put it no distance between them is an interesting constraint. Now you are dealing with different shaped polygons. And an algorithm for handling that is pretty intense. I know that MapInfo GIS has a feature for adjusting polygons to be non-overlapping. But, in a JavaScript environment with GeoJSON, you are probably talking about server side logic for this.
That map you are looking at looks like it is using Leaflet with svg overlays.

Leaflet get sub-polyline with specific start and end point

I want to get a "sub-Polyline" of a given polyline that is determined by a certain start and end point (in meters).
For example I have a polyline that is 500 meters (build using 30 coordinates (not seperated in same spaces)) and I want to color the line between meter 200 and 300 in a different color. Is it possible using Leaflet functions?
Take a look at the LineStringSelect plugin here: https://github.com/w8r/L.Control.LineStringSelect
With the demo (click in 2 different locations on the polyline):
https://w8r.github.io/L.Control.LineStringSelect
So basically you are asking "If I have a polyline and a distance value, what is the point along the polyline with the desired length-distance to the line's starting point"?
This algorithm has been covered a multitude of times, e.g.:
http://www.postgis.org/docs/ST_Line_Interpolate_Point.html, http://www.postgis.org/docs/ST_Line_Substring.html
http://turfjs.org/docs/#along
https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim
The algorithm is always the same: divide the polyline/linestring into segments, measure length of each segment, locate the point, apply direct interpolation in the segment that the point is in.
Keep in mind that geometry in a 2D cartesian plane is different than geometry in the surface of a geoid, particularly when it comes to measuring distances. Do a bit of research on GeographicLib and its methods for manipulating geodesic lines.
To your question «Is it possible using Leaflet functions?», the answer is «no, Leaflet does not implement this algorithm». The easiest way for you should be to read the source code of the mentioned Leaflet plugins in the answers, or use the along() method from the Turf library.

Convert latitude/longitude to pixel if 1 point is known

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.

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.

Categories