Convert long lat to pixel x y on a given picture

Question

I have a city map of Moscow  We modified a Google Maps image with some artistic elements  but the relation between GPS coordinates and pixels remains the same   Problem  How do I convert GPS coordinates from various data points we have into pixel coordinates in the image   Ideally I can do this in Javascript  but PHP would be OK     I know that on small scales  for example on city scales  it to make simply enough  it is necessary to learn what geographic coordinates has one of picture corners  then to learn  price  of one pixel in geographic coordinates on a picture on axes OX and OY separately    But on the big scales  country scale   price  of one pixel will be not a constant  and will vary strongly enough and the method described above cannot be applied   How to solve a problem on country scales     Update   I do not use API Google Maps  I have only  geographic coordinates of the object  they are from google maps   I still have at my site a simple picture    gif  in which I must draw a point corresponding geographic coordinates

User · Accepted Answer

The key to all of this is understanding map projections. As others have pointed out, the cause of the distortion is the fact that the spherical (or more accurately ellipsoidal) earth is projected onto a plane.

In order to achieve your goal, you first must know two things about your data:

The projection your maps are in. If they are purely derived from Google Maps, then chances are they are using a spherical Mercator projection.
The geographic coordinate system your latitude/longitude coordinates are using. This can vary, because there are different ways of locating lat/longs on the globe. The most common GCS, used in most web-mapping applications and for GPS's, is WGS84.

I'm assuming your data is in these coordinate systems.

The spherical Mercator projection defines a coordinate pair in meters, for the surface of the earth. This means, for every lat/long coordinate there is a matching meter/meter coordinate. This enables you to do the conversion using the following procedure:

Find the WGS84 lat/long of the corners of the image.
Convert the WGS lat/longs to the spherical Mercator projection. There conversion tools out there, my favorite is to use the cs2cs tool that is part of the PROJ4 project.
You can safely do a simple linear transform to convert between points on the image, and points on the earth in the spherical Mercator projection, and back again.

In order to go from a WGS84 point to a pixel on the image, the procedure is now:

Project lat/lon to spherical Mercator. This can be done using the proj4js library.
Transform spherical Mercator coordinate into image pixel coordinate using the linear relationship discovered above.

You can use the proj4js library like this:

// include the library
<script src="lib/proj4js-combined.js"></script>  //adjust the path for your server
                                                 //or else use the compressed version
// creating source and destination Proj4js objects
// once initialized, these may be re-used as often as needed
var source = new Proj4js.Proj('EPSG:4326');    //source coordinates will be in Longitude/Latitude, WGS84
var dest = new Proj4js.Proj('EPSG:3785');     //destination coordinates in meters, global spherical mercators projection, see http://spatialreference.org/ref/epsg/3785/


// transforming point coordinates
var p = new Proj4js.Point(-76.0,45.0);   //any object will do as long as it has 'x' and 'y' properties
Proj4js.transform(source, dest, p);      //do the transformation.  x and y are modified in place

//p.x and p.y are now EPSG:3785 in meters

User · Answer

The translation you are addressing has to do with Map Projection  which is how the spherical surface of our world is translated into a 2 dimensional rendering   There are multiple ways  projections  to render the world on a 2-D surface   If your maps are using just a specific projection  Mercator being popular   you should be able to find the equations  some sample code  and or some library  e g  one Mercator solution - Convert Lat Longs to X Y Co-ordinates   If that doesn t do it  I m sure you can find other samples -  https   stackoverflow com search q mercator   If your images aren t map s  using a Mercator projection  you ll need to determine what projection it does use to find the right translation equations   If you are trying to support multiple map projections  you want to support many different maps that use different projections   then you definitely want to use a library like PROJ 4  but again I m not sure what you ll find for Javascript or PHP

User · Answer

You may have a look at code that used on gheat  it s ported from js to python

User · Answer

So you want to take latitude longitude coordinates and find out the pixel coordinates on your image of that location   The main GMap2 class provides transformation to from a pixel on the displayed map and a lat long coordinate   Gmap2 fromLatLngToContainerPixel latlng    For example   var gmap2   new GMap2 document getElementById  map canvas     var geocoder   new GClientGeocoder     geocoder getLatLng   1600 Pennsylvania Avenue NW Washington  D C  20500       function  latlng             var pixel coords   gmap2 fromLatLngToContainerPixel latlng            window alert   The White House is at pixel coordinates                   pixel coodrs x          pixel coords y      on the                  map image shown on this page                 So assuming that your map image is a screen grab of the Google Map display  then this will give you the correct pixel coordinate on that image of a lat long coordinate   Things are trickier if you re grabbing tile images and stitching them together yourself since the area of the complete tile set will lie outside the area of the displayed map   In this case  you ll need to use the left and top values of the top-left image tile as an offset from the coordinates that fromLatLngToContainerPixel latlng GLatLng  gives you  subtracting the left coordinate from the x coordinate and top from the y coordinate  So if the top-left image is positioned at  -50  -122   left  top   and fromLatLngToContainerPixel   tells you a lat long is at pixel coordinate  150  320   then on the image stitched together from tiles  the true position of the coordinate is at  150 -  -50   320 -  -122   which is  200  442    It s also possible that a similar GMap2 coordinate translation function   GMap2 fromLatLngToDivPixel latlng GLatLng    will give you the correct lat long to pixel translation for the stitched-tiles case - I ve not tested this  nor is it 100  clear from the API docs   See here for more  http   code google com apis maps documentation reference html GMap2 Methods Coordinate-Transformations

User · Answer

One of the important things to take into account is the  zoom  level of your projection  for Google Maps in particular    As Google explains it       At zoom level 1  the map consists of 4 256x256 pixels tiles  resulting   in a pixel space from 512x512  At zoom level 19  each x and y pixel on   the map can be referenced using a value between 0 and 256   2 19     See https   developers google com maps documentation javascript maptypes hl en MapCoordinates   To factor in the  zoom  value  I recommend the simple and effective deltaLonPerDeltaX and deltaLatPerDeltaY functions below  While x-pixels and longitudes are strictly proportional  this is not the case for y-pixels and latitudes  for which the formula requires the initial latitude      Adapted from   http   blog cppse nl x-y-to-lat-lon-for-google-maps   window geo          glOffset  Math pow 2 28     268435456      glRadius   Math pow 2 28    Math PI      a  Math pow 2 28       b  85445659 4471      c  0 017453292519943      d  0 0000006705522537      e  Math E    2 7182818284590452353602875      p  Math PI   180       lonToX  function lon            return Math round this glOffset   this glRadius   lon   this p               XtoLon  function x            return -180   this d   x              latToY  function lat            return Math round this glOffset - this glRadius                             Math log  1   Math sin lat   this p                                1 - Math sin lat   this p      2               YtoLat  function y            return Math asin Math pow this e  2 this a this b - 2 y this b                                       Math pow this e   2 this a this b - 2 y this b   1  -                                  1  Math pow this e   2 this a this b - 2 y this b   1                              this c              deltaLonPerDeltaX  function deltaX  zoom               2  7 zoom  pixels  lt --- gt  180 degrees         return deltaX   180   Math pow 2  7 zoom               deltaLatPerDeltaY  function deltaY  zoom  startLat               more complex because of the curvature  we calculte it by difference         var startY   this latToY startLat               endY   startY   deltaY   Math pow 2  28-7-zoom               endLat   this YtoLat endY            return   endLat - startLat         deltaLat

User · Answer

You will have to implement the Google Maps API projection in your language  I have the C  source code for this    public class GoogleMapsAPIProjection       private readonly double PixelTileSize   256d      private readonly double DegreesToRadiansRatio   180d   Math PI      private readonly double RadiansToDegreesRatio   Math PI   180d      private readonly PointF PixelGlobeCenter      private readonly double XPixelsToDegreesRatio      private readonly double YPixelsToRadiansRatio       public GoogleMapsAPIProjection double zoomLevel                var pixelGlobeSize   this PixelTileSize   Math Pow 2d  zoomLevel           this XPixelsToDegreesRatio   pixelGlobeSize   360d          this YPixelsToRadiansRatio   pixelGlobeSize    2d   Math PI           var halfPixelGlobeSize   Convert ToSingle pixelGlobeSize   2d           this PixelGlobeCenter   new PointF              halfPixelGlobeSize  halfPixelGlobeSize              public PointF FromCoordinatesToPixel PointF coordinates                var x   Math Round this PixelGlobeCenter X                coordinates X   this XPixelsToDegreesRatio            var f   Math Min              Math Max                   Math Sin coordinates Y   RadiansToDegreesRatio                   -0 9999d               0 9999d           var y   Math Round this PixelGlobeCenter Y    5d                Math Log  1d   f     1d - f     -this YPixelsToRadiansRatio           return new PointF Convert ToSingle x   Convert ToSingle y               public PointF FromPixelToCoordinates PointF pixel                var longitude    pixel X - this PixelGlobeCenter X                this XPixelsToDegreesRatio          var latitude    2   Math Atan Math Exp               pixel Y - this PixelGlobeCenter Y    -this YPixelsToRadiansRatio               - Math PI   2    DegreesToRadiansRatio          return new PointF              Convert ToSingle latitude               Convert ToSingle longitude              Source   http   code google com p geographical-dot-net source browse trunk GeographicalDotNet GeographicalDotNet Projection GoogleMapsAPIProjection cs

User · Answer

You need formulas to convert latitude and longitude to rectangular coordinates  There are a great number to choose from and each will distort the map in a different way  Wolfram MathWorld has a good collection   http   mathworld wolfram com MapProjection html  Follow the  See Also  links

User · Answer

If each pixel is assumed to be of the same area then the following article about converting distances to longitude latitude co-ordinates may be of some help to you   http   www johndcook com blog 2009 04 27 converting-miles-to-degrees-longitude-or-latitude

User · Answer

my approach works without a library and with cropped maps  Means it works with just parts from a Mercator image  Maybe it helps somebody  https   stackoverflow com a 10401734 730823

User · Answer

Struggled with this - Have both openstreet map and google street map and wanted to project an external graphic image  var map   new OpenLayers Map               div  map-id               allOverlays  true             var osm   new OpenLayers Layer OSM  OpenStreeMao        var gmap   new OpenLayers Layer Google  Google Streets    visibility  false         map addLayers  osm gmap         var vectorLayer   new OpenLayers Layer Vector  IconLayer          var lonlatObject   new OpenLayers LonLat 24 938622 60 170421  transform              new OpenLayers Projection  EPSG 4326    map getProjectionObject              console log lonlatObject        var point   new OpenLayers Geometry Point lonlatObject lon  lonlatObject lat       console log point        var point2   new OpenLayers Geometry Point lonlatObject x  lonlatObject y       console log point2        var feature   new OpenLayers Feature Vector point  null            externalGraphic    http   cdn1 iconfinder com data icons SUPERVISTA networking png 72 antenna png           graphicWidth  72          graphicHeight  72          fillOpacity  1               vectorLayer addFeatures feature        map addLayer vectorLayer         map setCenter              new OpenLayers LonLat 24 938622 60 170421  transform              new OpenLayers Projection  EPSG 4326    map getProjectionObject                              12         map addControl new OpenLayers Control LayerSwitcher       http   jsfiddle net alexcpn N9dLN 8

[javascript] Convert long/lat to pixel x/y on a given picture

Examples related to javascript

Examples related to google-maps

Examples related to coordinates

Examples related to google-static-maps