| Issue 2879: | Expose the MapCanvasProjection on the map | |
| 29 people starred this issue and may be notified of changes. | Back to list |
Expose the MapCanvasProjection so developers can use: fromContainerPixelToLatLng(pixel) fromDivPixelToLatLng(pixel) fromLatLngToContainerPixel(latLng) fromLatLngToDivPixel(latLng)
Nov 22, 2010
Project Member
#1
[email protected]
Labels:
Internal-3220936
Feb 28, 2011
Hi all, Could you please tell us your specific use case(s) for this functionality?
Labels:
ApiType-Javascript3
Feb 28, 2011
(No comment was entered for this change.)
Labels:
Type-Enhancement
Mar 3, 2011
Can you fix this we are waiting for these improvements!
Mar 5, 2011
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
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
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
#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
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.
May 6, 2011
projectionHack.js looks brilliant, extremly short and efficient - more efficient than the API's OverlayView method itself. Very good!
Jun 9, 2011
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
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
@#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.
Jun 15, 2011
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
@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.
Jun 17, 2011
@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
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
Once again, could you please post a link to what you've created?
Feb 29, 2012
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.
Nov 24, 2014
This was created from https://code.google.com/p/gmaps-api-issues/issues/detail?id=2342 which also contains relevant discussion.
Mar 6, 2015
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 |