My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 2879: Expose the MapCanvasProjection on the map
29 people starred this issue and may be notified of changes. Back to list
Status:  Acknowledged
Owner:  [email protected]


Sign in to add a comment
 
Project Member Reported by [email protected], Nov 22, 2010
Expose the MapCanvasProjection so developers can use:
fromContainerPixelToLatLng(pixel)
fromDivPixelToLatLng(pixel)
fromLatLngToContainerPixel(latLng)
fromLatLngToDivPixel(latLng)
Nov 22, 2010
Project Member #1 [email protected]
(No comment was entered for this change.)
Labels: Internal-3220936
Feb 28, 2011
#2 [email protected]
Hi all,

Could you please tell us your specific use case(s) for this functionality?
Labels: ApiType-Javascript3
Feb 28, 2011
#3 [email protected]
(No comment was entered for this change.)
Labels: Type-Enhancement
Mar 3, 2011
#4 [email protected]
Can you fix this we are waiting for these improvements!

Mar 5, 2011
#5 [email protected]
I feel this is a basic necessity as all cursor activity is primarily in pixel space. Anyway, here's a use case:

User moves cursor over map.
App tracks cursor movement in div pixels (without using Maps v3 api).
Map needs to dynamically refresh LatLng feedback to user.

I've tried 2 solutions:
Soln 1: fromPointToLatLng involves world coordinate transformations - extra burden on developer.
Soln 2: fromContainerPixelToLatLng is cleaner but requires a dummy overlay - hoping api hides this hack.

Additionally:
. fromContainerPixelToLatLng was available in v2. Was hoping for smoother porting of legacy code to v3
. I was having some +-180 Longitude wraparound issues when world coordinates, so went with fromContainerPixelToLatLng

Mar 6, 2011
#6 [email protected]
Use-case: Custom tooltip for google.maps.Marker activated on mouseover.
Workaround:

  MyOverlay.prototype = new google.maps.OverlayView();
  MyOverlay.prototype.onAdd = function() { }
  MyOverlay.prototype.onRemove = function() { }
  MyOverlay.prototype.draw = function() { }
  function MyOverlay(map) { this.setMap(map); }
  var overlay = new MyOverlay(map);
  var projection = overlay.getProjection();
  var pixel = projection.fromLatLngToContainerPixel(markerLatLng);

Source of workaround: http://stackoverflow.com/questions/1538681/how-to-call-fromlatlngtodivpixel-in-google-maps-api-v3
Mar 6, 2011
#7 [email protected]
anupsom (#5):
Have you got a link to what you've created? Are you using the workaround of creating a dummy OverlayView?

Dawid (#6), that's absolutely a valid use case for OverlayView. Look at similar libraries like InfoBox and RichMarker:
https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Mar 7, 2011
#8 [email protected]
#7 I haven't created a new workaround. I did use a dummy OverlayView similar to what's in #6.

However, my use case does not require a Marker/OverlayView/Tooltip. Cursor movement is tracked and used elsewhere in my application.

This API feature is not critical for me - just a 'nice to have' / 'used to have in v2' convenience.
May 6, 2011
#9 [email protected]
Here's a packaged version of the workaround : just grab my .js and call projectionHack(map) on your map which will add map.getMapCanvasProjection() method.

It's very handy to have a conversion between screen pixels and LatLngs, thus it should be integrated to the API.
projectionHack.js
455 bytes   View   Download
May 6, 2011
#10 [email protected]
projectionHack.js looks brilliant, extremly short and efficient - more efficient than the API's OverlayView method itself.

Very good! 

Jun 9, 2011
#11 [email protected]
I'd like to see this *fixed*.
at the moment i am trying to fly a div(with image) across my map using fromLatLngToDivPixel(latLng). this wont work unless i use the projectionHack posted above. the problem with this is that as soon as you drag/move the map the x,y to lat,lng translation is incorrect and the hack wont 'reset'.

i'm certainly not the best dev in the world and i'm still learning alot but it just seems to take a lot of effort to do something that was apparently implemented in V2 
Jun 9, 2011
#12 [email protected]
Again, could you please show us a page that shows what you're trying to do.

Just an update to Dawid (#6) - I've implemented something similar without the need for this hack. Essentially, your tool tip *should* be an OverlayView itself - which gives it access to the MapCanvasProjection.

I'm still quite unconvinced that this feature is needed.
Jun 10, 2011
#13 [email protected]
@#12 I was creating a tooltip for a very small map and the tooltip's content was often too big to fit inside the map, so I decided not to implement the tooltip as an OverlayView. I just created the OverlayView for the coordinates computation, which wouldn't be necessary if the google.maps.Map provided the function like in the version 2 of Google Maps API. The demo is in the attachement.
mapTooltip.html
2.5 KB   View   Download
Jun 15, 2011
#14 [email protected]
sorry for the late response, i've been a bit busy.

my 'project' has been uploaded to: http://leander.cargo-office.com/

it currently uses the projectionHack to get a mapCanvasProjection to get fromLatLngToDivPixel(latLng). everything is ok until you move the map. the projectionHack only makes a usable projection once, so if the map is moved the coordiante translation doesnt work anymore. the div still follows the right movement but not the right position. 

in my opinion i really need a good MapCanvasProjection so i can use fromLatLngToDivPixel(latLng). if by any chance i am doing something completely stupid  or some has a good alternative please let me know. 

Jun 15, 2011
#15 [email protected]
@leander - I think your case is different and you probably don't need MapCanvasProjection. If you don't have the requirement that the airplane icon must be an external div and you don't plan to move the airplane icon outside of the map canvas, you could do the animation with the google.maps.Marker with custom icon. Instead of setting left and top CSS properties on the external div, you could simply set position of the marker. That way you wouldn't need to convert between (lat, lng) coordinates and pixel coordinates. The sample marker animation is in the attachment.
animation.html
1.3 KB   View   Download
Jun 17, 2011
#16 [email protected]
@dawid
thanks for the idea, but i already tried this in a similar way. the problem with this is that the 'animation' of the airplane is very inconsistent and it looks more like a flickering image than an animation. the other reason for using a div is that i can easily rotate it using CSS so its pointing at the right angle.
Jul 21, 2011
#17 [email protected]
I also needed the map canvas projection.  I am attaching a flight infobox to a flight marker.  Also converting V2 code to V3.  This missing piece has really slowed me down.  

The hack worked very well.  Thanks! I think it should be included in the next V3 release.
Jul 21, 2011
#18 [email protected]
Once again, could you please post a link to what you've created?
Feb 29, 2012
#19 [email protected]
An example of what I'm trying to port from API V2 to V3 and unable to as a result of the lack of this feature is the following page:

http://dbaron.org/maps/geotagged-photos?user=dbaron&limit=100

The particular feature I'm unable to see how to do in the V3 API is the grouping of photos:  the current (V2) page groups (after each change in zoom) all photos that would overlap, gives them a single visible border (through the hack of merging backgrounds), and overlays the group with the number of photos in that group.  That grouping is done before I add the overlays, since it affects what overlays I'm going to add.  To determine whether the photos are going to overlap, I need to know their pixel positions, which I can't get until I add the overlay and get its draw method called.
Jul 30, 2012
#20 [email protected]
(No comment was entered for this change.)
Nov 24, 2014
#21 geocodezip
This was created from 
https://code.google.com/p/gmaps-api-issues/issues/detail?id=2342
which also contains relevant discussion.
Mar 6, 2015
#22 [email protected]
Workaround, if anyone is interested.  Warning: math.

First, your core reprojection math is here:  https://msdn.microsoft.com/en-us/library/bb259689.aspx

Just reproject the visible extent (map.getBounds()) to Web Mercator pixel x/y for the current zoom level.  You *will* need to deal with 180th meridian spans.  After, offset to the origin and you've got screen x/y.  The MSDN article also has math for doing it in reverse.

Caveats:

1. You'll need to do trig to deal with rotation, for anwhere but the exact center of the screen.  It's manageable.
2.  If / when 3D is added, the math gets... harder.
Sign in to add a comment

Powered by Google Project Hosting